Skip to main content

HTML Syntax

In the Getting Started module, you learned what HTML is, how the web works, and you even built your very first page. Now it's time to slow down and learn the grammar rules that every single HTML document must follow.

Think of this the way you would think about learning any new language. Before you can write great sentences, you need to understand its alphabet, punctuation, and grammar. This module is exactly that for HTML: the small, precise rules that make your code valid, predictable, and readable, not just by browsers, but by other humans too.

Why syntax matters more than it seems

Two developers can know the same HTML tags, yet write code that looks completely different in quality. The difference almost always comes down to syntax discipline: consistent nesting, sensible attributes, correct encoding, and clean formatting. Master this module, and your code will already look professional.


What You Will Learn​

By the end of this module, you will be able to:

  • Tell the difference between a tag, an element, and an attribute.
  • Write and use attributes correctly, including quoting and common patterns.
  • Use global attributes like id, class, and style on any element.
  • Nest elements correctly and avoid overlapping tag mistakes.
  • Add comments to your code without affecting the rendered page.
  • Understand character encoding and why <meta charset="UTF-8"> matters.
  • Use HTML entities to safely display special characters like &, <, and ©.
  • Predict how browsers handle whitespace in your code.

Module Roadmap​

Follow the lessons in order for the smoothest learning curve. Each one builds on the last.

#LessonWhat you'll get
1TagsThe building blocks written in angle brackets, and how opening and closing tags work.
2ElementsHow tags combine with content to form a complete HTML element.
3AttributesAdding extra information and behavior to your tags.
4Global AttributesAttributes like id, class, and title that work on almost every element.
5NestingThe rules for placing elements correctly inside one another.
6CommentsLeaving notes in your code that browsers ignore.
7Character EncodingMaking sure every language and symbol displays correctly.
8EntitiesSafely displaying reserved and special characters.
9WhitespaceHow browsers collapse spaces, tabs, and line breaks.

A Quick Preview of HTML Syntax​

Here is a short snippet that uses almost every concept in this module at once. Don't worry about understanding all of it yet, just notice how the pieces fit together.

syntax-preview.html
<!-- This is a comment: it will not appear on the page -->
<section id="intro" class="highlight" title="Introduction section">
  <h2>Why &amp; How Syntax Matters</h2>
  <p>
    HTML uses <strong>tags</strong> to create
    <em>elements</em>, and <code>attributes</code>
    add extra details like <code>id</code> or <code>class</code>.
  </p>
</section>

By the end of this module, every part of that snippet, the comment, the id and class attributes, the nested <strong> inside <em>, and the &amp; entity, will make complete sense.

The Big Picture: How the Pieces Connect​

Every lesson in this module is a piece of this same puzzle. Learn them one at a time, and by the end, reading and writing correct HTML will feel completely natural.


How to Get the Most Out of This Module​

  • Type every example yourself. Syntax is muscle memory, and typing beats copy-pasting.
  • Break things on purpose. Remove a closing tag or a quotation mark and see what the browser does. Then fix it. Mistakes teach syntax rules faster than anything else.
  • Use your browser's DevTools. Revisit the Browser Developer Tools lesson to inspect real websites and see these syntax rules in action.
  • Keep a small "cheat sheet." As you learn each rule, jot it down. You will be surprised how quickly it becomes second nature.
Good syntax is invisible

When your HTML syntax is correct, nobody notices. When it's wrong, browsers misbehave, screen readers stumble, and other developers struggle to read your code. This module is about becoming the kind of developer whose code "just works."