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
div
with class 'header' denotes the header section of the website. This is the part of the website that holds the navigation links (thediv
element with the class ofnav
), the hero of the website and all other things in the 'above-the-fold' section of the website.the
div
with the classmain
denotes 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
header
tag denotes the header of the website. It is this section that holds the navigation links in thenav
tags.the
main
tag holds the main block of your website. Using differentsection
tags, you can separate different sections of your website.the
footer
tag 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 differentsection
tags 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 thenav
tags for navigation, someheading
tags, your logo or site title.<nav> </nav>
: This tag holds all the links to your navigation. In longform, this tag means 'navigation'.<section> </section>
: Thesection
tag is used to group different standalone sections of your website together. For example, you could have asection
listing all your services, and anothersection
listing details about your team.<code> </code>
: Thecode
tag is used to format text to resemble code blocks. Information inside thecode
tag will be formatted to mono-space type text.<map > </map >
: Themap
tag is used create an image map. In an image map, you can set different parts of the image, using thearea
tag, to link to different external or internal pages. See example.<mark> </mark>
: Themark
tag 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>
: Thedetail
tag 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 asummary
tag.<summary> </summary>
: Thesummary
is usually contained inside thedetail
tag. It works as the heading for the details tag. Content inside this tag is usually seen by your website visitors.<footer> </footer>
: Thefooter
tag 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
header
tags as headers, themain
tags 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.