HTML Basics
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 <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...
There are h1 up to h6.
<h1>…</h1>- First level heading
<h2>…</h2>- Second level heading
<h3>…</h3>- Third level heading
<h4>…</h4>- 4th level
<h5>…</h5>- 5th level
<h6>…</h6>- 6th level. There is no 7th.
Paragraph
<p>…</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>…</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
<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
bbut 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.
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>…</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">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
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>