HTML Get Started

HTML (HyperText Markup Language) is the standard language used to create the structure of every webpage on the internet. It is not a programming language — it has no logic, loops, or calculations — it is a markup language: a system of tags that describes what each piece of content is (a heading, a paragraph, a link, an image) so that a browser knows how to display it. Getting started with HTML means writing a plain text file with a `.html` extension, adding a handful of required tags, and opening it in a browser to watch your markup become a real, structured page.

In this lesson you will create your very first HTML file from scratch, learn what each required part of the document does, and understand what actually happens between saving your file and seeing it rendered on screen.

Overview / How it works

An HTML document is just a plain text file. You can write it in any text editor — Notepad, VS Code, Sublime Text, even a basic terminal editor — as long as you save it with the `.html` (or `.htm`) file extension. There is no compiler and no build step required: you save the file, double-click it (or open it with a browser), and the browser reads the text and renders it as a page.

What makes an HTML file different from a plain `.txt` file is the use of tags. A tag is a keyword wrapped in angle brackets, like <p> or <h1>. Most tags come in pairs: an opening tag (<p>) and a closing tag (</p>, with a forward slash), with content sitting in between. Together, an opening tag, its content, and its closing tag form an element.

When a browser loads an HTML file, it does not just print the tags — it parses the text and builds an internal tree-like structure in memory called the DOM (Document Object Model). Every element becomes a node in this tree, nested according to how the tags are nested in your source. The browser then walks this tree and renders each node visually according to its default styling rules (for example, browsers render <h1> large and bold, and <p> as a plain block of text with space around it). This separation matters: HTML describes the structure and meaning (semantics) of content, while visual appearance (colors, fonts, spacing) is the job of CSS, a separate styling language covered in the CSS course. A well-structured, semantic HTML document will still make sense even with no styling applied at all.

Syntax

Every HTML document follows the same minimal skeleton. Here is the general form:

<!DOCTYPE html>
<html>
  <head>
    <title>Page title</title>
  </head>
  <body>
    Visible page content goes here
  </body>
</html>

Each part has a specific job:

<!DOCTYPE html> — not a tag but a declaration. It tells the browser to render the page using the modern HTML5 standard rather than an older, quirks-mode rendering engine. It must be the very first thing in the file.
<html> — the root element. Every other element in the document is nested inside it.
<head> — contains metadata about the page: information the browser and search engines need, but that is not directly displayed as page content (page title, character encoding, links to stylesheets, and so on).
<title> — sets the text shown in the browser’s title bar or tab, and the default title used when the page is bookmarked.
<body> — contains everything that is actually visible on the page: headings, paragraphs, images, links, lists, and so on.

Examples

Example 1: The smallest complete HTML page

<!DOCTYPE html>
<html>
  <head>
    <title>My First Page</title>
  </head>
  <body>
    <p>Hello, world!</p>
  </body>
</html>

Result: The browser tab displays “My First Page” as its title, and the page body shows a single line of plain text: Hello, world!

This is the absolute minimum needed for a valid, standards-compliant HTML5 page. Even though it only has one visible element, the browser still requires the <!DOCTYPE>, <html>, <head>, and <title> to render it correctly and predictably.

Example 2: A page with more structure

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>About Me</title>
  </head>
  <body>
    <h1>About Me</h1>
    <p>I am learning HTML for the first time.</p>
    <h2>My Goals</h2>
    <ul>
      <li>Understand tags and elements</li>
      <li>Build a real webpage</li>
    </ul>
  </body>
</html>

Result: The browser tab shows “About Me”. The page displays a large bold heading “About Me”, a paragraph below it, a smaller bold subheading “My Goals”, and a bulleted list with two items underneath.

This example introduces <meta charset="UTF-8">, which tells the browser which character encoding to use when interpreting the text bytes in the file — UTF-8 supports virtually every character and symbol used worldwide, so it is the standard choice for modern pages. It also shows how headings (<h1>, <h2>) and a list (<ul>/<li>) nest inside <body> to build a more realistic page layout, each rendered with different default styling based on its semantic meaning.

Example 3: Adding a link and an image placeholder

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>My Favorite Sites</title>
  </head>
  <body>
    <h1>My Favorite Sites</h1>
    <p>Here is a site I visit often:</p>
    <a href="https://www.example.com">Visit Example.com</a>
  </body>
