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

<head>…</head> contains meta info about the file.

<title>…</title> gives the title of the file.

<body>…</body> are the content of the file.

<h1>…</h1> is the header of the content.

<p>…</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 the most commonly used elements.

Headers h1 h2 h3...

There are h1 up to h6.

Paragraph

<p>some thing</p>

<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 “ifor <i>making text slanted/italicized</i>.
</p>

Computer Code, Literal Text

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

<pre> x = 3 print x + y </pre>

Unordered List

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

Ordered List

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

Generic Block Container, div

<div>some thing</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>“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>

Image

For embeded image.

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

bold

<b>this</b>

italics

<i>this</i>

span

<span>something</span>

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

Self Closing Tags

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

Markup Languages

  1. HTML Basics
  2. CSS Basics
  3. Markdown Tutorial
  4. HAML Tutorial
  5. Sass Tutorial
  6. What is YAML?
  7. What's Slim Markup?
  8. Emacs: Org Mode Markup Cheatsheet
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