HTML5 Structure and Semantics

HTML5 introduced new elements and attributes that provide better structure and semantics to web documents. These elements help in creating more meaningful, accessible, and SEO-friendly content.

1.

The declaration defines the document type and version of HTML. It should be the first line in an HTML document.

<!DOCTYPE html>    # Declares the document type as HTML5

2.`<html>`

The<html>element is the root element of an HTML document. It contains all other HTML elements.

<html lang="en">    # Root element with language attribute

3.`<head>`

The<head>element contains meta-information about the document, such as the title, character set, and linked stylesheets.

<head>
    <meta charset="UTF-8">    # Character encoding
    <title>Document Title</title>    # Title of the document
    <link rel="stylesheet" href="styles.css">    # Link to an external stylesheet
</head>

4.`<body>`

The<body>element contains the content of the document, such as text, images, and other media.

<body>
    <h1>Main Heading</h1>    # Main heading of the page
    <p>This is a paragraph.</p>    # A paragraph of text
</body>

5.`<header>`

The<header>element represents introductory content or a set of navigational links. It is typically used for headings and site navigation.

<header>
    <h1>Website Title</h1>
    <nav>
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
        </ul>
    </nav>
</header>

6.`<nav>`

The<nav>element defines a section of navigation links.

<nav>
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#services">Services</a></li>
    </ul>
</nav>

7.`<main>`

The<main>element represents the dominant content of the<body>of a document. It is used for the main content unique to the page.

<main>
    <h2>Main Content Heading</h2>
    <p>Main content goes here.</p>
</main>

8.`<section>`

The<section>element represents a thematic grouping of content. It can be used to divide a page into distinct sections.

<section>
    <h2>Section Title</h2>
    <p>Content of the section.</p>
</section>

9.`<article>`

The<article>element represents a self-contained piece of content that could be distributed independently.

<article>
    <h2>Article Title</h2>
    <p>Article content goes here.</p>
</article>

10.`<aside>`

The<aside>element represents content that is tangentially related to the content around it. It is often used for sidebars or additional information.

<aside>
    <h3>Related Information</h3>
    <p>Some additional content or links.</p>
</aside>

11.`<footer>`

The<footer>element represents the footer of a section or page. It typically contains copyright information, contact links, or other metadata.

<footer>
    <p>© 2024 Company Name. All rights reserved.</p>
</footer>

12.`<figure>`

The<figure>element represents any content that is referenced from the main content, such as images or diagrams, often accompanied by a<figcaption>.

<figure>
    <img src="image.jpg" alt="Description">
    <figcaption>This is an image description.</figcaption>
</figure>

13.`<figcaption>`

The<figcaption>element provides a caption or legend for a<figure>element.

<figcaption>This is a caption for the figure.</figcaption>

14.`<address>`

The<address>element is used to provide contact information for the author or owner of a document or article.

<address>
    <p>Contact us at: info@example.com</p>
</address>