HTML Basics

By Xah Lee. Date: . Last updated: .

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

Basic Structure

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>text</html> wraps around the whole file indicating that the whole file is a HTML file.

Each of the <name> is called a tag.

Some tags do not require the closing tag, such as <img src="filepath" /> for image and <br /> for linebreak. [see List of HTML Self-Closing Tags]

Most Important Tags

Here is the most frequently used tags.

Headers h1 h2 h3...

There are h1 up to h6.

First level heading
Second level heading
Third level heading
4th level
5th level
6th level. There is no 7th.


Paragraph. Can contain multiple lines.


<br />
force a line-break. HTML markup without a closing tag are called Self-Closing Tags. [see List of HTML Self-Closing Tags]

Literal Text block

Literal text block. Can contain multiple lines. Usually used for Computer Code or poem.


block quote. Can contain multiple lines and other markups such as paragraph or list.

Unordered List

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

[see HTML: List: ul ol li]

Ordered List

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


<a href="url">description</a>
Link to a website.
<a href=""></a>


<img src="filepath" alt="description" />
embed image.
<img src="my_cat.jpg" alt="my cat" />





Literal Inline Code

literal inline text. usually used for computer code.

Generic Inline Text Markup

general markup for inline text. It is similar to the bold tag b but without any meaning.

Generic Block Markup

general markup for a block of text. It is similar to p. Usually used to group other elements inside.

Self Closing Tags

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

<img src="cat.jpg" alt="my cat" />

These are called self-closing tags. [see List of HTML Self-Closing Tags]

Element's Attributes

Each element may have attributes.

The syntax for attributes are like this:

<p name=value>text</p>


<p name>text</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">the class attribute allows a element to be identified by CSS and JavaScript.</p>
<p id="x34">the id attribute 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

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>