Understand the structural differences between paired, void, and deprecated HTML tags to write valid, maintainable markup.
What it is
HTML elements are categorized by how they are written and their current status in the specification. Paired tags consist of an opening tag, content, and a closing tag (e.g., <p>...</p>). Void tags (also called self-closing or empty elements) represent standalone components that cannot contain child nodes (e.g., <br>, <img>). Deprecated tags are obsolete elements removed from modern standards; they should never be used in new code.
Why it matters
- Validation: Browsers and validators expect specific syntax for each type; incorrect usage causes rendering errors.
- Semantics: Using void tags correctly ensures accessibility tools interpret the document structure accurately.
- Maintenance: Avoiding deprecated tags prevents technical debt and compatibility issues with future browsers.
- Performance: Properly structured HTML reduces parsing overhead compared to malformed or legacy markup.
Syntax or steps
- Paired Tags: Write
<tagname>, insert content, then close with</tagname>. The slash indicates closure. - Void Tags: Write only the opening tag
<tagname>. Do not add a closing tag. In XHTML-style strictness, you may see<tagname />, but HTML5 allows just<tagname>. - Deprecated Tags: Identify these via documentation (e.g., MDN). Replace them with CSS or semantic equivalents immediately.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tag Types</title>
</head>
<body>
<!-- Paired Tag -->
<p>This paragraph has content.</p>
<!-- Void Tag -->
<hr>
<!-- Deprecated Tag (DO NOT USE) -->
<center>This text was centered using old HTML.</center>
</body>
</html>The <p> element wraps text and requires a closing tag. The <hr> element creates a horizontal rule and stands alone without children. The <center> tag is deprecated; modern practice uses CSS (text-align: center;) instead.
Common mistakes
- Closing void tags: Writing
<br></br>is invalid. Use<br>only. - Unclosed paired tags: Forgetting
</div>breaks layout nesting. Always match opening and closing tags. - Using deprecated formatting: Relying on
<font>or<big>ignores separation of concerns. Use CSS classes. - Confusing self-closing syntax: While
<img src="..." />works,<div />does not create a div. Only true void elements omit the closing tag.
When to use it
| Type | Use Case | Alternative/Note |
|---|---|---|
| Paired | Containers holding text or other elements. | Standard for most structural tags. |
| Void | Standalone widgets like images, inputs, line breaks. | No inner content allowed. |
| Deprecated | None. | Replace with CSS or semantic HTML5 tags. |
Practice
Guided Exercise: Convert this snippet to valid HTML5: <b>Bold</b> <br></br> <center>Hi</center>. Remove the extra closing break tag and replace <center> with a <div> styled via CSS.
Challenge: List three common void tags and one deprecated tag. Explain why <input> is void while <textarea> is paired.
Hint: <input> holds no visible text content inside its tags, whereas <textarea> contains user-editable text between its open and close tags.
Quick check
Question: Is <meta> a paired or void tag?
Answer: It is a void tag. It provides metadata about the document but contains no child elements.
Summary
Mastering the distinction between paired and void tags ensures syntactically correct HTML, while avoiding deprecated elements keeps your codebase modern and accessible. Always verify if an element can hold content before deciding whether to include a closing tag.