Konda 👨‍💻 Coder: HTML SEMANTIC ELEMENTS

HTML semantic elements are tags that provide meaning to the web page structure, making the content more understandable both for web browsers and developers.

Benefits of Using Semantic Elements:

Improved Accessibility: These elements describe the role or purpose of the enclosed content, improving both the accessibility and searchability of the web pages. Unlike generic tags like <div> or <span>.
Better SEO: Search engines can understand and index content more effectively, improving the website's visibility in search results.

<article>: Used for self-contained content that can be independently distributed or reused, such as blog posts, news articles, or forum posts.

    <article>
        <h2>Breaking News</h2>
        <p>This is a news article about a significant event.</p>
    </article>

<aside>: Used for content that is tangentially related to the content around it. This can include sidebars, pull quotes, or advertisements.

    <aside>
      <h2>Related Links</h2>
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
      </ul>
    </aside>

<details> and <summary>: Used together to create a disclosure widget that users can open and close to reveal additional information.

    <details>
      <summary>More Info</summary>
      <p>This additional information can be toggled to be hidden or shown.</p>
    </details>

<figure> and <figcaption>: Used to group media content like images, diagrams, or code snippets, along with their captions.

    <figure>
      <img src="image.jpg" alt="Description of image">
      <figcaption>This is a caption for the image.</figcaption>
    </figure>

<footer>: Used for the footer of a section or page, typically containing information about the author, copyright, links to related documents, etc.

    <footer>
      <p>&copy; 2024 Example Company. All rights reserved.</p>
    </footer>

<header>: Used for introductory content, often containing navigation links, logos, or headings.

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

<main>: Represents the main content of the document. There should be only one <main> element per page, and it should exclude repeated content like sidebars, navigation links, etc.

    <main>
      <h2>Main Content Heading</h2>
      <p>This is the central part of the webpage content.</p>
    </main>

<mark>: Used to highlight or mark text that is of special interest or relevance.

    <mark>: Used to highlight or mark text that is of special interest or relevance.

<nav>: Used for navigation links, containing a set of links to other parts of the site or different pages.

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

<section>: Represents a generic standalone section of content, typically with a heading. Sections can be used for chapters, headers, footers, or any other thematic grouping of content.

    <section>
      <h2>Section Title</h2>
      <p>This is a paragraph within the section.</p>
    </section>

<time>: Represents a specific period in time. It can be used to encode dates and times in a machine-readable format.

    <time datetime="2024-06-18">June 18, 2024</time>

Complete File:



<!DOCTYPE html>
<html lang="en">

<head>
    <title>Document</title>
</head>

<body>




    <h1>------------------------------------article------------------------------------</h1>


    <article>
        <h2>Breaking News</h2>
        <p>This is a news article about a significant event.</p>
    </article>



    <h1>------------------------------aside-----------------------------------------</h1>


    <aside>
        <h2>Related Links</h2>
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
        </ul>
    </aside>



    <h1>------------------------------------details------------------------------------</h1>


    <details>
        <summary>More Info</summary>
        <p>This additional information can be toggled to be hidden or shown.</p>
    </details>



    <h1>----------------------------------figure--------------------------------------</h1>


    <figure>
        <img src="image.jpg" alt="Description of image">
        <figcaption>This is a caption for the image.</figcaption>
    </figure>



    <h1>----------------------------------footer--------------------------------------</h1>


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



    <h1>--------------------------------header>----------------------------------------</h1>



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


    <h1>-------------------------------main>-----------------------------------------</h1>


    <main>
        <h2>Main Content Heading</h2>
        <p>This is the central part of the webpage content.</p>
    </main>



    <h1>-----------------------------------mark>-------------------------------------</h1>



    <p>Here is some <mark>highlighted</mark> text.</p>


    <h1>---------------------------------------nav>---------------------------------</h1>



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


    <h1>------------------------------------section>------------------------------------</h1>



    <section>
        <h2>Section Title</h2>
        <p>This is a paragraph within the section.</p>
    </section>


    <h1>--------------------------------time>----------------------------------------</h1>

    <time datetime="2024-06-18">June 18, 2024</time>

</body>

</html>

Konda 👨‍💻 Coder

Pages

Monday, June 17, 2024

HTML SEMANTIC ELEMENTS

No comments:

Post a Comment