HTML Document Structure and Syntax
1. HTML5 Document Structure and Boilerplate (<!DOCTYPE html>)
| Element | Purpose | Required | Notes |
|---|---|---|---|
| <!DOCTYPE html> | Declares document as HTML5 | Yes | Must be first line, triggers standards mode |
| <html> | Root element containing all content | Yes | Should include lang attribute |
| <head> | Contains metadata and document info | Yes | Not displayed in browser viewport |
| <meta charset> | Character encoding declaration | Yes | Should be within first 1024 bytes |
| <title> | Page title shown in browser tab | Yes | Important for SEO and accessibility |
| <body> | Contains visible page content | Yes | Only one per document |
Example: Complete HTML5 boilerplate structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Page description for SEO">
<title>Page Title</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Visible content goes here -->
<script src="script.js"></script>
</body>
</html>2. Doctype Declarations and Legacy Support
| Version | Doctype Declaration | Usage |
|---|---|---|
| HTML5 | <!DOCTYPE html> |
All modern browsers - Recommended for all new projects |
| HTML 4.01 Strict |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
DEPRECATED Legacy only |
| HTML 4.01 Transitional | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> |
DEPRECATED Allowed deprecated elements |
| XHTML 1.0 Strict |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
DEPRECATED XML-based HTML |
| Quirks Mode | No doctype or invalid doctype | Never use - Triggers non-standard rendering |
Note: HTML5 doctype is case-insensitive and works in all
browsers including IE6+. Always use it for new projects.
3. Character Encoding (UTF-8) and Meta Setup
| Meta Tag | Purpose | Example | Priority |
|---|---|---|---|
| charset | Declares character encoding | <meta charset="UTF-8"> |
Critical - First in <head> |
| viewport | Controls mobile rendering and zoom | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
Essential for responsive design |
| description | Page description for search engines | <meta name="description" content="155-160 chars"> |
Important for SEO |
| http-equiv | HTTP header equivalents | <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
Legacy IE compatibility |
| author | Document author information | <meta name="author" content="Name"> |
Optional metadata |
| keywords | Search keywords | <meta name="keywords" content="word1, word2"> |
DEPRECATED Ignored by major search engines |
Example: Complete meta setup for modern websites
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Concise page description under 160 characters">
<meta name="author" content="Your Name">
<meta name="robots" content="index, follow">
<title>Page Title - Site Name</title>
</head>4. Element Syntax and Nesting Rules
| Rule | Description | Valid Example | Invalid Example |
|---|---|---|---|
| Opening/Closing Tags | Most elements require both tags | <p>Text</p> |
<p>Text (missing closing) |
| Tag Names | Case-insensitive, lowercase preferred | <div>, <DIV> |
Both valid, <div> recommended |
| Attribute Quotes | Optional but recommended | <div class="name"> |
<div class=name> (works but avoid) |
| Attribute Values | Can use single or double quotes | class="text", class='text' |
Both valid, be consistent |
| Boolean Attributes | Presence = true, value optional | <input disabled>, <input disabled="disabled"> |
Both valid forms |
| Proper Nesting | Elements must close in reverse order | <div><p>Text</p></div> |
<div><p>Text</div></p> |
Example: Correct element nesting patterns
<!-- Valid nesting -->
<div class="container">
<p>Paragraph with <strong>bold</strong> and <em>italic</em> text.</p>
<ul>
<li>List item with <a href="#">link</a></li>
</ul>
</div>
<!-- Invalid: Block element inside inline -->
<!-- WRONG: <span><div>Text</div></span> -->
<!-- Invalid: Improper closing order -->
<!-- WRONG: <div><p>Text</div></p> -->5. Void Elements (<img>, <br>, <hr>) and Self-closing Tags
| Element | HTML5 Syntax | XHTML Syntax | Purpose |
|---|---|---|---|
| <br> | <br> |
<br /> |
Line break |
| <hr> | <hr> |
<hr /> |
Thematic break / horizontal rule |
| <img> | <img src="url" alt="text"> |
<img src="url" alt="text" /> |
Embedded image |
| <input> | <input type="text"> |
<input type="text" /> |
Form input control |
| <link> | <link rel="stylesheet" href="url"> |
<link rel="stylesheet" href="url" /> |
External resource link |
| <meta> | <meta charset="UTF-8"> |
<meta charset="UTF-8" /> |
Metadata |
| <area> | <area shape="rect" coords="x,y"> |
<area shape="rect" coords="x,y" /> |
Image map area |
| <base> | <base href="url"> |
<base href="url" /> |
Base URL for relative links |
| <col> | <col span="2"> |
<col span="2" /> |
Table column definition |
| <embed> | <embed src="url"> |
<embed src="url" /> |
External content embed |
| <param> | <param name="x" value="y"> |
<param name="x" value="y" /> |
Object parameters |
| <source> | <source src="url" type="mime"> |
<source src="url" type="mime" /> |
Media source |
| <track> | <track src="url" kind="subtitles"> |
<track src="url" kind="subtitles" /> |
Media text tracks |
| <wbr> | <wbr> |
<wbr /> |
Word break opportunity |
Note: In HTML5, the trailing slash in void elements is optional.
Both
<br> and <br /> are valid. Use consistent style throughout your
document.
Example: Void elements in practical use
<!-- Line breaks -->
<p>First line<br>Second line<br>Third line</p>
<!-- Horizontal rule -->
<section>Content</section>
<hr>
<section>More content</section>
<!-- Image with required alt attribute -->
<img src="photo.jpg" alt="Descriptive text" width="300" height="200">
<!-- Form inputs -->
<form>
<input type="text" placeholder="Name">
<input type="email" placeholder="Email">
<input type="submit" value="Send">
</form>
<!-- Multiple media sources -->
<video controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<track src="subtitles.vtt" kind="subtitles" srclang="en">
</video>6. HTML Comments (<!-- -->) and Conditional Comments
| Type | Syntax | Use Case | Browser Support |
|---|---|---|---|
| Standard Comment | <!-- Comment text --> |
General documentation and notes | All browsers |
| Multi-line Comment | <!-- Line 1 |
Longer explanations or disabled code blocks | All browsers |
| Conditional Comment (IE) | <!--[if IE]>...<![endif]--> |
IE-specific code (legacy) | DEPRECATED IE only |
| Conditional IE Version | <!--[if lt IE 9]>...<![endif]--> |
Target specific IE versions | DEPRECATED IE only |
| Downlevel-hidden | <!--[if !IE]><!-->...<!--<![endif]--> |
Hide from IE, show to others | DEPRECATED |
Note: Comment Best Practices
- Use for documentation and code organization
- Avoid sensitive information (visible in source)
- Keep comments concise and relevant
- Remove debug comments in production
- Use for temporarily disabling code
Example: Various comment types and uses
<!-- Single line comment for documentation -->
<!--
Multi-line comment for longer explanations
or to temporarily disable code blocks
during development and debugging
-->
<!-- Section: Main Navigation -->
<nav>...</nav>
<!-- End Section: Main Navigation -->
<!-- TODO: Add responsive images here -->
<!-- Legacy IE conditional comments (no longer needed) -->
<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<script src="respond.js"></script>
<![endif]-->
Warning: HTML comments are visible in page source. Never include
passwords, API keys, or sensitive information. Comments increase file size and are downloaded by browsers.
Section 1 Key Takeaways
- Always start with
<!DOCTYPE html>for HTML5 documents - Include
<meta charset="UTF-8">as first element in <head> - Use viewport meta tag for responsive design:
width=device-width, initial-scale=1.0 - Follow proper nesting rules: close elements in reverse order of opening
- Void elements don't require closing tags in HTML5
- Comments are visible in source code - avoid sensitive information
- Conditional comments are deprecated; use feature detection instead