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,
<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
<name> is called a tag.
<name>is called opening tag.
</name>is called closing tag.
Most Important Tags
Here is the most frequently used tags.
Headers h1 h2 h3...
h1 up to
- First level heading
- Second level heading
- Third level heading
- 4th level
- 5th level
- 6th level. There is no 7th.
- Paragraph. Can contain multiple lines.
- 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.
<ul> <li>list item 1</li> <li>list item 2</li> </ul>
[see HTML: List: ul ol li]
<ol> <li>ordered list item 1</li> <li>ordered list item 2</li> </ol>
Link to a website.
<img src="filepath" alt="description" />
<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
bbut 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]
Each element may have attributes.
The syntax for attributes are like this:
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
A element can have many attributes. For example, here's a inline image:
<p id="x34" class="xyz">I traveled around the world.</p>
HTML/CSS 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.