HTML Semantic

meaningful structure and organization of content on a webpage using HTML elements to convey the intended meaning of the information.
By using semantic elements, developers can create more accessible, SEO-friendly, and maintainable web pages.

<header> Element

Represents the introductory content for a section or page. Typically includes a logo, navigation menu, or heading.

Example

<header>
  <h1>Welcome to Our Website</h1>
  <nav>
    <a href="/">Home</a> | <a href="/about">About</a> | <a href="/contact">Contact</a>
  </nav>
</header>

<nav> Element

Represents a section of navigation links.

Example

<nav>
  <a href="/">Home</a> | <a href="/about">About</a> | <a href="/contact">Contact</a>
</nav>

<main> Element

Represents the main content of the document, excluding headers, footers, and sidebars.

Example

<main>
  <article>
    <h2>Article Title</h2>
    <p>Article content goes here.</p>
  </article>
</main>

<article> Element

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

Example

<article>
  <h2>Article Title</h2>
  <p>Article content goes here.</p>
</article>

<section> Element

Represents a thematic grouping of content within a document.

Example

<section>
  <h2>Section Heading</h2>
  <p>Section content goes here.</p>
</section>

<aside> Element

Represents content that is tangentially related to the content around it, like sidebars or callout boxes.

Example

<aside>
  <h3>Related Links</h3>
  <ul>
    <li><a href="/related1">Related Page 1</a></li>
    <li><a href="/related2">Related Page 2</a></li>
  </ul>
</aside>

<footer> Element

Represents the footer of a section or a page, typically containing metadata, copyright information, and contact details.

Example

<footer>
  <p>&copy; 2023 My Website. All rights reserved.</p>
  <p>Contact: [email protected]</p>
</footer>

<figure> and <figcaption> Elements

<figure> represents any content that is referenced from the main content, typically used for images, illustrations, diagrams, videos, etc.
The description or caption for the <figure> is provided using the <figcaption> element.

Example

<figure>
  <img src="example.jpg" alt="An example image">
  <figcaption>Example image description.</figcaption>
</figure>

<time> Element

Represents a specific time or a range of time.
It can be used for dates, times, or both together, with optional machine-readable datetime attributes.

Example

<p>The event will take place on <time datetime="2023-08-15 18:00">August 15th, 2023, at 6:00 PM</time>.</p>

<details> and <summary> Elements

<details> represents a disclosure widget from which the user can obtain additional information or controls.
The summary of what is contained within the <details> element is provided using the <summary> element.

Example

<details>
  <summary>Show more information</summary>
  <p>Additional details go here.</p>
</details>

Quick Recap

Topics Covered

Element

Description

Example

<header>

Represents the introductory content for a section or page

Run

<nav>

Represents a section of navigation links

Run

<main>

Represents the main content of the document, excluding headers, footers, and sidebars

Run

<article>

Represents a self-contained piece of content that can be distributed and reused independently

Run

<section>

Represents a thematic grouping of content within a document

Run

<aside>

Represents content that is tangentially related to the content around it

Run

<footer>

Represents the footer of a section or a page, typically containing metadata, copyright information, and contact details

Run

<figure> and <figcaption>

Represents content referenced from the main content, with a description or caption

Run

<time>

Represents a specific time or a range of time

Run

<details> and <summary>

Represents a disclosure widget with additional information or controls

Run


Practice With Examples in Compilers

The Concepts and codes you leart practice in Compilers till you are confident of doing on your own. A Various methods of examples, concepts, codes availble in our websites. Don't know where to start Down some code examples are given for this page topic use the code and compile or Try on own Now

Example 1

Example 1 Example 2 Example 3 Example 4 Example 5


Quiz


FEEDBACK

Rating


Message