Semantic HTML Layout

Structuring layouts semantically using standard layout tags.

Semantic tags improve code readability, screen-reader accessibility, and SEO.

Layout Elements

<header>: Holds introductory content or navigation links.
<nav>: Wraps a block of navigation links.
<main>: Specifies the unique, primary content of the document.
<section>: Groups related contents together.
<article>: Represents an independent, self-contained article or composition.
<aside>: Contains content tangentially related to the surrounding text (e.g., sidebar).
<footer>: Defines the bottom section or footer of a page.

Layout Example

html

<body>

<header></header>

<nav></nav>

<main>

<section></section>

<article></article>

<aside></aside>

</main>

<footer></footer>

</body>

Interview questions

Why should we use semantic layout tags instead of generic divs?

Semantic tags provide clear structural context to assistive technologies (like screen readers) and help search engines crawl and rank the content of your page more effectively.

Practice

Design a basic blog post layout structure using header, nav, main, article, aside, and footer elements.

Hint: Put the article and aside within the main element.