Tutorials


Semantic and Layout Tags


Semantic and layout tags in HTML play crucial roles in structuring and presenting content in a meaningful and organized way. While layout tags help control the visual arrangement of elements, semantic tags add meaning to the content, enhancing accessibility and SEO.

Semantic Tags

Semantic tags provide meaning to the web content, helping both browsers and search engines understand the structure and purpose of the content. They improve accessibility and make it easier to style content with CSS.

  1. <header> (Header Tag)

    • Description: The <header> tag represents introductory content or a group of navigational links. It typically contains the site logo, navigation bar, or introductory content.
    • Usage: Used at the top of a section or the entire page to define introductory content or a group of navigational links.
    • Example:
      <header>
    <h1>My Website</h1>
    <nav>
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
</header>

  2. <nav> (Navigation Tag)

    • Description: The <nav> tag is used to define a section of navigation links. It helps organize the navigation menu and aids in accessibility.
    • Usage: Used for grouping links to navigate the website or application.
    • Example:
      <nav>
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</nav>

  3. <main> (Main Tag)

    • Description: The <main> tag represents the main content of a document. It excludes content that is repeated across multiple pages, such as headers, footers, and sidebars.
    • Usage: Contains the primary content of the page, making it easier for screen readers and search engines to identify the main content.
    • Example:
      <main>
    <article>
        <h2>Article Title</h2>
        <p>This is the main content of the article.</p>
    </article>
</main>

  4. <section> (Section Tag)

    • Description: The <section> tag is used to define a section of content. Each section can have its own heading and be logically distinct from other sections.
    • Usage: Groups related content into sections, improving the organization and readability of the document.
    • Example:
      <section>
    <h2>Introduction</h2>
    <p>This section introduces the topic.</p>
</section>

  5. <article> (Article Tag)

    • Description: The <article> tag is used to encapsulate content that forms an independent part of a document or application. It can be a blog post, news article, or forum post.
    • Usage: Defines a self-contained piece of content that could be distributed or syndicated independently.
    • Example:
      <article>
    <h2>Article Title</h2>
    <p>This is the content of the article.</p>
</article>

  6. <aside> (Aside Tag)

    • Description: The <aside> tag represents content indirectly related to the main content, such as sidebars or pull quotes. It can be used for supplementary information or advertisements.
    • Usage: Adds supplementary content that is tangentially related to the main content.
    • Example:
      <aside>
    <h2>Related Links</h2>
    <ul>
        <li><a href="#">Related Article 1</a></li>
        <li><a href="#">Related Article 2</a></li>
    </ul>
</aside>

  7. <footer> (Footer Tag)

    • Description: The <footer> tag defines the footer of a section or the entire page. It typically contains copyright information, contact details, or links to related documents.
    • Usage: Used at the bottom of a section or page to include information about the author, copyright, or related links.
    • Example:
      <footer>
    <p>&copy; 2024 My Website</p>
</footer>

  8. <figure> and <figcaption> (Figure and Figcaption Tags)

    • Description: The <figure> tag is used to encapsulate media content, such as images or diagrams, along with optional captions. The <figcaption> tag provides a caption for the content inside the <figure>.
    • Usage: Groups media content and its caption together, improving the semantic structure of the page.
    • Example:
      <figure>
    <img src="photo.jpg" alt="A beautiful scene">
    <figcaption>A beautiful scene in nature</figcaption>
</figure>

Layout Tags

Layout tags help control the arrangement and styling of content on the page. They define the structure and positioning of elements.

  1. <div> (Division Tag)

    • Description: The <div> tag is a generic container used to group content and apply styles or layout rules. It does not have any inherent meaning but is useful for layout purposes.
    • Usage: Used to group content and apply styles or scripts to sections of a page.
    • Example:
      <div class="container">
    <p>This is a paragraph inside a div container.</p>
</div>

  2. <span> (Span Tag)

    • Description: The <span> tag is an inline container used to apply styles or scripts to a portion of text or other inline elements. It does not create a new block-level element but allows for styling and scripting of a part of the content.
    • Usage: Used to apply styles or scripts to a small section of text or inline elements.
    • Example:
      <p>This is <span class="highlight">highlighted</span> text.</p>

  3. <main> (Main Tag)

    • Description: Already discussed under semantic tags. It represents the main content of a document.

  4. <section> (Section Tag)

    • Description: Already discussed under semantic tags. It represents a thematic grouping of content.

  5. <header> (Header Tag)

    • Description: Already discussed under semantic tags. It represents introductory content or a group of navigational links.

  6. <footer> (Footer Tag)

    • Description: Already discussed under semantic tags. It represents the footer of a section or page.

Example of Combining Semantic and Layout Tags

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Semantic and Layout Tags Example</title>
    <style>
        .container {
            width: 80%;
            margin: 0 auto;
        }
        .highlight {
            color: red;
        }
    </style>
</head>
<body>
    <header>
        <h1>My Website</h1>
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section>
            <h2>Welcome to My Website</h2>
            <p>This is a sample page demonstrating the use of semantic and layout tags in HTML.</p>
        </section>

        <article>
            <h2>Article Title</h2>
            <p>Here is some article content. This section represents a standalone piece of content.</p>
        </article>

        <aside>
            <h3>Related Links</h3>
            <ul>
                <li><a href="#">Related Article 1</a></li>
                <li><a href="#">Related Article 2</a></li>
            </ul>
        </aside>
    </main>

    <footer>
        <p>&copy; 2024 My Website</p>
    </footer>
</body>
</html>



Next Previous




@aCodeTutorials All Rights Reserved
privacy policy | about