Tags

HTML5 introduced several new semantic and structural elements to enhance the structure and meaning of web documents.

These elements help developers create more accessible, SEO-friendly, and well-organized web pages.

<article>:

Represents a self-contained piece of content that could be distributed and reused independently, such as a news article or blog post.

<article>
  <h2>
    Article Title
  </h2>
  <p>
    Content of the article goes here.
  </p>
</article>

<section>:

Defines a section in a document, typically with a heading, and is used to group related content.

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

<nav>:

Represents a navigation menu or links to other pages or sections within the same document.

<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> and <footer>:

<header> represents the header of a section or page. <footer> represents the footer of a section or page.

<header>
  <h1>Page Header</h1>
</header>

<footer>
  <p>Page Footer</p>
</footer>

<main>:

Specifies the main content of the document and should not include headers, footers, or sidebars.

<main>
  <h1>Main Content</h1>
  <p>Body of the document goes here.</p>
</main>

<aside>:

Represents content that is tangentially related to the content around it, such as sidebars or pull quotes.

<article>
  <h2>Article Title</h2>
  <p>Content of the article goes here.</p>
  <aside>
    <p>Related information or sidebar content.</p>
  </aside>
</article>

<figure> and <figcaption>:

<figure> is used to group and represent content such as images, videos, or illustrations. <figcaption> provides a caption or legend for the content within the <figure>.

<figure>
  <img src="/logo.png" alt="Description" style="height: 50px">
  <figcaption>Caption for the image.</figcaption>
</figure>


  
  Caption for the image.

<time>:

Represents a specific period in time and can include a machine-readable date or time.

<time datetime="12-12-2020">
  12 Dec, 2020
</time>


  12 Dec, 2020

<mark>:

Represents text that has been highlighted or marked for reference or emphasis.

<p>This is <mark>highlighted</mark> text.</p>

This is highlighted text.

<progress>:

Represents the progress of a task or a measurement, such as the completion of a form or a download.

<progress value="50" max="100">50%</progress>

50%

Image -->