What is HTML?

HTML stands for HyperText Markup Language. It is the language that describes the structure of a web page. You label each piece of content, and the browser uses those labels to build what people see.

• HyperText Links that jump from one page to another.
• Markup Labels that say what each part of the content is.
• Language A shared set of rules every browser understands.

HTML is a markup language. It describes content. A programming language such as JavaScript runs instructions and makes decisions. HTML tells the browser, “this is a heading,” “this is a paragraph,” and “this is a link.”

Why Learn HTML?

HTML for beginners is a short climb with a wide view. A few tags are enough to publish a real page, and every later web skill attaches to those tags.

How HTML Works

You write text. The browser turns HTML tags into a tree of elements called the DOM, the Document Object Model, then paints that tree on screen.

1. 1

   Write

   Create a text file and save it with an .html extension.

2. 2

   Parse

   The browser reads the tags and builds a tree of HTML elements.

3. 3

   Fetch

   It loads the CSS, images, and scripts your HTML points to.

4. 4

   Show

   The page appears. JavaScript can change the tree later.

Basic Structure of an HTML Document

A modern page has a doctype, a root <html> element, a <head> for metadata, and a <body> for everything people see. Choose a part of the diagram to see its job.

Choose any box. The panel explains that part of the document.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page title</title>
</head>
<body>
  <header>...</header>
  <nav aria-label="Primary">...</nav>
  <main>...</main>
  <footer>...</footer>
</body>
</html>

• charsetUTF-8 lets the page show languages and symbols correctly. See charset.
• viewportAsks phones to size the page to the screen. It belongs in the head.
• langNames the page language for browsers and assistive tech. See language codes.
• titleThe text on the browser tab. It also helps people scanning search results.

HTML Tags vs HTML Elements

People often say “p tag” for the whole paragraph. The precise split still helps when a page misbehaves: HTML tags are the markers, and the HTML element is the whole piece the browser builds.

Write the end tag for every element that contains content. Lowercase tag names are the modern habit, even though HTML treats <P> and <p> as the same tag. The full list lives in the HTML tags reference.

HTML Attributes

An HTML attribute adds a fact to the start tag. It does not replace the element. The name and the value usually look like name="value".

<a href="/html/basic">Continue the HTML tutorial</a>

<img
  src="bike.jpg"
  alt="Red bicycle beside a cafe window"
  width="640"
  height="480">

<label for="email">Email</label>
<input id="email" name="email" type="email" autocomplete="email" required>

required is a boolean attribute. Its presence turns the check on, so you can write required on its own. Attributes such as class, id, lang, and hidden are global: they fit almost any element. Others, such as href, belong to specific elements. The attributes reference sorts them out.

Key Features of HTML

Modern HTML, the feature set people still call HTML5, gives you meaningful regions, links, forms, and media without a plugin.

HTML Versions and the HTML Living Standard

HTML used to ship as frozen, numbered documents. The language you are learning now is a living standard: browsers follow the current specification, and new features arrive there.

1. 1991

   The first HTML

   Tim Berners-Lee introduced HTML so documents could link to each other.

2. 1999

   HTML 4.01

   A finished specification. Pages from this era often mixed structure with presentation.

3. 2014

   HTML5

   The feature generation behind today’s habits: semantic elements, audio, video, canvas, and richer forms. The name stuck.

4. Today

   HTML Living Standard

   The specification browsers implement. The WHATWG updates it as the web gains features. There is no HTML6 you need to wait for.

What Can You Build with HTML?

HTML structures the pieces people use: navigation, forms, pictures, and video. Switch the examples, then open the matching lesson when you want the full tour.

<nav aria-label="Primary">
  <a href="/html">Home</a>
  <a href="/html/basic">Guides</a>
  <a href="/html/editors">About</a>
</nav>

<form action="/subscribe" method="post">
  <label for="email">Email</label>
  <input id="email" name="email"
    type="email" autocomplete="email" required>
  <button type="submit">Subscribe</button>
</form>

<img
  src="bike.jpg"
  alt="Red bicycle beside a cafe window"
  width="640"
  height="480">

<video controls width="640">
  <source src="lesson.mp4" type="video/mp4">
  Your browser does not show this video.
  Read the transcript instead.
</video>

HTML vs CSS vs JavaScript

Each language has one job. Pages feel polished when you let each one do that job.

This HTML tutorial stays on structure. When you are ready, connect a stylesheet in Add CSS to HTML and a script in JavaScript in HTML.

What You Will Learn in This HTML Tutorial

This page is the map. Each card opens a part of the HTML tutorial, from the first skeleton to forms, media, CSS, and JavaScript.

HTML Learning Roadmap

Follow the steps in order. Each one assumes the step before it, and you can pause to practice a single page.

1. 1

   Introduction

   You are here: what HTML is, and how a document fits together.

2. 2

   HTML Basic

   Write a complete starter page and open it in a browser.

3. 3

   Editors and comments

   Choose a tool, then leave notes with HTML comments.

4. 4

   Tags and attributes

   Study elements and the attributes that configure them.

5. 5

   Structure the page

   Head metadata, text, lists, and tables. Special characters are covered in entities.

6. 6

   Forms and media

   Collect input, then add images, audio, and video.

7. 7

   Style and behavior

   Attach CSS, then add JavaScript when the page should react.

8. 8

   CSS, then JavaScript

   Move on to the CSS tutorial and the JavaScript tutorial with HTML already in place.

Prerequisites

You can start this HTML tutorial today. Nothing else has to be installed first.

Your First HTML Program

Save this as index.html and open it in a browser. It uses the document shape from this page: a doctype, metadata, and semantic regions.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First HTML Page</title>
</head>
<body>
  <header>
    <h1>Hello, HTML</h1>
    <p>This page is built with HTML elements.</p>
  </header>

  <nav aria-label="On this page">
    <a href="#about">About</a>
  </nav>

  <main id="about">
    <h2>Why this works</h2>
    <ul>
      <li>The doctype selects modern HTML.</li>
      <li>The heading and list describe the content.</li>
      <li>The link is real hypertext.</li>
    </ul>
  </main>

  <footer>
    <p>Save this file as index.html and open it in a browser.</p>
  </footer>
</body>
</html>

• DoctypeSelects the modern HTML parsing rules.
• HeadStores the charset, the viewport, and the tab title.
• Body regionsheader, nav, main, and footer describe the page.
• ContentThe heading, list, and link are ready for CSS later.

Habits and beginner mistakes