neetix

HTML semantic tags for structure

The <header> element is generally found at the top of a document, a section, or an article. It usually contains the website logo, website name, navigation bar, a sign-in prompt, shopping cart icon and search tools.

<header>Content</header>

Example


<body>
    <header>
        <h2>neetix.com</h2>
    </header>
</body>

The <footer> element is generally found at the bottom of a document, a section, or an article. It usually contains copyright information, contact details, and links.

<footer>Content</footer>

Example:

<body>
    <footer>
       <p>&copy; 2023 neetix.com</p>
       <p>Contact: ****@neetix.com</p>
    </footer>
</body>

Main:

The <main> tag contains the main content of a page. There should be only one tag per page.

<main>Content</main>

Example:

<body>
    <main>
       <h1>Title</h1>
       <p>Content related to title.</p>
    </main>
</body>

The <nav> tag is usually used for navigation links. It can be utilized within various sections of a webpage, including the header, footer, aside, or any other part.

<nav>Content</nav>

Example: Navigation inside header

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

Aside:

The <aside> tag is usually used for sidebars. It can contain content related to the main content or provide non-essential supplementary details.

Example

<body>
  <article>
    <h2>Semantic HTML Tags for Structure</h2>
    <aside>
      <ul>
        <li><a href="#">Semantic HTML Tags</a></li>
        <li><a href="#">Semantic HTML Tags for Text</a></li>
      </ul>
    </aside>
  </article>
</body>

Article:

The <article> tag in HTML is like a container for a self-contained story or piece of content on a web page. It's where you put something that can stand alone and make sense on its own.

Imagine it as an individual article in a newspaper or a blog post on a website. Each article can have its own heading, text, images, and everything needed to understand it. So, if you can take a piece of content, like a news story, a blog post, or a product description, and it makes sense by itself, you should put it inside an <article> tag. It helps browsers and search engines understand that this content is a complete unit on its own.

<article>Content</article>

Example:

<body>
  <article>
    <h1>Semantic HTML Tags</h1>
    <p>Semantic HTML is all about choosing the right HTML tags ...</p>
  </article>
</body>

Section:

The <section> tag is often used to divide a webpage into distinct sections, such as chapters in an online book, different parts of an article, or segments of a long webpage. It helps organize content for better readability and structure. Use the <section> tag when you want to group related content thematically within a page.

<section>
    <h1>Chapter 1: Introduction</h1>
    <p>This is the introduction to the topic...</p>
</section>

Example:

<body>
  <main>
    <section>
      <h2>Top Stories</h2>
      <article>News 1</article>
      <article>News 2</article>
    </section>

    <section>
      <h2>Technology</h2>
      <article>News 1</article>
      <article>News 2</article>
    </section>
  </main>

  <section>
    <h2>Contact Us</h2>
    <p>Feel free to get in touch with us...</p>
  </section>
</body>

Image:

The <img> tag is used to display images on a web page. It is a self-closing tag.

<img src="image.png" alt="cute puppy" >

  • src: This attribute specifies the source (file path or URL) of the image you want to display.

  • alt: The "alt" attribute provides alternative text for the image. Screen readers use this alt text to convey the content and meaning of images to users who cannot see them.

    For example, if the alt text is "A cute puppy," the screen reader will announce, "Image: A cute puppy."

  • width and height: These attributes define the width and height of the image in pixels. They are optional.

Figure:

The <figure> tag is like a container for things like images, charts, or diagrams. It's used to group these items together when they are related to the content on your web page. It’s like a picture frame.

  • The <figure> tag holds the picture.

  • Use <figcaption> tag to add a caption that describes what's in the frame. This helps people and search engines understand the content better.

<figure>
  <img src="image.png" alt="cute puppy" >
  <figcaption>Cute Puppy</figcaption>
</figure>

Can't find what you're looking for?