HTML Examples
The following examples show some of the
more commonly used tags in HTML.
Heading Elements
Headings are defined in HTML documents
using the <h1> - <h6> tags.<h1> is
the most significant heading, and<h6> is
the least significant.
<h1>Heading
1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3>
<h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading
6</h6>
This produces the following result:
Heading 1
Heading
2
Heading
3
Heading
4
Heading
5
Heading
6
Headings may be styled using CSS to
vary the font size, weight, color, etc.
Text Elements
Various tags define text elements and
their styles. Here are few example:
<p>Paragraph
Text</p> (line <br /> break) <hr /> (horizontal rule)
<em>Emphasized Text</em>
<strong>Strong Text</strong> <pre>Preformatted Text</pre> <code>Computer Code</code>
<strong>Strong Text</strong> <pre>Preformatted Text</pre> <code>Computer Code</code>
This produces the following result:
Paragraph Text
(line
break)
break)
(horizontal rule)
Emphasized Text
Strong Text
Emphasized Text
Strong Text
Preformatted Text
Computer Code
Lists
HTML supports two common types of
lists, unordered (<ul>) and
ordered (<ol>). By
default, unordered list items are marked by a bullet (•) character, and ordered
list items are marked by a number.
To define the list items, use the <li>tag.
<ul>
<li>First Item</li> <li>Second Item</li>
<li>Third Item</li> </ul> <ol> <li>First
Item</li> <li>Second Item</li> <li>Third
Item</li> </ol>
This produces the following result:
- First Item
- Second Item
- Third Item
- First Item
- Second Item
- Third Item
Tables
Tables are defined with the <table>tag.
A table is divided into rows (with the<tr> tag),
and each row is divided into data cells (with the <td> tag).
Optional table headers can be added by
specifying the <th> tag.
<table
border="1"> <tr> <th>Header 1</th>
<th>Header 2</th> </tr> <tr> <td>row 1, cell
1</td> <td>row 1, cell 2</td> </tr> <tr>
<td>row 2, cell 1</td> <td>row 2, cell 2</td>
</tr> </table>
This produces the following result:
Header 1
|
Header 2
|
row 1, cell 1
|
row 1, cell 2
|
row 2, cell 1
|
row 2, cell 2
|
Forms
HTML Forms are used to select different
kinds of user input and pass that input to a server.
A form can contain input elements like
text fields, checkboxes, radio-buttons, submit buttons and more. A form can
also contain select lists, textarea, fieldset, legend, and label elements.
The <form> tag
is used to create an HTML form:
<form>
First name: <input type="text" name="fname" /> Last
name: <input type="text" name="lname" /> Password:
<input type="password" name="pw" /> <input
type="radio" name="otype" value="rent" />Rent <input
type="radio" name="otype" value="own" />Own
<input type="checkbox" name="opts" value="ac"
/>A/C <input type="checkbox" name="opts"
value="pool" />Pool <input type="submit"
value="Submit" /> </form>
This produces the following result:
First name: 
Last name: 
Password: 
Rent
Own
A/C
Pool
Last name: Password: RentOwnA/CPool
HTML Links
Links are defined in HTML documents
using the <a> tag.
The text between the opening and closing tags is styled as a link and clicking
on the link forwards to the referenced link.
HTML Images
Images are
defined in HTML documents using the
<img> tag. It
is important to note that images are not actually inserted into the HTML
document, but instead are referenced using a link.<img src="smiley.gif" alt="Smiley face" />
This produces
the following result:
