⬅ Previous Next ➡

20. HTML Layout & Structure

HTML Layout & Structure
  • HTML Layout & Structure: A layout defines the visual arrangement of a webpage. Modern HTML5 uses semantic elements to divide the page into meaningful sections, which helps search engines and screen readers understand the content.
  • Core Layout Elements:
    • <header>: Usually located at the top of the page; contains the logo, site title, and sometimes the navigation.
    • <nav>: The section dedicated to navigation links (menus).
    • <main>: The central area where the unique, primary content of the page lives.
    • <aside>: A sidebar used for secondary information like advertisements, related links, or author bios.
    • <footer>: The bottom section containing copyright info, contact details, and site maps.
  • Structuring with Sections:
    • <section>: Groups related content together (e.g., "Services" or "Contact Us").
    • <article>: A self-contained piece of content that makes sense on its own (e.g., a blog post or news card).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Basic Website Layout (HTML Only)</title>
</head>

<body>

<!-- Header Section -->
<header>
  <h1>SSWebTechIO - My Professional Website</h1>
  <p>Simple HTML Layout Example (Header, Nav, Main, Sidebar, Footer)</p>
</header>

<!-- Navigation Bar -->
<nav>
  <a href="https://sswebtechio.com">Home</a> |
  <a href="#about">About</a> |
  <a href="#services">Services</a> |
  <a href="#contact">Contact</a> |
  <a href="https://quitexams.com" target="_blank">QuiteXams</a>
</nav>

<!-- Main Content Area + Sidebar Area -->
<div class="container">

  <!-- Main Content -->
  <main>

    <section id="about">
      <h2>About Us</h2>
      <p>This is the primary content area where your main information is displayed.</p>
      <p>We build websites, learning pages, and student projects using HTML, CSS, JavaScript, and PHP.</p>
    </section>

    <section id="services">
      <h2>Our Services</h2>

      <article>
        <h3>Web Design</h3>
        <p>We create responsive web pages with clean layout and simple structure.</p>
      </article>

      <article>
        <h3>Online Practice</h3>
        <p>Practice MCQs and exams using QuiteXams and improve your skills.</p>
      </article>

      <article>
        <h3>Typing Speed Test</h3>
        <p>Try typing practice page for improving your typing speed.</p>
        <p>Link: <a href="https://www.sswebtechio.com/typing/typing.php" target="_blank">Start Typing Test</a></p>
      </article>

    </section>

    <section id="contact">
      <h2>Contact</h2>
      <p>Email: <a href="mailto:support@sswebtechio.com">support@sswebtechio.com</a></p>
      <p>Website: <a href="https://sswebtechio.com" target="_blank">sswebtechio.com</a></p>
    </section>

  </main>

  <!-- Sidebar Section -->
  <aside>
    <h2>Sidebar</h2>
    <p>Useful links, ads, or quick navigation goes here.</p>

    <h3>Quick Links</h3>
    <ul>
      <li><a href="https://sswebtechio.com">SSWebTechIO Home</a></li>
      <li><a href="https://quitexams.com" target="_blank">QuiteXams Practice</a></li>
      <li><a href="#about">About Section</a></li>
      <li><a href="#services">Services Section</a></li>
      <li><a href="#contact">Contact Section</a></li>
    </ul>
  </aside>

</div>

<!-- Footer Section -->
<footer>
  <p>&copy; 2026 SSWebTechIO. All rights reserved.</p>
</footer>

</body>
</html>
⬅ Previous Next ➡