Member Avatar for dlannetts
dlannetts 0 Junior Poster in Training

How do most people make the layouts for their sites now we have things like:

<header>
<nav>
<article>
<section>
<figure>
<summary>
<details>
<footer>

Just curious as i am wondering how most do it : 3

I quickly wrote this up:

<header>
<nav>
    <section> - Welcome
        <details> - who wrote it
            <summary> - text in section
    <figure> - Logo image
        <figcaption> - Caption for Logo
    <article> - Image or text from another site/person
<footer>
Edited by dlannetts because: n/a
  • 1 Contributor
  • 0 Replies
  • 112 Views

Dani AI

Generated

Nice start — using HTML5 semantic tags is the right idea. Treat those tags as labels for meaning and accessibility, not as a CSS layout system. Keep one main for the page, use article for independent pieces, section only when it has a heading, and aside for tangential content. The HTML5 outline algorithm is unreliable in practice, so keep an explicit heading hierarchy rather than depending on sectioning to build the outline (MDN: Using sections and outlines).

For layout, rely on CSS. Use CSS Grid for the overall page and Flexbox for smaller component layouts. Example pattern (skeleton only — adapt to your content):

<body>
  <header>Brand + top nav</header>
  <nav aria-label="Primary">...</nav>
  <main>
    <article>Post content</article>
    <aside>Sidebar / widgets</aside>
  </main>
  <footer>Copyright / links</footer>
</body>
body {
  display: grid;
  grid-template-columns: 1fr 300px;
  grid-template-areas:
    "header header"
    "nav nav"
    "main aside"
    "footer footer";
  gap: 1rem;
}
@media (max-width:700px) {
  body {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "nav"
      "main"
      "aside"
      "footer";
  }
}

Accessibility and progressive enhancement: semantic elements are already ARIA landmarks, but add aria-label when you have multiple nav regions. Use native details/summary for simple disclosure UI, but test styling and keyboard behavior across browsers (MDN: details; see landmark guidance at ). For learning Grid/Flexbox, MDN has solid guides: CSS Grid Layout and Flexbox basics.

Quick checklist: use headings inside sections, keep main unique, test with a screen reader and narrow viewports, and favor semantic tags for meaning while letting CSS handle positioning and responsiveness.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.