HTML Basics

By Xah Lee. Date: 2009-09-29. Last updated: 2023-12-19.

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

<head>text</head> → contains meta info about the file.
<title>text</title> → gives the title of the file.
<body>text</body> → are the content of the file.
<h1>text</h1> → is the header of the content.
<p>text</p> → is a paragraph.

Each of the <name> is called a tag.

<name> is called opening tag.
</name> is called closing 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 6 of them.

<h1>text</h1>: First level heading
<h2>text</h2>: Second level heading
<h3>text</h3>: Third level heading
<h4>text</h4>: 4th level
<h5>text</h5>: 5th level
<h6>text</h6>: 6th level. There is no 7th.

Paragraph

<p>text</p>: Paragraph. Can contain multiple lines.

line-break

<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

<pre>text</pre>: Literal text block. Can contain multiple lines. Usually used for Computer Code or poem.

Blockquote

<blockquote>text</blockquote>: block quote. Can contain multiple lines and other markups such as paragraph or list.

Unordered List

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

〔see HTML: List: ul ol li〕

Ordered List

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

Link

<a href="url">description</a>

Link to a website.

<a href="http://example.com/">http://example.com/</a>

Image

<img src="filepath" alt="description" />

embed image.

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

bold

<b>text</b>: bold

italics

<i>text</i>: italics

Literal Inline Code

<code>text</code>: literal inline text. usually used for computer code.

Generic Inline Text Markup

<span>text</span>: general markup for inline text. It is similar to the bold tag b but without any meaning.

Generic Block Markup

<div>text</div>: 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

HTML/CSS Case Sensitivity

Versions of HTML

There are many versions of HTML and XHTML, and it is really a mess, after 3 decades of history.

If you are creating new pages, i recommend HTML5. Put the following line at the beginning of your file.

<!doctype html>