Hello again.
Last time out we did a little Introduction into React . Today I am slightly shifting the focus over to HTML.
HTML stands for Hyper Text Markup Language. You can represent all elements of a text document with a relevant tag in HTML. However, until the release of the HTML5 standard there were no elements to represent certain areas of a document.
As a result, you would often find mark-ups such as div class=”footer” or div class=”navigation” used to represent a footer and a navigation respectively. While this worked, it wasn't a semantically ideal use case. When I say semantic, I mean that each HTML element should represent it’s equivalent in a meaningful way. Thankfully, the coming of the HTML5 standard also brought about semantic elements.
What is a semantic element?
A document has a footer section. Instead of using: div class=”footer” to represent the footer in the HTML document, we’re now able to use a dedicated footer element.
The coming of semantic elements brought better meaning to our HTML markup and allowed us reason about HTML elements in a more intuitive and sensible way.
Without further ado, below are 10 elements to use in place of the div element:
Article
An article can represent a blog post or a forum post. Before the tag was introduced, you’d do something like this:
<div class=”first-article”>
<h2>1st article</h2>
<p>This is the first article from Kingsley</p>
</div>
Now, it’s all meaningful:
<article>
<h2>1st article</h2>
<p>This is the first article from Kingsley
</article>
<article>
<h2>2nd article</h2>
<p>This is the first article from Kingsley.</p>
</article>
Footer
The footer tag is used to represent the bottom section of the page.
Before:
< div class=”footer”>
<p>Kingsley Ubah</p>
<p><a href="mailto:kingsley@example.com">kingsley@example.com</a></p>
</div>
Now:
<footer>
<p>Kingsley Ubah</p>
<p><a href="mailto:kingsley@example.com">kingsley@example.com</a></p>
</footer>
Header
Header represents the area for some form of introductory content, such as the title of an article.
Before:
<div class=”article”>
<div class=”header”>>
<h1>React Definition</h1>
<p>What is React?</p>
</div>
<p>React is a JavaScript framework...
</div>
Now:
<article>
<header>
<h1>React Definition</h1>
<p>What is React?</p>
</header>
<p>React is a JavaScript framework...
</article>
Nav
Nav is used to hold a set of Navigation links.
Before:
<div class=”nav”>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
</div>
Now:
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
</nav>
Main
This defines the main content of a document.
Before:
<div class=”main”>
<p> This is the main text </p>
</div>
Now:
<main>
<p> This is the main text </p>
</main>
Section
As it’s name suggests, it defines a section in a page
<div class=”section-one”>
<h1>First Section</h1>
<p>This is the first section</p>
</div>
<div class=”section-two”>
<h1>Second Section</h1>
<p>This is the second section</p>
</div>
Now:
<section>
<h1>First Section</h1>
<p>This is the first section</p>
</section>
<section>
<h1>Second Section</h1>
<p>This is the second section</p>
</section>
Figure and Figcaption
The figure tag specifies self-contained content, such as illustrations, code blocks, diagrams, photos etc.
The figcaption defines a caption for the figure.
<figure>
<img src="ubahthebuilder.jpg" alt="This is my blog">
<figcaption>Fig1. – Blog Home</figcaption>
</figure>
Aside
The aside element defines some content which will be placed beside another content, kind of like a sidebar,
Before:
<p>This content is the main content which will be placed at the center</p>
<div class=”sidebar”>
<h2>Side Content</h2>
<p>This content will be aligned to the side</p>
</div>
Now:
<p>This content is the main content which will be placed at the center</p>
<aside>
<h2>Side Content</h2>
<p>This content will be aligned to the side</p>
</aside>
P/S: I recently launched my Beginners Guide to Web development for Absolute Beginners. Check it out .
These 8 are some of the semantic elements to be used in lieu of the div tag. I hope you found this post enlightening.
Make sure to follow this blog for more informative posts on web development.
See you soon.
Top comments (4)
Awesome it was well explained too!
Thank you Andrew!
Great post, really important to use semantic HTML for accessibly.
Thanks for this. Good article!