Main Semantic Tags

1.1 The <header> Tag

HTML5 semantic tags help developers create more structured and easily readable documents, enhancing both accessibility and SEO (search engine optimization). These tags provide a clearer description of the webpage structure and its contents. Below, we'll take a closer look at the main semantic tags.

The <header> tag is used to represent the header of content or a section. This element usually contains introductory information, navigation links, logos, headings, and other elements related to the top of the content.

Example Usage:

    
      <header>
        <h1>Website Title</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 Features:

1. Placement: The <header> tag can be used for the entire document or for individual sections such as <article> or <section>.
2. Content: Usually contains headings, logos, navigation elements, and other introductory elements.

1.2 The <footer> Tag

The <footer> tag is used to represent the footer of content or a section. This element typically contains author information, links to related documents, privacy policies, contact information, and other elements associated with the bottom of the content.

Example Usage:

    
      <footer>
        <p>&copy; 2024 My Website</p>
        <nav>
          <ul>
            <li><a href="#privacy">Privacy Policy</a></li>
            <li><a href="#terms">Terms of Service</a></li>
          </ul>
        </nav>
      </footer>
    
  

Main Features:

1. Placement: The <footer> tag can be used for the entire document or for individual sections such as <article> or <section>.
2. Content: Usually contains author information, legal information, navigation links, and other concluding elements.

1.3 The <article> Tag

The <article> tag is used to represent an independent, self-contained block of content that can be distributed and reused. This could be a blog post, news article, comment, user post, etc.

Example Usage:

    
      <article>
        <header>
          <h2>Blog Post Title</h2>
          <p>Published on July 6, 2024</p>
        </header>
        <p>This is the content of the blog post. It can include text, images, and other media.</p>
        <footer>
          <p>Author: John Doe</p>
        </footer>
      </article>
    
  

Main Features:

1. Independence: The <article> tag is used for content that can be independently used and distributed.
2. Structure: Usually contains a header (<header>), main content, and a footer (<footer>).

Applications:

• Articles
• Blog Posts
• News
• Comments

Advantages:

• Denotes independent pieces of content
• Helps search engines and other services identify and reuse content

1.4 The <section> Tag

The <section> tag is used to define thematically related groups of content. This could be chapters, sections, or other major parts of content. Unlike <div>, which is used for styling and grouping without semantic meaning, <section> has clear semantic meaning.

Example Usage:

    
      <section>
        <header>
          <h2>About Us</h2>
        </header>
        <p>This section provides information about our company and its history.</p>
      </section>
    
  

Main Features:

1. Thematic Grouping: The <section> tag is used to divide content into thematic groups.
2. Structure: Usually contains a header (<header>) and main content.

Applications:

• Sections within an article
• Thematically related groups of content
• Parts of a page that can be logically distinguished

Advantages:

• Improves document structure and readability
• Helps search engines better understand and index the content

1

Task

Frontend SELF EN, level 10, lesson 1

Locked

Header with Navigation

Header with Navigation

Open

1

Task

Frontend SELF EN, level 10, lesson 1

Locked

Article with a Footer

Article with a Footer

Open