Chapter 2: HTML - The Structure

HTML (HyperText Markup Language) is the undisputed skeleton of the internet. Every single website you visit, whether it's a simple blog or a massive web application like Netflix, is built on a foundation of HTML.

Many beginners rush through HTML because it looks "easy". They learn how to make text bold, how to create a link, and then immediately move on to CSS or JavaScript. This is a massive mistake. Writing bad HTML ruins your website's SEO and makes it completely inaccessible to disabled users.

Divitis: The Beginner's Disease

The most common mistake new developers make is using the <div> tag for absolutely everything. A div is a generic container. It means nothing to a web browser, and it means nothing to a search engine like Google.

<!-- Bad HTML (Divitis) -->
<div class="header">My Website</div>
<div class="nav">Home | About</div>
<div class="article">This is a post.</div>
<div class="footer">Copyright 2026</div>

Semantic HTML5: Writing Professional Code

In HTML5, we use Semantic Tags. These are tags that describe their meaning to both the browser and the developer. When Google's robots scan your website to decide where to rank you in search results, they look for these tags to understand what your website is actually about.

<!-- Professional Semantic HTML -->
<header>
  <h1>My Website</h1>
  <nav>
    <a href="/">Home</a>
  </nav>
</header>

<main>
  <article>
    <h2>Blog Post Title</h2>
    <p>This is a semantic paragraph.</p>
  </article>
</main>

<footer>Copyright 2026</footer>

Accessibility (a11y) Matters

Imagine navigating the web completely blind. Millions of users rely on Screen Readers—software that literally reads the HTML code out loud to them. If your website is just a giant pile of divs, the screen reader has no idea how to explain the page to the user.

• Alt Attributes: Never leave an img tag without an alt attribute. This text is read to blind users to describe the image.
• Buttons vs Links: If an element takes you to a new page, it is an <a> (anchor) tag. If it performs an action on the current page (like submitting a form), it is a <button>. Do not mix these up.
• Heading Hierarchy: You should only ever have ONE <h1> tag per page. Your subheadings must strictly follow logical order (H2, then H3, then H4). Do not skip heading levels just because you like the font size.