Rocking HTML Series Part III: New HTML 5 Semantic Elements with Examples

Semantic Means “Meaning”

Okay, so readers welcome to the yet another happening Rocking HTML Series Part Third. Today we will dwell on the new semantic elements of the HTML 5 with their one lucrative example. So, let’s start with the meaning of the semantic element.

Semantic Elements = Meaning of Element

Well, the linguistic meaning of the semantic elements means the elements which can explain themselves. Semantic Elements has a predetermined meaning and purpose in the HTML language. For example, semantic elements are like <form>, <table>, and <article>. As these elements clearly define their purpose such as <table> element has a purpose to insert a table in the content.

Whereas the nonsemantic elements like <div> and <span> don’t explain anything regarding the content of the elements. Usually, all the latest web browsers understand the new HTML 5 semantic elements. Google Chrome, Firefox Mozilla, Opera Mini, Safari, and Internet Explorer support the semantic elements. And, the older web browser who doesn’t support semantic elements can learn them easily.

So, if you are still stuck with HTML code like: <div id=”nav”> <div class=”header”> <div id=”footer”>, then my mate you are missing out so much fun. Like:

#1. <section> Element

<section> Element is thematic group of content typically containing heading. This element can split the content into introduction as in heading and rest of the content of website. For example;

<section>

 <h1>HTML</h1>

 <p>Hyper Text Markup Language is a …….</p>

</section>

#2. <article> Element

The <article> Element is a independent and self explanatory content. The article is different from the rest of the website and can be independently readable. Element article has nothing to do with the rest of the web content. Article element is mainly used in blog sites, newspaper sites and forum sites. For example:

<article>

 <h1>What Does HTML Do?</h1>

 <p>Hyper Text Markup Language is used to create websites and  numerous other web based applications.

</p>

</article>

#3. <header> Element

This element is a self explanatory which means providing header to the content. The content enclosed in the <header> Element will be visible as the headline of the website. In one article you can use numerous headers, let’s take the example of this very article.

<article>

 <header>

   <h1>Rocking HTML Series Part III; New HTML 5 Semantic Elements With Examples</h1>

   <p>Semantic Means “Meaning”</p>

 </header>

 <p>Okay, so readers welcome to the yet another happening Rocking HTML Series Part Third. </p>

</article>

#4. <footer> Element

Well, the <footer> Element defines the footer content of the document or website. The content that has to be mentioned in the footer of a document must be enclosed in <footer> Element. This element is mainly used to write page number, authors name etc. For example;

<footer>

 <p>Posted by: Hege Refsnes</p>

 <p>Contact information: <a href=”mailto:someone@example.com”>

 someone@example.com</a>.</p>

</footer>

#5. <nav> Element

To highlight the links of the document <nav> Element is used. To prominent the links in the document, they have to be properly enclosed in the <nav>. For example;

<nav>

 <a href=”/html/”>HTML</a> |

 <a href=”/css/”>CSS</a> |

 <a href=”/js/”>JavaScript</a> |

 <a href=”/jquery/”>jQuery</a>

</nav>

#6. <aside> Element

To keep some content aside from the rest of the website content <aside> Element is used. It’s like sidebar where some aside content is kept. For example;

<p>I have visited the Taj Mahal numerous times with my family.</p>

<aside>

 <h4>Taj Mahal</h4>

 <p>Taj Mahal is located in the beautiful city of India called Agra.</p>

</aside>

#7. <figure> and <figcaption> Elements

Purpose of figure tag is to add visual explanation to the image. In the figurecaption tag image and explanation of image can be enclosed. Whereas image tag defines image and <figcaption> signifies the content of the image. For example;

<figure>

 <img src=”pic_tajmahal.jpg” alt=”Taj Mahal”>

 <figcaption>Fig1. – Taj Mahal, Agra, India.</figcaption>

</figure>

Requirement of Semantic Elements

With HTML4, developers used their own id/class names to style elements: header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, etc. This makes impossible for search engines to identify the content of the website.

But, now with the help of HTML 5 elements, the search engines can easily understand the content of the website. So, folks, apart from above mentioned HTML 5 semantic elements numerous other elements are available to help you out like <main>, <mark>, <detail>, <section>, <summary> and <time>. So, developers keep on using HTML 5 semantic elements.

Send a Message