HTML Syntax Fundamentals
Core Syntax Rules
- HTML elements are enclosed in angle brackets, such as
<div> - Most elements come in pairs with opening (
<tag>) and closing (</tag>) tags - Void elements like
<br>are self-closing and don't require end tags
Element Relationships
Elements can be nested (containing) or sibling (parallel) in structure
Document Structure Elements
Every HTML document requires foundational structural elements to organize content properly.
Development Essentials
Document Type Declaration
The <!DOCTYPE html> declaration specifies HTML5 and must precede all other elements.
Language Specification
<html lang="en">
Defines the document's primary language (e.g., 'en' for English, 'zh-CN' for Chinese).
Character Encoding
<meta charset="UTF-8">
UTF-8 encoding supports most global characters and should be declared in the <head> section.
Common HTML Elements
Semantic Headings
<h1>Primary Heading</h1>
<h2>Secondary Heading</h2>
Six heading levels (h1-h6) establish content hierarchy with decreasing importance.
Paragraphs and Line Breaks
<p>This is a paragraph that will wrap automatically.</p>
<p>Another paragraph <br> with line break</p>
<p> creates paragraph blocks with spacing, while <br> forces line breaks with out spacing.
Text Formatting
| Style | Preferred Tag | Alternative |
|---|---|---|
| Bold | <strong> |
<b> |
| Italic | <em> |
<i> |
| Strikethrough | <del> |
<s> |
| Underline | <ins> |
<u> |
Container Elements
<div>Block-level container</div>
<span>Inline container</span>
<div> creates block-level divisions, while <span> groups inline content.
Media Elements
Images
<img src="image.jpg" alt="Description" width="300" height="200">
Key attributes:
src: Image source (required)alt: Alternative textwidth/height: Dimensions
Path References
- Relative paths:
images/photo.jpg(same directory),../assets/icon.png(parent directory) - Absolute paths: Full URLs or system paths
Hyperlinks
<a href="https://example.com" target="_blank">External Link</a>
<a href="#section2">Anchor Link</a>
Link types include:
- External/internal references
- Document anchors (using
#id) - File downloads
- Placeholder links (
javascript:;)
Special Markup
Comments
<!-- This is a comment -->
Character Entities
| Entity | Character |
|---|---|
|
Non-breaking space |
< |
< |
> |
> |
© |
© |