HTML Introduction

HTML stands for HyperText Markup Language. It is the standard language used to create the structure and content of every webpage on the internet — every heading, paragraph, image, link, and button you have ever clicked starts life as HTML. HTML itself is not a programming language; it has no logic, loops, or calculations. Instead, it is a markup language: a system of tags that describes what each piece of content is (a heading, a list, a link) so that a web browser knows how to display it and how it fits into the structure of the page.

Understanding HTML is the foundation for everything else in web development. CSS controls how a page looks, and JavaScript controls how a page behaves, but neither can do anything without HTML providing the underlying content and structure first. This lesson covers what HTML is, how a browser actually processes it, the basic syntax rules, and the mistakes beginners commonly make.

Overview: How HTML Works

An HTML document is a plain text file, usually saved with a .html extension, that contains your content wrapped in elements. An element is made up of a start tag, some content, and an end tag, like <p>some text</p>. The tag names (p, h1, a, and so on) tell the browser the semantic meaning of the content inside them — a <p> is a paragraph, an <h1> is a top-level heading, an <a> is a hyperlink.

This distinction between semantics (what content means) and presentation (how it looks) is central to modern HTML. In the early days of the web, people used HTML tags to control appearance directly (for example, using a table element purely to lay out columns, or a heading tag purely because it made text look bold and big). Modern best practice separates concerns: HTML describes structure and meaning, while CSS (a separate language, covered in its own course) is responsible for colors, spacing, fonts, and layout. Using the right element for the right job also matters enormously for accessibility, since screen readers rely on semantic tags to describe a page to users who cannot see it, and for search engines, which use heading structure to understand a page’s content.

When a browser loads an HTML file, it does not simply display the text as-is. It parses the file character by character, recognizes the tags, and builds an internal, tree-shaped data structure in memory called the DOM (Document Object Model). Every element becomes a “node” in this tree, nested inside its parent element exactly as it was nested in the source code. The browser then reads this DOM tree and renders it visually on screen — this is why viewing a webpage and viewing its “page source” can look so different: the source is the raw text instructions, while the rendered page is the browser’s visual interpretation of the DOM built from those instructions.

Basic Syntax

Every HTML element follows a consistent pattern. Here is the general form:

<tagname attribute="value">content</tagname>
  • Start tag — the tag name wrapped in angle brackets, e.g. <p>, which marks where the element begins.
  • Attributes — optional extra information placed inside the start tag, written as name="value" pairs (for example href="https://example.com" on a link). Attribute values should be wrapped in quotation marks.
  • Content — the text or nested elements that sit between the start and end tags.
  • End tag — the tag name preceded by a forward slash, e.g. </p>, which marks where the element finishes.
  • Void elements — a small number of elements, such as line breaks, have no content and therefore no separate end tag; they are self-contained, like <br>.

Every full HTML document also needs a small set of required, non-visible scaffolding elements: <!DOCTYPE html> tells the browser to render the page using the modern HTML5 standard rather than an outdated “quirks mode”; <html> is the root element that wraps everything else; <head> holds metadata about the page (like its title and character encoding) that is not displayed directly on the page; and <body> holds all the visible content.

Examples

Example 1: The Minimal HTML Document

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First Page</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is my first HTML page.</p>
</body>
</html>

Result: The browser tab displays the title “My First Page”. The visible page shows a large bold heading reading “Hello, World!” followed by a paragraph of regular-sized text below it.

This is the smallest complete HTML document you should ever write. Every required scaffolding element is present: the doctype, the html root with a lang attribute (which tells browsers and screen readers the page’s language), a head containing character encoding and title, and a body with two simple content elements.

Example 2: Adding a List and a Link

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>About Me</title>
</head>
<body>
  <h1>About Me</h1>
  <p>I am learning HTML, the language used to build web pages.</p>
  <h2>My Favorite Hobbies</h2>
  <ul>
    <li>Reading</li>
    <li>Hiking</li>
    <li>Coding</li>
  </ul>
  <p>Visit <a href="https://www.example.com">this site</a> to learn more.</p>
</body>
</html>

Result: The page shows a heading “About Me”, an introductory paragraph, a smaller subheading “My Favorite Hobbies”, a bulleted list with three items (Reading, Hiking, Coding), and a final paragraph containing the clickable, underlined blue link text “this site”.

Notice how <h1> and <h2> create a hierarchy: the page title is the single most important heading, and the hobbies section is a subordinate heading beneath it. The <a> element’s href attribute determines where the link goes, while the text between its tags is what the user actually clicks.

Example 3: A Page With Semantic Layout Sections

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Simple Blog Page</title>
</head>
<body>
  <header>
    <h1>My Travel Blog</h1>
  </header>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#posts">Posts</a></li>
    </ul>
  </nav>
  <main>
    <h2>Latest Post: Hiking in the Alps</h2>
    <p>Last week I hiked through the Alps and saw incredible views.</p>
  </main>
  <footer>
    <p>&copy; 2026 My Travel Blog</p>
  </footer>
