HTML Tutorial: the Basics

By Xah Lee. Date: . Last updated: .

This page is a basic, practical, 5 minutes tutorial of HTML.

HTML is a very simple markup language. Here's a example. Save the following text in a file, name it sample.html, then open the file in a browser.

<!doctype html>

  <meta charset="utf-8" />
  <title>Sample HTML</title>

  <h1>Sample HTML</h1>
  <p>Earth is round!</p>


Basically, text are enclosed by tags. For example, in the above, the <html>…</html> wraps around the whole file indicating that the whole file is a HTML file.

The <head>…</head> contains some meta info about the file. The <title>…</title> gives the title of the file.

Text between <body> and </body> are the content of the file. The <h1>…</h1> is the header of the content. The <p> is a paragraph.

Each of the <…> is called a tag.

The opening and closing tag together is called a element. For example, <p>…</p> is called the “p element”.

Most Important Elements

Here's some of the most commonly used elements.

<h1>First lever header</h1>

<h2>Second lever header</h2>

<h3>Third lever header</h3>

<p>“p” is for paragraph.<br />
The “br” is for line break inside paragraph.
Text can be marked bold by “b” tag, like this: <b>to boldly go …</b>.
There's also “i” for <i>making text slanted/italicized</i>.

“pre” is for text formatted with linebreaks
usually for computer code or poetry

inline image is done like this:
<img src="my_cat.jpg" alt="my cat" />

<div>“div” is a general markup for a block of text. It is similar to “p”. “div” is usually used to group other elements inside.</div>

<p>“span” is a general markup for inline text. Similar to the bold tag “b”</p>

<li>list item 1</li>
<li>list item 2</li>

<li>ordered list item 1</li>
<li>ordered list item 2</li>

Some element do not have a closing tag. For example,

<img src="cat.jpg" alt="my cat" width="320" height="240" />

These are called self-closing tags.

[see List of HTML Self-Closing Tags]

Element's Attributes

Each element may have “attributes”.

Attributes are name/value pairs.

The syntax for attributes is like this:

<p name="value">…</p>


<p name>…</p>

The one without the equal sign is called boolean attributes. They are rare.

What attributed are allowed for each elements depends on the element.

Most Important Attributes: class, id

Two most frequently used attributes, can be used on any element, are class and id attributes.

<p class="xyz">“class” allows a element to be identified by CSS and JavaScript.</p>
<p id="x34">“id” allows a element to be identified by CSS and JavaScript. ID value must be unique per HTML page.</p>

A element can have many attributes. For example, here's a inline image:

<p id="x34" class="xyz">I traveled around the world.</p>

The class and id attributes are used by Cascading Style Sheet and JavaScript to identify a element.

Case Sensitivity

Case Sensitivity of HTML5, XML, CSS, JavaScript

Versions of HTML

There are many versions of HTML and XHTML, and it is really a mess. If you are creating new pages, not maintaining old websites, i recommend HTML5. Put the following line at the beginning of your file.

<!doctype html>

HTML Basics

  1. HTML Basics
  2. HTML5 Tags
  3. Case Sensitivity
  4. Allowed Characters
  5. Charset and Encoding
  6. Self-Closing Tags
  7. Multiple Class Value
  8. HTML/XML Entity List
Liket it? I spend 2 years writing this tutorial. Help me spread it. Tell your friends. Or, Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials

  1. HTML
  2. Visual CSS
  3. JS in Depth
  4. JS Object Reference
  5. DOM Scripting
  6. SVG
  7. Blog