Prerequisite(s)
- Basic knowledge of HTML (Hypertext Markup Language), you can get an overview here.
So, if you got started with HTML(Hypertext Markup Language) 10 years ago, you are most likely used to the non-semantic way of writing HTML.
Semantic HTML simply means the markup code is easy to make sense of while you read through. This style of writing uses more descriptive tags like
<section></section>,<article></article>and others, to show the different parts of your website structure in code.
HTML before the 5
Before HTML5 came along, HTML documents were a mashup of div and span tags:
-
<div> </div>: These tags are used to show block level elements ie, each element inside a div tag represents a block of code that can stand alone.
<div>
<h4>I am the heading for this section</h4>
<p>I am the content for this section</p>
</div>
-
<span> </span>: These tags are used to show inline elements ie, each element inside a span tag represents an inline text or information.
<p>I am an <span>inline element</span></p>
The div tags were used to separate different sections of a HTML document while the span tags were used for inline elements. However, with this new version of HTML ie HTML5, semantic tags were introduced to takeover and create more readable and accessible HTML documents.
HTML vs HTML5
HTML
*** Sample code***
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>I am the Title of the page</title>
</head>
<body>
<div class="header">
<div class="nav">
<ul id="nav-items">
<li class="nav-links">
<a href="">Home</a>
</li>
</ul>
</div>
</div>
<div class="main">
<h1>I am a heading</h1>
</div>
<div class="section">
<!-- a section here -->
</div>
</body>
</html>
the
divwith class 'header' denotes the header section of the website. This is the part of the website that holds the navigation links (thedivelement with the class ofnav), the hero of the website and all other things in the 'above-the-fold' section of the website.the
divwith the classmaindenotes the main section of the website. It is this section that holds the main contents of the website.
HTML5
*** Sample code***
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>I am the Title of the page</title>
</head>
<body>
<header>
<nav>
<ul>
<li class="nav-links"></li>
</ul>
</nav>
</header>
<main>
<h1>I am a heading</h1>
<section>
<p>I am a section title</p>
</section>
</main>
<footer>
<p>This is the footer</p>
</footer>
</body>
</html>
the
headertag denotes the header of the website. It is this section that holds the navigation links in thenavtags.the
maintag holds the main block of your website. Using differentsectiontags, you can separate different sections of your website.the
footertag is used to show the footer section of your website.
HTML5 TAGS
<main> </main>: This tag specifies the main contents of your HTML document. You would usually add your differentsectiontags to show the different sections of your page.<header> </header>: This tag shows your readers the topmost part of your website, the introductory section. It typically contains thenavtags for navigation, someheadingtags, your logo or site title.<nav> </nav>: This tag holds all the links to your navigation. In longform, this tag means 'navigation'.<section> </section>: Thesectiontag is used to group different standalone sections of your website together. For example, you could have asectionlisting all your services, and anothersectionlisting details about your team.<code> </code>: Thecodetag is used to format text to resemble code blocks. Information inside thecodetag will be formatted to mono-space type text.<map > </map >: Themaptag is used create an image map. In an image map, you can set different parts of the image, using theareatag, to link to different external or internal pages. See example.<mark> </mark>: Themarktag is used to highlight text. It has a default colour of yellow, but this can easily be changed using CSS (Cascading Style Sheet).<detail> </detail>: Thedetailtag helps you to create HTML dropdown effect. This is good for when you want to give the user the option of showing or hiding certain pieces of information. It usually contains asummarytag.<summary> </summary>: Thesummaryis usually contained inside thedetailtag. It works as the heading for the details tag. Content inside this tag is usually seen by your website visitors.<footer> </footer>: Thefootertag is used to define the footer section of your website. Everything inside this tag is usually text or information belonging to the footer section of your page.
Conclusion
In conclusion, HTML5 tags are better to use for the following reasons:
Accessibility: Screen readers and other disability-aid devices have an easier time reading through semantic tags. This is because the devices can read the
headertags as headers, themaintags as main content e.t.c. This makes your website accessible to a wider range of people and allows accessibility for all.Readability: Semantic code makes it easier for you, the developer, and your teammates easily read through the codebase and make edits where necessary.
See you next week, I will be writing more on web development and other beginner friendly topics.
Ciao!
Vanessa O.
PS: If you're looking to start on your tech career this year, you can download this checklist of 14 careers in tech and see the programming language you should learn first.
Top comments (0)