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.
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.
<section> Element
Represents a thematic grouping of content within a document.
<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>© 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.
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.
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.
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
<article>
Represents a self-contained piece of content that can be distributed and reused independently
<footer>
Represents the footer of a section or a page, typically containing metadata, copyright information, and contact details
<figure> and <figcaption>
Represents content referenced from the main content, with a description or caption
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