HTML Layouts

<header>:

The <header> element is used to define a container for introductory or navigational content at the top of a webpage. It typically includes logos, headings, and other elements that provide context and navigation options for the page.

Example:

<header>
   <h1>Welcome to My Website</h1>
   <nav>
       <ul>
           <li><a href="/">Home</a></li>
           <li><a href="/about">About</a></li>
           <li><a href="/contact">Contact</a></li>
       </ul>
   </nav>
</header>

<nav>:

The <nav> element is used to define a section of a webpage that contains navigation links. It is typically used to group together a set of links that allow users to move between different pages or sections of a website.

Example:

<nav>
   <ul>
       <li><a href="/">Home</a></li>
       <li><a href="/about">About</a></li>
       <li><a href="/services">Services</a></li>
       <li><a href="/contact">Contact</a></li>
   </ul>
</nav>

<section>:

The <section> element is used to define a thematic grouping of content within a webpage. It helps to organize content into distinct sections or topics, making it easier for both users and search engines to understand the structure of the page.

Example:

<section>
   <h2>Latest News</h2>
   <article>
       <h3>Breaking News</h3>
       <p>... (article content) ...</p>
   </article>
   <article>
       <h3>Local News</h3>
       <p>... (article content) ...</p>
   </article>
</section>

<article>:

The <article> element is used to define a self-contained piece of content, such as a news article, blog post, or forum post. It should make sense on its own and can be independently distributed or syndicated.

Example:

<article>
   <h2>Top 10 Travel Destinations</h2>
   <p>... (article content) ...</p>
   <footer>Published on 2023-09-25</footer>
</article>

<aside>:

The <aside> element is used to define content that is tangentially related to the main content of a webpage. It is often used for sidebars, pull quotes, or advertisements.

Example:

<aside>
   <h3>Related Links</h3>
   <ul>
       <li><a href="/related-article-1">Article 1</a></li>
       <li><a href="/related-article-2">Article 2</a></li>
   </ul>
</aside>

<footer>:

The <footer> element is used to define the footer or the bottom section of a webpage. It typically contains information about the author, copyright, contact details, or links to related pages.

Example:

<footer>
   <p>&copy; 2023 My Website</p>
   <p>Contact: contact@mywebsite.com</p>
</footer>

<details>:

The <details> element is used to create interactive disclosure widgets that can be opened or closed to reveal additional information or options. It is often used in conjunction with the <summary> element.

Example:

<details>
   <summary>Click to Expand</summary>
   <p>Additional information or options go here.</p>
</details>

<summary>:

The <summary> element is used inside a <details> element to provide a label or heading for the disclosure widget. It serves as a clickable title that users can interact with to reveal or hide content.

Example:

<details>
   <summary>Click to Learn More</summary>
   <p>Additional information or details about a topic.</p>
</details>