HTML Tutorial · HTML Basics · Lesson 1 of 34

HTML Introduction

What HTML is, what its name means, how a browser turns it into a page, a short history, and what an element looks like.

Create a free account to save this page, take notes and track your progress. Sign in

What is HTML?

HTML (HyperText Markup Language) is the language every web page is written in. It tells the browser what each piece of content is: this is a heading, this is a paragraph, this is a link, this is a picture.

The name explains the idea:

  • HyperText: text with links that take you to other pages. Links are what turn separate documents into a web.
  • Markup: labels (called tags) wrapped around content to say what it is, like a teacher writing "title" or "quote" in the margin of an essay.
  • Language: a set of agreed rules, so every browser understands the same tags the same way.

HTML is not a programming language: it doesn't calculate or make decisions. It describes content, which is why it's the easiest place to start building for the web. You don't need any experience to follow this tutorial.

How a web page reaches your screen

  1. You type an address or click a link.
  2. Your browser asks a web server (a computer on the internet) for the page.
  3. The server sends back a text file of HTML.
  4. The browser reads it from top to bottom, uses the tags as instructions, and draws the page. You see the content, not the tags.

HTML, CSS and JavaScript

Websites use three languages together. Think of a house:

Language Job In the house
HTML Content and structure The walls and rooms
CSS How it looks (CSS tutorial) The paint and furniture
JavaScript What it does (JavaScript tutorial) The electricity and plumbing

You always start with HTML, because CSS and JavaScript need something to style and control.

A first page

Press Run to see how the browser draws this page. Then change the words between the tags and run it again:

A complete HTML pageTry it yourself
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My First Page</title>
</head>
<body>
  <h1>My First Heading</h1>
  <p>My first paragraph.</p>
  <p>Change this text and press Run again.</p>
</body>
</html>

Anatomy of an element

<p class="intro">Hello, world!</p>
  • <p> is the opening tag, </p> the closing tag (note the /).
  • class="intro" is an attribute: extra information written inside the opening tag as name="value".
  • Everything between the tags is the element's content.
  • The whole thing, from opening to closing tag, is one element.

Some elements are void (empty) and have no closing tag: <br>, <img>, <input>, <meta>.

Where HTML came from

Tim Berners-Lee invented the World Wide Web and HTML at CERN, the European physics laboratory, between 1989 and 1991, so scientists could link their documents together. His first description of HTML had just 18 tags, and some, like <p> and <a>, still work the same today.

HTML grew through several versions until HTML5 (2014) added video, audio, drawing and better forms without plug-ins. Today HTML is a Living Standard that keeps improving, so there's no "HTML6" to wait for. Read the full story in HTML History & Versions.

What you'll learn next

Set up your editor and create your first file in Get Started, then learn the page skeleton, text, links, images, lists and tables. Prefer a guided path with exercises? Take the free HTML5 for Beginners course.

Test yourself

What does HTML describe?

  1. How a page looks
  2. The structure and meaning of content
  3. How a page behaves
  4. The server configuration
Show answer

Answer: The structure and meaning of content

HTML says what each piece of content is; CSS controls how it looks and JavaScript how it behaves.

Was this page helpful?