HTML 17 💻 Layout elements

<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>&copy; 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

---

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!