Web Development

HTML5 Semantic Elements

Using semantic HTML5 elements for better structure

Page Structure

<header> # introductory content or navigation
<nav> # navigation links
<main> # main content (one per page)
<footer> # footer content
<aside> # sidebar or related content

Content Sections

<article> # self-contained content
<section> # thematic grouping of content
<figure> # self-contained content (images, diagrams)
<figcaption> # caption for figure

Text Content

<h1> to <h6> # headings
<p> # paragraph
<blockquote> # extended quotation
<mark> # highlighted text
<time> # date/time

Example Structure

<header>
    <h1>Page Title</h1>
</header>
<main>
    <article>
        <h2>Article Title</h2>
        <p>Content...</p>
    </article>
</main>