By the end of this lesson, you will be able to write valid HTML by correctly using tags, attributes, nesting rules, and void elements.
What it is
HTML (HyperText Markup Language) is the standard language for creating web pages. It uses a system of elements defined by <tags> to structure content. An element typically consists of an opening tag, content, and a closing tag. Some elements, known as void elements, do not have content or closing tags. Attributes provide additional information about an element within its opening tag.
Why it matters
- Structure: Proper syntax ensures browsers render content in the intended order and hierarchy.
- Accessibility: Correctly nested and labeled elements help screen readers interpret page content accurately.
- Validation: Browsers are forgiving, but strict adherence to syntax prevents unexpected layout bugs and improves maintainability.
- Semantics: Using the right tags conveys meaning to search engines and other tools, improving SEO and interoperability.
Syntax or steps
- Tags: Most elements require an opening tag (
<p>) and a closing tag (</p>). The slash indicates closure. - Attributes: Placed inside the opening tag, formatted as
name="value". Values should always be quoted. - Nesting: Elements must close in the reverse order they opened. If you open
<div>then<p>, you must close</p>before</div>. - Void Elements: Elements like
<br>,<img>, and<input>cannot contain children and do not need closing tags.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Basic Syntax</title>
</head>
<body>
<h1>Welcome</h1>
<p>This is a paragraph with a <strong>bold</strong> word.</p>
<img src="logo.png" alt="Company Logo">
<br>
<a href="https://example.com">Visit Example</a>
</body>
</html>Breakdown:
<!DOCTYPE html>: Declares the document type as HTML5.<html lang="en">: Root element with alangattribute specifying English.<meta charset="UTF-8">: A void element defining character encoding.<p>...</p>: A container element holding text and a nested<strong>element.<img ...>: A void element displaying an image; requiressrcandaltattributes.<br>: A void element inserting a line break.
Common mistakes
- Mismatched Tags: Forgetting to close a tag or closing it out of order (e.g.,
<b><i>text</b></i>). Fix: Ensure every opening tag has a corresponding closing tag in reverse order. - Unquoted Attributes: Writing
class=maininstead ofclass="main". Fix: Always wrap attribute values in double quotes. - Closing Void Elements: Writing
<br></br>or<img></img>. Fix: Remove closing tags for void elements; they are self-contained. - Invalid Nesting: Placing block-level elements inside inline elements incorrectly (e.g.,
<p><div>...</div></p>). Fix: Follow specific content models for each element.
When to use it
Use standard HTML syntax for all structural markup. Compare common approaches below:
| Approach | Best For | Limitation |
|---|---|---|
| Standard HTML | General web development, accessibility, SEO. | Requires manual attention to nesting rules. |
| XHTML | Legacy systems requiring XML parsing. | Stricter syntax (all tags closed/lowercase); largely obsolete. |
| Markdown | Quick documentation, simple blogs. | Limited control over complex layouts and attributes. |
Practice
Guided Exercise: Create a list of three items where one item contains a link. Use <ul>, <li>, and <a>.
Challenge: Add an image next to the first list item. Remember that <img> is a void element.
Hint: Your structure should look like <li><img ...> Text <a ...>Link</a></li>.
Quick check
Question: Why does the <hr> element not have a closing tag?
Answer: Because <hr> is a void element. It represents a thematic break and cannot contain child nodes or text content.
Summary
Valid HTML relies on correct tag pairing, proper attribute quoting, and strict nesting rules. Recognizing which elements are void helps prevent common syntax errors and ensures your code renders consistently across browsers.