HTML: Syntax Basics

By Xah Lee. Date: . Last updated: .

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>
  <title>Sample HTML</title>
 </head>

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

it shows in browser like this

html sample 2025-03-23 22f7a
html sample 2025-03-23 22f7a

HTML syntax

Text are enclosed by tags. For example

<head>…</head>
contains meta info about the file.
<title>…</title>
gives the title of the file.
<body>…</body>
is content of the file.
<h1>…</h1>
is the heading.
<p>…</p>
is a paragraph.

Opening and closing tags

Each of the <name> is called a tag.

Self-closing tags

Some tags do not have the closing tag. they are called self-closing tags or void-elements.

HTML element

opening and closing tags and its content, together is called an html element. (those self-closing tags are also elements.)

Most important tags

Here is the most frequently used tags.

Heading tags

There are 6 of them.

<h1>…</h1>

First level heading

<h2>…</h2>

Second level heading.

there are up to 6: h3, h4, h5, h6.

Paragraph

<p>…</p>

Paragraph.

Literal Text block

<pre>…</pre>

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

Blockquote

<blockquote>…</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 (anchor tag)

<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>…</b>

bold

italics

<i>…</i>

italics

Literal Inline Code

<code>…</code>

literal inline text. usually used for computer code.

Generic Inline Text Markup

<span>…</span>

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

Generic Block Markup

<div>…</div>

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

Element's attributes

Each element may have attributes.

The syntax for attributes are like this:

<p name1=value1 name2=value2 etc>…</p>

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

Some attribute does not have the “equal value” part. They are called boolean attributes.

Class and id attributes

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.

<p id="hBxgC" class="DtRmm" style="color:red">many attributes.</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, after 3 decades of history.

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

<!doctype html>