Semantic HTML: The Key tags and their functions.

The moment i came across HTML 5 i felt so glad, it has introduced a whole set of new elements that make it much easier to structure pages.

What is Semantics?

semantics gives content on the page meaning, structure, value and not just its style. The use of Semantic HTML has helped search Engines classify and categorize contents, easier site maintenance for developers, restyling and updates.

Let's talk about the Semantic HTML elements, their key tags and functions.

• <header>
  The header element represents introductory content for its sectioning root element. A header can nest a group of introductory or navigational aids and it be several times on a content page.

• <nav>
  The nav element represents a section of a page that links to other pages or to parts within the content page. The <nav> element easily access linked information with specific contents in a page.

• <section>
  The section element represents a generic section of a document or application. It is a thematic grouping of content.A website Home page could be into section such as introduction, content and contact This element can nest h1and p tag as a child of the section element.

• <article>
  element represents the article in a content, its a standalone element(independent). This element is used for blog, forum posts and newspaper articles.

• <figcaption>
  Defines a caption for a <figure> element. This element adds a visual explanation to an image.

• <main>
  specifies the main content of a document. The content inside the <main> element shouldn't have repeated contents across a document such as navigation links, copyright information, sidebars, site logos, and search forms. Only one <main> element in a document can be used.The <main> element must NOT be a descendant every other elements as <nav>.

• <aside>
  element defines some content aside from the content it is placed in (like a sidebar). The aside content should be related to the surrounding content.

• <details>
  specifies additional details that the user can view or hide on demand. The element creates an interactive widget a user can open and close. Different sort of content can be put inside the <details> . content can only be visible when the open attribute is set.

• <summary>
  tag defines a visible heading for the <details> element. The heading can be clicked to view/hide the details.

• <mark>
  element is used when you want to highlight parts of your text.

• <time>
  element is used to encode dates and times in a machine-readable way so users can add scheduled Events to the user's calendar, and search engines can produce smarter search results. This is a human-readable date/time.

• <footer>
  element specifies a footer for a document or section. This element usually contains the author, copyright information, links and contact information.
  I guess you'd agree that there's several advantages using semantic HTML elements, which has made it much easier to structure pages. Despite the fact that non semantic elements like <div> and <span> tells us nothing about it contents, but the semantic elements like <form> , <img> clearly states its content.