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:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Page Title</title>
</head>
<body>
  Visible page content
</body>
</html>

▶ Try It Yourself

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>.

📌 The DOM Concept: The DOM is a programming interface provided by the browser that treats each tag in an HTML document as a "node". <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.

HTML

<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.

HTML

<br>  <!-- line break -->
<hr>  <!-- horizontal rule -->
<img src="photo.jpg" alt="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.

HTML

<!-- 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>

⚠️ Note

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.

📌 HTML Comments: For detailed usage of HTML comments (syntax, debugging techniques, common use cases, etc.), we will cover them in Chapter 8: HTML Comments. For now, just know that comments are wrapped in , are not displayed on the page, and are mainly for developer notes.

📖 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, body structure. In the body, add one h1 heading, one p paragraph, one br line break, and one hr divider.
Nesting practice: Use p and strong tags to write a correctly nested sentence, then deliberately write an incorrectly cross-nested example. Observe how the browser renders the two versions differently.

← Previous: HTML Introduction Next: HTML Elements →