HTML & CSS Masterclass Tutorial

Comprehensive guide to modern HTML and CSS development.

Document Structure

Semantic Document Structure

In the past, developers used <div> for everything. HTML5 introduced semantic tags that describe their meaning to both the browser and the developer.

Key Semantic Elements:

<header>: Introductory content, usually containing the logo and navigation.
<nav>: Navigation links.
<main>: The primary content of the document.
<section>: A thematic grouping of content.
<article>: A self-contained, independent piece of content (like a blog post).
<aside>: Sidebar content.
<footer>: The bottom of the page, containing copyrights and links.

Using semantic HTML is crucial for SEO (Search Engine Optimization) and Accessibility for screen readers.

Try It Yourself

Edit the code below and click Run to see the result live.

Source Code

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: Arial, sans-serif; margin: 0; padding: 10px; background: #eee; }
    header, nav, main, section, aside, footer { padding: 15px; margin-bottom: 10px; border-radius: 5px; color: white; text-align: center; font-weight: bold; }
    
    header { background: #34495e; }
    nav { background: #2980b9; }
    
    .container { display: flex; gap: 10px; }
    main { background: #27ae60; flex: 3; }
    aside { background: #e67e22; flex: 1; }
    
    section { background: #2ecc71; border: 2px dashed rgba(255,255,255,0.5); margin: 10px 0;}
    footer { background: #8e44ad; clear: both; }
  </style>
</head>
<body>

<header>&lt;header&gt; Logo & Title</header>
  
  <nav>&lt;nav&gt; Menu Links</nav>
  
  <div class="container">
    <main>
      &lt;main&gt; Main Content Area
      <section>&lt;section&gt; Article 1</section>
      <section>&lt;section&gt; Article 2</section>
    </main>
    
    <aside>&lt;aside&gt; Sidebar</aside>
  </div>
  
  <footer>&lt;footer&gt; Copyright 2026</footer>

</body>
</html>

Result

Topics