HTML Syntax Basics
Introduction
HTML syntax is small, but the details matter. This chapter explains tags, elements, attributes, nesting, empty elements, comments, and common formatting conventions. Once you understand these rules, every later chapter becomes easier to read and write.
Prerequisites
- You have created your first page in Your first HTML page
- You can open an
.htmlfile in a browser - You can edit and save files in your editor
Tags and Elements
A tag is the markup written with angle brackets:
<p>An element is the full structure: opening tag, content, and closing tag.
<p>This is a paragraph.</p>| Part | Example |
|---|---|
| Opening tag | <p> |
| Content | This is a paragraph. |
| Closing tag | </p> |
| Full element | <p>This is a paragraph.</p> |
People often say “HTML tag” casually when they mean “element.” That is fine in conversation, but the difference helps when you debug structure.
Opening and Closing Tags
Most HTML elements have an opening tag and a closing tag:
<h1>Welcome</h1>
<p>Learn HTML step by step.</p>The closing tag repeats the tag name with a slash:
</p>Some tags are optional in the HTML parser, but beginners should write explicit closing tags whenever an element supports one. It keeps the document readable.
Empty Elements
Some elements do not wrap text or child elements. They are called empty elements.
Common examples:
<img src="logo.png" alt="Logo">
<br>
<hr>
<meta charset="UTF-8">
<input type="email" name="email">In HTML, you do not need XML-style slashes:
<!-- Valid HTML, but unnecessary -->
<br />Prefer the simpler HTML style:
<br>Tip
Void Elements
Empty elements are also called void elements in the HTML standard. They cannot contain child nodes.
Attributes
Attributes add extra information to an element.
<a href="https://developer.mozilla.org">MDN</a>Here:
ais the element namehrefis the attribute namehttps://developer.mozilla.orgis the attribute value
Multiple attributes are separated by spaces:
<img src="cat.jpg" alt="A sleeping cat" width="400" height="300">Common attributes:
| Attribute | Commonly used on | Purpose |
|---|---|---|
id | Many elements | Unique identifier on the page |
class | Many elements | Group elements for CSS or JS |
href | <a>, <link> | URL target |
src | <img>, <script> | Resource source |
alt | <img> | Alternative text |
title | Many elements | Extra advisory text |
Quoting Attribute Values
Use double quotes for attribute values:
<input type="text" name="username">HTML sometimes allows unquoted values, but quoted values are clearer and safer:
<!-- Avoid this style -->
<input type=text name=username>Quotes become required when the value contains spaces:
<img src="team-photo.jpg" alt="Our engineering team">Boolean Attributes
Some attributes are true simply because they are present:
<input type="checkbox" checked>
<button disabled>Submit</button>
<script defer src="app.js"></script>You may see this style:
<input type="checkbox" checked="checked">It works, but modern HTML usually uses the shorter form.
Nesting Rules
HTML elements can contain other elements:
<article>
<h1>HTML Basics</h1>
<p>HTML describes document structure.</p>
</article>Tags must close in the correct order:
<!-- Correct -->
<p>This is <strong>very important</strong>.</p>Avoid overlapping elements:
<!-- Incorrect -->
<p>This is <strong>very important.</p></strong>Think of elements as boxes. A box opened inside another box must close before the outer box closes.
Parent, Child, and Sibling
HTML structure is often described like a family tree:
<main>
<section>
<h1>Products</h1>
<p>Browse our catalog.</p>
</section>
</main>Relationships:
<main>is the parent of<section><section>is the child of<main><h1>and<p>are siblings<h1>is a descendant of<main>
These terms matter later when you learn CSS selectors and DOM traversal in JavaScript.
Case Convention
HTML tag names are case-insensitive in normal HTML documents:
<BODY>works, but modern convention is lowercase:
<body>Use lowercase for:
- tag names
- attribute names
- file names in links and image paths
Lowercase keeps your code consistent and avoids surprises on case-sensitive servers.
Comments
HTML comments use this syntax:
<!-- This is a comment. It does not appear on the page. -->Good comments explain structure:
<!-- Main marketing hero -->
<section>
<h1>Build Better Pages</h1>
<p>Start with semantic HTML.</p>
</section>Avoid comments that repeat obvious code:
<!-- Paragraph -->
<p>Hello.</p>Warning
Comments Are Public
HTML comments are sent to the browser. Do not put passwords, private API keys, internal URLs, or secret notes in comments.
Whitespace and Formatting
Browsers collapse most whitespace in normal text:
<p>Hello HTML.</p>renders like:
Hello HTML.Use indentation for humans:
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about.html">About</a></li>
</ul>
</nav>Readable markup is easier to maintain than one-line markup.
Common Syntax Mistakes
Missing closing tag
<!-- Incorrect -->
<strong>Important<!-- Correct -->
<strong>Important</strong>Attribute typo
<!-- Incorrect: scr is not src -->
<img scr="photo.jpg" alt="Photo"><!-- Correct -->
<img src="photo.jpg" alt="Photo">Duplicate id
<!-- Incorrect -->
<h2 id="intro">Intro</h2>
<p id="intro">Welcome.</p>id must be unique in a page. Use class when multiple elements share a purpose.
Mini Exercise
Create a file named syntax-practice.html and write:
- One heading
- Two paragraphs
- One image with
srcandalt - One link with
href - One comment that explains a section
Then open DevTools and confirm the DOM tree matches your nesting.
FAQ
Are HTML tags case-sensitive?
In normal HTML documents, no. But lowercase is the standard style and avoids confusion with SVG, XML, and case-sensitive file paths.
Do I need a slash in <br />?
No. <br> is the normal HTML style. The slash comes from XHTML habits.
Can an element have both id and class?
Yes. id identifies one unique element; class groups elements. Use id sparingly.
Why does the browser still render broken HTML?
Browsers are forgiving because the web contains decades of imperfect pages. You should still write valid HTML because predictable structure is easier to style, script, test, and make accessible.
What comes next?
HTML document structure — the full document skeleton, head metadata, body, charset, viewport, title, favicon, CSS, and scripts.