Mini Project: Semantic Page

All HTML topics

∙ Chapter 47

Mini Project: Semantic Page

Build a simple page using semantic elements used in real sites: header, nav, main, article, aside, and footer.

mini-project.php

📝 Edit Code

<style>  body{font-family:sans-serif;padding:16px;max-width:860px;margin:0 auto}  header,footer,aside,article{padding:12px 14px;border:1px solid #ddd;border-radius:14px}  header{display:flex;justify-content:space-between;align-items:center;gap:10px}  nav a{margin-right:10px}  main{display:grid;grid-template-columns:2fr 1fr;gap:12px;margin-top:12px}  .badge{background:#0f1322;color:#e8eaf6;padding:4px 10px;border-radius:999px;font-size:12px}</style><header>  <div>    <h1 style="margin:0">Mana Blog</h1>    <p style="margin:4px 0 0;color:#555">Beginner-friendly HTML project</p>  </div>  <nav aria-label="Main navigation">    <a href="#" onclick="return false">Home</a>    <a href="#" onclick="return false">Articles</a>    <a href="#" onclick="return false">Contact</a>  </nav></header><main>  <article>    <div class="badge">Article</div>    <h2>Why Semantic HTML Matters</h2>    <p>Semantic tags help accessibility, SEO, and maintainability.</p>    <figure>      <img src="https://picsum.photos/780/320" alt="Random cover" style="width:100%;height:auto;border-radius:12px">      <figcaption style="color:#555;margin-top:6px">A figure with caption.</figcaption>    </figure>  </article>  <aside>    <div class="badge">Aside</div>    <h3>Quick tips</h3>    <ul>      <li>Use one <code>h1</code> per page</li>      <li>Use <code>alt</code> on images</li>      <li>Use labels for inputs</li>    </ul>  </aside></main><footer style="margin-top:12px">  <p style="margin:0">&copy; 2026 Mana Coding</p></footer>

👁 Live Preview

💡 This structure is easy to style with CSS later.

PreviousHTML Landing

HTML Tutorial

NextAll Topics →