Home
Resources | Scripts | Themes | Tutorials | Web Hosting | Marketplaces | Affiliate Programs | Top Lists | More | Services | E-Commerce | Jobs

HTML Layout and Semantic Elements

By SamK
0
0 recommends
Category(s)
Web Design
Web Development
Topic(s)
HTML

HTML includes various layout and semantic elements that define the distinct sections of a webpage. 

Non-semantic elements like <div> and <span> tell nothing about their content, whereas semantic elements clearly state their meaning to both the browser and the developer.

These are:

  • <header>
  • <nav>
  • <section>
  • <article>
  • <aside>
  • <footer>
  • <details>
  • <summary>

<header>

 Defines a document or section header. For example, in case of <article>, you can define header as:

<article>
  <header>
    <h1>Article Title</h1>
    <p>By John Doe</p>
    <p>May 17, 2024</p>
  </header>
  <p>Article text goes here...</p>
</article>

<nav>

Specifies a navigation link set. For example:
 <nav>
  <a href="/">Home</a> |
  <a href="/about">About Us</a> |
  <a href="/contact">Contact Us</a> |
</nav>

<section>

Defines a document section. For example:
<section>
<h2>Heading One</h2>
<p>This is a paragraph one.</p>
</section>

<section>
<h2>Heading Two</h2>
<p>This is a paragraph two.</p>
</section>

<article>

Specifies an independent, self-contained content piece. For example:
<article>
  <header>
    <h1>Article Title</h1>
    <p>By John Doe</p>
    <p>May 17, 2024</p>
  </header>
  <p>Article text goes here...</p>
</article>

<aside>

Defines content distinct from the main content. For example:
<p>This is some content related to an animal.</p>

<aside>
<h4>Animal Name</h4>
<p>This is an intro text about that animal (like what it is, habitat, etc.)</p>
</aside>

 <footer>

Specifies a document or section footer. It typically contains information like copyright info, contact info, sitemap links, etc.
<footer>
  <p>Copyright © 2024</p>
  <p>Contact: <a href="mailto:info@example.com">info@example.com</a></p>
</footer>

<details>

Defines additional details that can be toggled open and closed. For example:
<details>
  <summary>The Cheetah</summary>
  <p>The cheetah is a large cat and the fastest land animal. It has a tawny to creamy white or pale buff fur that is marked with evenly spaced, solid black spots.</p>
</details>

<summary>

Provides a heading for the <details> element, as you can see in the example above.
Please check below options for the links to our previous or next tutorial.

Questions & Answers