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>
<html>

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

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

</html>

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>.
</p>

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

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

<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>

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

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

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>

or

<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 Entity List

HTML Table

  1. HTML Table Examples
  2. HTML Table, thead, tbody, tfoot
  3. HTML Table, colgroup, col
  4. Styling HTML Table with CSS
  5. CSS: 3 Columns Page Layout
  6. Pure CSS Table

Misc

  1. Viewport Meta
  2. the Root Element
  3. iframe
  4. video
  5. audio
  6. figure
  7. dl, dt, dd
  8. s strike del
  9. time
  10. meter
  11. progress
  12. q
  13. address
  14. canvas
  15. ruby
  16. HTML5 Custom Data Attribute
  17. Big Tag
  18. Image Maps
  19. Marquee, Scrolling Text
  20. How to Markup Subtitle
  21. Meta Language Tag Obsolete
  22. Browser Auto Refresh

HTML4 Frameset

  1. HTML: Split Windows; Frameset
  2. HTML Nested Frameset
Like it? Help me by telling 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 Ref
  5. DOM Scripting
  6. SVG
  7. Blog