</html>

Result: The page shows a heading “My Favorite Sites”, a paragraph of introductory text, and below it a clickable, underlined, blue-by-default link reading “Visit Example.com” that navigates to that address when clicked.

The <a> (anchor) element demonstrates an important pattern in HTML: many elements carry extra information in attributes, written inside the opening tag as name="value" pairs. Here, href tells the browser which URL to navigate to. Attributes always live in the opening tag only, never the closing tag.

How it works step by step

When you open an HTML file in a browser, several things happen very quickly, in order:

1. Fetch/read the file — the browser reads the raw text of your `.html` file, byte by byte, using the character encoding declared (or a default guess if none is given).
2. Tokenize — the browser’s HTML parser scans the text and breaks it into tokens: start tags, end tags, text, comments, and so on.
3. Build the DOM tree — tokens are turned into DOM nodes and nested according to your tag structure. <html> becomes the root node, with <head> and <body> as its children, and every tag inside them becomes a descendant node.
4. Apply default rendering rules — every element has a built-in default presentation defined by the browser (headings are bold and large, paragraphs have vertical spacing, links are blue and underlined, list items get bullets). This is why a page with zero custom styling still looks reasonably organized.
5. Paint the page — the browser calculates the layout (sizes and positions of every box) and paints pixels to the screen, producing what you see in the window.

Understanding this pipeline explains why tag order and nesting matter so much: the DOM tree is built directly from how you write your tags, so incorrect nesting produces an incorrect (or unpredictable) tree, which the browser will still try to render, sometimes in surprising ways.

Common Mistakes

Mistake 1: Forgetting to close tags.

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

Because <p> is a block element that browsers auto-close when another block element starts, this example happens to still render two separate paragraphs — but relying on browser auto-correction is risky and produces messy, hard-to-predict markup. Always close what you open:

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

Mistake 2: Overlapping (incorrectly nested) tags.

<p>This text is <strong>bold and <em>italic</strong></em>.</p>

Here the <strong> and <em> tags overlap instead of nesting cleanly — <em> opens inside <strong> but closes outside it. Tags must close in the reverse order they were opened, like nested boxes:

<p>This text is <strong>bold and <em>italic</em></strong>.</p>

Mistake 3: Omitting the DOCTYPE. Leaving out <!DOCTYPE html> can cause the browser to render your page in “quirks mode,” an old compatibility mode with inconsistent, legacy rendering rules. Always start every HTML file with <!DOCTYPE html> on the very first line.

Best Practices

Always begin every HTML file with <!DOCTYPE html> to ensure standards-mode rendering.
Always include <html>, <head>, <title>, and <body>, even in the simplest page.
Add <meta charset="UTF-8"> inside <head> so text and special characters display correctly.
Close every tag that requires closing, and nest tags properly (last opened, first closed).
Choose elements for their meaning (semantics), not their default appearance — use <h1> for a real top-level heading, not just because it looks big.
Save files with a lowercase `.html` extension and give the file a descriptive name (for example, `about.html`, not `page1.html`).
Keep your markup indented consistently so nesting is easy to read and debug.

Practice Exercises

Exercise 1: Create a new file called `first-page.html`. Include the full required skeleton (<!DOCTYPE html>, <html>, <head> with a <title>, and <body>). Inside the body, add one heading and one paragraph about yourself. Open the file in a browser and confirm the title bar/tab text matches your <title>.
Exercise 2: Add a bulleted list of three of your hobbies below your paragraph, and add a link to a website you enjoy using the <a> element. Check that clicking the link navigates correctly.
Exercise 3: Intentionally break your page by removing a closing tag, save it, and reload it in the browser. Observe how the browser still tries to render something. Then fix the tag and compare the result.

Summary

HTML files are plain text saved with a `.html` extension — no compiler or build tool is required.
Tags mark up content as elements; most tags have an opening and closing form, wrapping content in between.
Every valid HTML5 page needs <!DOCTYPE html>, <html>, <head> (with a <title>), and <body>.
The browser parses your tags into a DOM tree, then applies default rendering rules to paint the page.
HTML defines structure and meaning; visual styling belongs to CSS, a separate language.
Properly closing and nesting tags avoids unpredictable rendering and keeps markup maintainable.