Concepts 🚀 Project 🧮 Labs
📚 Learn / Frontend / HTML structure & semantic tags

HTML structure & semantic tags

<nav>, <main>, <section>, <article> — describe what content IS, not just how it looks.

Code example

<nav class='navbar'>…</nav>
<main class='container'>
  <section class='card'>
    <article class='model-card'>…</article>
  </section>
</main>
<footer>…</footer>

How it works

Semantic HTML tags describe the role of the content: <nav> for navigation, <main> for the primary content, <article> for a self-contained piece, <section> for a thematic group, <footer> for page-level metadata. Using them helps screen readers, search engines, and developer tools understand the page. OpenBenchML's base.html uses <nav> for the top bar, <main> for the page content, and <footer> for the bottom links.

🔍 Where this is used in OpenBenchML templates/base.html — the page skeleton uses semantic tags throughout.