Very Short Question and Answers - New Sectioning Elements in HTML5

Semantic elements are HTML tags that clearly describe their meaning to both the browser and the developer, making the structure of the webpage more meaningful.

Three new semantic elements are <header>, <footer>, and <article>.

Semantic elements benefit SEO by helping search engines better understand the structure and key parts of the webpage, improving ranking.

The <header> element typically contains a logo, website title, navigation menus, and introductory content.

<footer> is usually placed at the bottom of a webpage or the end of a section.

Copyright information and contact links are commonly included inside a <footer> tag.

The <article> tag is used for independent content that can stand alone, such as a blog post, news article, or forum post.

The <section> element is used to group together related thematic content, like chapters of a book or sections of an article.

An <article> represents independent, standalone content, while a <section> is used to group related content within a page or article.

The <nav> element is used to enclose main navigational links, such as menus or navigation bars.

The <aside> element should be used for content that is indirectly related to the main content, like sidebars, advertisements, or related links.

<nav> improves accessibility by helping screen readers identify navigation sections quickly, making it easier for visually impaired users to navigate the site.

<header> 
  <h1>Title</h1> 
  <nav>
    <a href="#">Home</a> | <a href="#">About</a>
  </nav> 
</header>

In HTML4, <div> elements with id attributes (like id="header" or id="footer") were commonly used to mark sections.

One key benefit is that they make the HTML code cleaner and more structured, reducing unnecessary use of <div>.

<aside> separates secondary or related content from the main content, making the page layout clearer.

Example:

<article>
  <h2>Title</h2>
  <section>
    <h3>Subsection</h3>
    <p>Content here.</p>
  </section>
</article>

Semantic elements help screen readers identify sections of the page, improving navigation and accessibility for visually impaired users.

Use <nav> inside <header> to include a top navigation menu for the website, right below or alongside the site title or logo.

<header> – Top section;

<footer> – Bottom section;

<article> – Standalone content;

<section> – Grouped content;

<nav> – Navigation links;

<aside> – Sidebar or secondary info.