HTML Basics
Mastering the standard structure and basic syntax rules of HTML documents is the first step to writing well-formed web pages.
HTML Document Structure
Every HTML document follows a fixed structural framework. The browser uses this framework to understand the components of a page. A complete HTML document contains the following hierarchical relationships:
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
<body>
Visible page content
</body>
</html>
Structure Breakdown
The various parts of an HTML document are organized in a tree structure called the DOM (Document Object Model). The browser converts each HTML tag into a "node", and nodes form parent-child and sibling relationships.
<!DOCTYPE html>— Document type declaration, telling the browser this is an HTML5 document. Must be written on the first line.<html>— Root element, the outermost container of the entire HTML document. All other tags go inside it.<head>— Head section, storing metadata. Content here is not displayed directly on the page, but controls encoding, title, style references, etc.<meta charset="UTF-8">— Declares the document's character encoding as UTF-8, ensuring special characters display correctly.<title>— Page title, shown in the browser tab and as the title in search engine results.<body>— Body section, where all visible content (text, images, tables, etc.) is placed.
Understanding this skeleton structure is critical — all tags you learn later will be placed inside either <head> or <body>.
<html> is the root node, and <head> and <body> are its child nodes (siblings to each other). A well-structured DOM not only makes code clearer but also helps with SEO and accessibility.
Basic Tag Syntax
The core building block of HTML is the "tag". Browsers identify the type and structure of content through tags. Tags are divided into two categories: paired tags and void tags.
Paired Tags
Most HTML tags come in pairs, wrapping content between an opening tag and a closing tag.
<p>This is a paragraph</p>
<h1>This is a level-1 heading</h1>
<strong>This is bold text</strong>
- Opening tag:
<tagname>— angle brackets wrapping the tag name - Closing tag:
</tagname>— a forward slash before the tag name - Content: the text or other tags between the opening and closing tags
Void Tags (Self-Closing Tags)
A few tags have no content and don't need a closing tag. They are called void tags.
<br> <!-- line break -->
<hr> <!-- horizontal rule -->
<img src="/assets/images/tutorials/html-example-photo.webp" alt="A sample photo"> <!-- image -->
In HTML5, the trailing slash on void tags is optional (e.g., both <br /> and <br> are valid), but it's recommended to keep it simple and omit the slash.
Tag Nesting Rules
Tags can be nested within each other, but must follow the "first opened, last closed" principle — the tag opened later must be closed first. Do not cross-nest.
<!-- Correct nesting -->
<p>This is a <strong>important text</strong> example</p>
<!-- Incorrect nesting (crossed) -->
<p>This is a <strong>important text</p> example</strong>
- Always use lowercase for tag names. Although
<P>will render in the browser, lowercase is the industry standard. - Nesting must strictly follow hierarchical order. Incorrect cross-nesting can cause the browser to parse incorrectly, resulting in a garbled page layout.
- Proper nesting is the foundation of a good DOM structure, making maintenance and styling easier.
<!-- -->, are not displayed on the page, and are mainly for developer notes.
❓ FAQ
<br> need a closing tag? When can I omit the slash?<br> has no "content of the break," and an image's path is specified via the src attribute, not between tags. In HTML5, the trailing slash is optional (<br> and <br/> are both valid), but keeping it simple without the slash is preferred. Remember: only void elements can omit the closing tag; regular elements like <p> and <div> must have one.📖 Summary
- HTML documents have a fixed skeleton:
DOCTYPE—html(root element) —head+body - Tags come in two types: paired tags (with opening and closing) and void tags (self-closing, no content)
- Nesting rule: "first opened, last closed", do not cross-nest
- Always use lowercase for tag names; cultivate good coding habits
📝 Exercises
- Write a complete page: Create an HTML file with the correct
!DOCTYPE,html,head,bodystructure. In the body, add oneh1heading, onepparagraph, onebrline break, and onehrdivider. - Nesting practice: Use
pandstrongtags to write a correctly nested sentence, then deliberately write an incorrectly cross-nested example. Observe how the browser renders the two versions differently.