<header>
<h1>My Website</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
</header>
<section>
<article>
<h2>My Latest Blog Post</h2>
<p>This is my latest blog post, featuring some great tips and tricks for web development.</p>
</article>
<aside>
<h3>Related Links</h3>
<ul>
<li><a href="#">Web Development Tutorials</a></li>
<li><a href="#">Design Inspiration</a></li>
</ul>
</aside>
<footer>
<p>© My Website, 2023</p>
</footer>
</section>
<details>
<summary>FAQ</summary>
<p>Here are some frequently asked questions:</p>
<ul>
<li><a href="#">How do I get started?</a></li>
<li><a href="#">What are the best tools?</a></li>
</ul>
<footer>
<p>This is the outside footer</p>
</footer>
</details>
- All those elements are semantic elements. But there are more semantic elements than those.
- Semantic elements are elements with a meaning.
- Non-semantic elements are div and span
- header element defines a section that contains information about the page
- nav element defines a section that contains the navigation links to other pages or sections
- section element defines a generic section
- It can contain any kind of content(articles, images, paragrapghs etc)
- article element defines a self-contained piece of content
- It is often used inside a section element to indicate that the content is standalone
- aside element defines a section that contains supplementary information.
- It can also contain a sidebar with related links or pages
- footer element defines the footer section of the page
- It typically contains information about copyright status and other various information or links
- details element defines a section with additional information
- This section can be toggled to display additional information
- It always contains a summary element
- summary defines a summary or heading for the details elements.
- Typically by clicking it expands the details to see the full content