HTML

HTML Semantic Elements

The HTML semantic element gives meaning to the content. It helps browsers as well as developers understand the structure of a webpage. For example

  • <article>
  • <details>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <section>
  • <summary>
  • <time>

HTML <section> Element

To define a section in the document, the HTML <section> element is used. The section of the document could be a chapter, introduction, conclusion, contact information, and others. All the information inside the document can easily be divided into sections using <section> element.

<body>

  <section>
    <h3>Introduction</h3>
    <p>This is the introduction section of the document.</p>
  </section>

  <section>
    <h2>Contact</h2>
    <p>Email: contact@example.com</p>
  </section>

</body>

HTML <article> Element

The HTML <article> element specifies that the content is independent and self-contained. Additionally, it can be dispensed and reused independently. All <article> elements contain headings, paragraphs, related images, and other media content. Blogs, articles, forum posts, newspaper articles, etc. are examples of HTML <article> elements.

<body>

  <article>
    <h3>How to Learn HTML</h3>
    <p>Learning HTML is the first step to web development.</p>
    <p>Start with basic elements like headings and paragraph.</p>
  </article>

  <article>
    <h3>Benefits of Learning HTML</h3>
    <p>HTML allows you to create structured documents.</p>
    <img src="#" alt="Benefits of HTML">
  </article>

</body>

HTML <header> Element

This element defines the introductory part of a container. It could also include several navigational links. The <header> element has one or more than one of the following:

  • Heading elements ranging from <h1> to <h6>
  • Logo or icon
  • Author’s information

An HTML document can have several <header> elements but you can not incorporate them in <footer>, <address>, or any other <header> element. Use <hgroup> element to add more than one subheading in the main heading. 

<header>
    <p>Here you can find articles on web development.</p>
</header>

HTML <footer> Element

To define the footer of an HTML document or section, the HTML <footer> element is used. It contains the following information:

  • Authorship, copyright, and contact information
  • Sitemap of the webpage
  • Back to top links and 
  • Other related documents

Bonus Tip: You can add several <footer> elements in a document.

  <footer>
    <p>© 2024 Learning Axis. All rights reserved.</p>
    <p>Contact us: contact@learning-axis.com</p>
    <a href="#">Back to top</a>
  </footer>

HTML <nav> Elements

This element is used to define navigational links in an HTML document. Remember that not all navigational links must be specified by <nav> element. Only a certain set of links is added to perform a specific function.

  <nav>
    <a href="#">Home</a>
    <a href="#">Tutorials</a>
    <a href="#">About Us</a>
    <a href="#">Contact</a>
  </nav>

HTML <aside> Element

This element specifies that the content is not part of the main content. It is placed in a sidebar to indicate its aside and indirectly relate to the content.

<body>

  <article>
    <h3>Benefits of Learning Web Development</h3>
    <p>Web development opens up many opportunities.</p>
  </article>

  <aside>
    <h3>Did You Know?</h3>
    <p>HTML was first created in 1991 by Tim Berners-Lee.</p>
  </aside>

</body>

HTML <figure> Element

This HTML element tag defines self-contained content. It can be an image, illustration, photo, diagram, etc.

 <figure>
    <img src="#" alt="Grid Layout Diagram">
    <figcaption>A diagram showing a basic layout.</figcaption>
</figure>

HTML <figcaption> Element

The <figcaption> HTML element defines a caption for the figure. It can be placed at the top or the bottom of the <figure> element.

<figure>
    <figcaption> A beautiful sunset.</figcaption>
    <img src="#" alt="Sunset over mountains">
</figure>

HTML semantic elements are used to structure the content of a webpage. It improves accessibility and functionality by enhancing readability for end users as well as search engines.

Prev
Next
Scroll to Top