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.