</body>
</html>

Result: The page renders as a stack of sections: a header area with the site title, a navigation row with two links (Home, Posts), a main content area with a blog post heading and paragraph, and a footer at the bottom showing a copyright line.

This example introduces layout-sectioning elements: <header>, <nav>, <main>, and <footer>. These carry no visual styling on their own beyond default block spacing, but they tell the browser, assistive technology, and search engines what role each region of the page plays — this is what “semantic HTML” means in practice, and it’s a concept you will use in every page you build from here on.

How It Works Step by Step (Under the Hood)

When your browser requests a webpage, here is what happens before anything appears on screen:

  • 1. Fetching: The browser downloads the raw HTML file as a stream of text characters from the server.
  • 2. Tokenizing: The browser’s HTML parser reads the text and breaks it into tokens — recognizing where tags start and end, what their names are, and what attributes they carry.
  • 3. Building the DOM tree: As tokens are produced, the parser constructs the DOM: each element becomes a node, nested inside whichever element contains it. <body> becomes the parent of everything visible; a <li> becomes a child of its <ul>, and so on.
  • 4. Handling errors: Unlike strict programming languages, HTML parsers are forgiving. If you forget to close a tag or nest elements incorrectly, the browser will usually guess your intent and “fix” the tree silently rather than throwing an error — which is convenient, but also why sloppy HTML can render unpredictably across different browsers.
  • 5. Rendering: Once the DOM (and the CSS Object Model, if any stylesheets are linked) is ready, the browser calculates the size and position of every element and paints pixels to the screen.

This DOM tree is also what JavaScript manipulates when a page updates dynamically without a full reload — but that is a topic for the JavaScript course. For this course, the key idea to remember is: your HTML source code becomes a tree, and the browser renders that tree.

Common Mistakes

Mistake 1: Forgetting to close tags

<p>This paragraph is never closed.
<p>This is a second paragraph.</p>

The first <p> has no closing </p>. Browsers will typically auto-close the first paragraph when they encounter the next block-level tag, but relying on this “forgiveness” produces messy, unpredictable trees, especially with more complex nesting like tables or lists. Always close every tag explicitly:

<p>This paragraph is properly closed.</p>
<p>This is a second paragraph.</p>

Mistake 2: Choosing tags for their default look instead of their meaning

<h3>Just some bold-looking text, not really a heading</h3>

Using a heading tag purely because it renders bold and large (rather than because the text is actually a section heading) breaks the document’s outline for screen readers and search engines, and it means a real heading later in the page might visually look smaller than this “fake” one. Use <strong> for genuinely important text and reserve heading tags for actual section titles:

<p>Just some <strong>important</strong> text, not a heading.</p>

Mistake 3: Mismatched or overlapping tags

<p>Some <strong>bold and <em>italic</strong> text</em></p>

Here the <strong> and <em> tags overlap instead of nesting cleanly — <strong> opens, then <em> opens, but <strong> closes before <em> does. Elements must close in the reverse order they were opened, like nested boxes:

<p>Some <strong>bold and <em>italic</em></strong> text</p>

Best Practices

  • Always include <!DOCTYPE html> as the very first line of every document so browsers render in standards mode.
  • Set the lang attribute on <html> (e.g. lang="en") to help screen readers and translation tools.
  • Always include a <meta charset="UTF-8"> tag so text and special characters display correctly.
  • Give every page a descriptive <title> — it appears in browser tabs, bookmarks, and search results.
  • Choose elements for their meaning (semantics), not their default visual appearance — save styling decisions for CSS.
  • Close every tag, and nest tags properly (last opened, first closed).
  • Use only one <h1> per page to represent the main topic, and structure subsequent headings (<h2>, <h3>) in logical, non-skipping order.
  • Keep indentation and line breaks consistent in your source code — it is not required for rendering, but it makes documents far easier to read and debug.

Practice Exercises

  • Exercise 1: Write a complete, minimal HTML document with the correct doctype, an html element with a lang attribute, a head with a title of “My Practice Page”, and a body containing one heading and one paragraph about yourself.
  • Exercise 2: Extend your document from Exercise 1 by adding an unordered list of three of your favorite foods and a link to any website of your choice.
  • Exercise 3: Take a paragraph of your own writing and mark up one word as <strong> and a different phrase as <em>, making sure the tags do not overlap. Then check that every tag you wrote has a matching closing tag.

Summary

  • HTML (HyperText Markup Language) defines the structure and content of every webpage using nested elements made of start tags, end tags, and attributes.
  • Browsers parse HTML text into a tree structure called the DOM, then render that tree visually on screen.
  • Semantics (what an element means) should be kept separate from presentation (how it looks) — use CSS for appearance.
  • Every complete HTML document needs a doctype, an html root, a head with metadata, and a body with visible content.
  • Common beginner mistakes include unclosed tags, overlapping tags, and choosing elements for their default look rather than their meaning.
  • Writing clean, valid, semantic HTML makes pages more accessible, more search-engine friendly, and easier to maintain.