HTML5 SEMANTIC

What does Semantic HTML mean?

Semantic HTML introduces meaning to the code we write. Before Semantic HTML the elements didn’t have any meaning as to what it does or what content goes in it. An element such as <div> was used as a general-purpose element to create things from headers to footers to articles. With Semantic HTML we were introduced to elements that tell developers and browsers exactly what it does and what content should go in it.

                    <!--Non Semantic HTML-->
<div id="footer">
 <p>this is a footer</p>
</div>

<!--Semantic HTML-->
<footer>
 <p>this is a footer</p>
</footer>

HTML <main> Tag

The <main> tag specifies the main content of a document.The content inside the <main> element should be unique to the document. It should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms.

Note: There must not be more than one <main> element in a document. The <main> element must NOT be a descendant of any semantic element.

                    <main>
 <h1>Most Popular Browsers</h1>
 <p>Chrome, Firefox, and Edge are the most used browsers today.</p>

 <article>
  <h2>Google Chrome</h2>
  <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
 </article>

 <article>
  <h2>Mozilla Firefox</h2>
  <p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
 </article>

 <article>
  <h2>Microsoft Edge</h2>
  <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
 </article>
</main>

HTML <header> Element

The <header> element represents a container for introductory content or a set of navigational links. A <header> element typically contains:

one or more heading elements (<h1> - <h6>)
logo or icon
authorship information

Note: You can have several <header> elements in one HTML document. However,<header> cannot be placed within a <footer>, <address> or another <header> element.

                    <article>

 <header>
  <h1>What Does WWF Do?</h1>
  <p>WWF's mission:</p>
 </header>
 
 <p>WWF's mission is to stop the degradation of our planet's natural environment, and build a future in which humans live in harmony with nature.</p>

</article>

HTML <nav> Element

The nav element defines a set of navigation links.

                    <nav>
 <a href="/html/">HTML</a> 
 <a href="/css/">CSS</a> 
 <a href="/js/">JavaScript</a>
 <a href="/jquery/">jQuery</a>
</nav>

HTML <section> Element

The <section> element defines a section in a document. According to W3C's HTML documentation: "A section is a thematic grouping of content, typically with a heading."

Examples of where a <section> element can be used:

Chapters
Introduction
News items
Contact information

A web page could normally be split into sections for introduction, content, and contact information.

                    <section>
 <h1>WWF</h1>
 <p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>

<section>
 <h1>WWF's Panda symbol</h1>
 <p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>
</section>

HTML <article> Element

The <article> element specifies independent, self-contained content. An article should make sense on its own, and it should be possible to distribute it independently from the rest of the web site.

Examples of where the <article> element can be used:

Forum posts
Blog posts
User comments
Product cards
Newspaper articles

                    <article>
 <h2>Google Chrome</h2>
 <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>

<article>
 <h2>Mozilla Firefox</h2>
 <p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
</article>

<article>
 <h2>Microsoft Edge</h2>
 <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>

HTML <aside> Element

The <aside> element is used to mark additional information that can enhance another element but isn’t required in order to understand the main content. Usually, this information would be in a sidebar or a location where it doesn’t obstruct the main piece of content. An example of this would be an article that discusses how to take care of a dog and next to the article an ad would appear advertising a dog grooming product.

                    <article>
<!--Main Content-->
</article>

<aside>
<!--Additional information-->
</aside>

HTML `<footer>` Tag

The <footer> tag defines a footer for a document or section. A <footer> element typically contains:

authorship information
copyright information
contact information
sitemap
back to top links
related documents

You can have several <footer> elements in one document.

                    <footer>
 <p>Author: Hege Refsnes</p>
 <p>
  <a href="mailto:hege@example.com">
  hege@example.com</a>
 </p>
</footer>

Table of Semantic Elements

Common Semantic HTML elements.

Tag	Description
main	Specifies the main content of a document
header	Specifies a header for a document or section
nav	Defines navigation links
section	Defines a section in a document
article	Defines independent, self-contained content
aside	Defines content aside from the page content
footer	Defines a footer for a document or section

References

These information is taken from W3schools and Codecademy.

Want to see more?

These are some useful website that will provide you with more information about semantic HTML.