HTML Tags
Name
HTML Tag
HTML Code Example
Browser View
HTML
Comment
<!--
<!--This can be viewed in the HTML part of a
document-->
Nothing will show (Tip)
HTML Anchor
<a>
<a href="http://www.domain.com/">
Visit Our Site</a>
Visit Our Site (Tip)
HTML Bold
<b>
<b>Example</b>
Example
HTML
Big (Text)
<big>
<big>Example</big>
Example (Tip)
Body of HTML
Document
<body>
<body>The content of
your HTML page</body>
Contents of your web page (Tip)
HTML Line
Break
<br>
The contents of your page<br>The contents of The contents of your page
your page
The contents of your page
HTML Center
<center>
<center>This will center your
contents</center>
<dd>
<dl>
<dt>Definition Term</dt>
<dd>Definition of the term</dd>
<dt>Definition Term</dt>
<dd>Definition of the term</dd>
</dl>
Definition Term
Definition of the term
Definition Term
Definition of the term
<dl>
<dl>
<dt>Definition Term</dt>
<dd>Definition of the term</dd>
<dt>Definition Term</dt>
<dd>Definition of the term</dd>
</dl>
Definition Term
Definition of the term
Definition Term
Definition of the term
HTML
Definition
Term
<dt>
<dl>
<dt>Definition Term</dt>
<dd>Definition of the term</dd>
<dt>Definition Term</dt>
<dd>Definition of the term</dd>
</dl>
Definition Term
Definition of the term
Definition Term
Definition of the term
HTML
Emphasis
<em>
This is an <em>Example</em> of using
the emphasis tag
This is an Example of using
the emphasis tag
HTML Embed
Object
<embed>
<embed src="yourfile.mid" width="100%"
height="60" align="center">
(Tip)
HTML Embed
Object
<embed>
<embed src="yourfile.mid" autostart="true"
hidden="false" loop="false">
<noembed><bgsound src="yourfile.mid"
loop="1"></noembed>
HTML Font
<font>
<font face="Times New
Roman">Example</font>
Example (Tip)
HTML Font
<font>
<font face="Times New Roman"
size="4">Example</font>
Example (Tip)
HTML Font
<font>
<font face="Times New Roman" size="+3"
color="#ff0000">Example</font>
Example
HTML
Definition
Description
HTML
Definition List
This will center your contents
Music will begin playing when your
page is loaded and will only play
one time. A control panel will be
displayed to enable your visitors to
stop the music.
(Tip)
HTML Form
Name
HTML
Heading
HTML
Heading
HTML
Heading
HTML
Heading
HTML
Heading
HTML
Heading
<form>
<form action="mailto:you@yourdomain.com"
>
Name: <input name="Name" value=""
size="10"><br>
Email: <input name="Email" value=""
size="10"><br>
<center><input type="submit"></center>
</form>
HTML Tag
Name:
(Tip)
Email:
Submit
HTML Code Example
Browser View
1
2
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
<h1>Heading
<h2>Heading
<h3>Heading
<h4>Heading
<h5>Heading
<h6>Heading
Heading of
HTML
Document
<head>
<head>Contains elements describing the
document</head>
HTML
Horizontal
Rule
<hr>
<hr />
HTML
Horizontal
Rule
<hr>
HTML
Horizontal
Rule
<hr>
HTML
Horizontal
Rule
<hr>
(Internet
Explorer)
<hr width="75%" color="#ff0000" size="4" />
HTML
Horizontal
Rule
<hr>
(Internet
Explorer)
<hr width="25%" color="#6699ff" size="6" />
HTML
Hypertext
Markup
Language
<html>
<html>
<head>
<meta>
<title>Title of your web page</title>
</head>
<body>HTML web page contents
</body>
</html>
Contents of your web page
HTML Italic
<i>
<i>Example</i>
Example
3
4
5
1
2
3
4
5
6
Example</h1>
Example</h2>
Example</h3>
Example</h4>
Example</h5>
Example</h6>
Nothing will show
Contents of your web page (Tip)
Contents of your web page
Contents of your web page
<hr width="50%" size="3" />
Contents of your web page
Contents of your web page
<hr width="50%" size="3" noshade />
Contents of your web page
HTML Image <img>
Contents of your web page
Contents of your web page
Contents of your web page
Contents of your web page
<img src="Earth.gif" width="41" height="41"
border="0" alt="text describing the image" />
(Tip)
Example:
HTML Input
Field
HTML Input
Password
<input>
<input>
<form method=post action="/cgibin/example.cgi">
<input type="text" size="10" maxlength="30">
<input type="Submit" value="Submit">
</form>
Example: (Tip)
Submit
<form method=post action="/cgibin/example.cgi">
<input type="password" size="10"
maxlength="30">
<input type="Submit" value="Submit">
</form>
Submit
Example:
HTML Input
(Backgroun
d Color)
<input>
(Internet
Explorer)
<form method=post action="/cgibin/example.cgi">
<input type="text" style="color: #ffffff; fontfamily: Verdana; font-weight: bold; font-size:
12px; background-color: #72a4d2;" size="10"
maxlength="30">
<input type="Submit" value="Submit">
</form>
Example: (Tip)
Submit
Example:
HTML Input
(Image
Submit
Button)
<input>
<form method=post action="/cgibin/example.cgi">
<table border="0" cellspacing="0"
cellpadding="2"><tr><td
bgcolor="#8463ff"><input type="text" size="10"
maxlength="30"></td><td bgcolor="#8463ff"
valign="Middle"> <input type="image"
name="submit" src="yourimage.gif"></td></tr>
</table>
</form>
Example:
HTML Input
(Comment
Box)
<input>
<form method=post action="/cgibin/example.cgi">
Enter Your Comments:<br>
<textarea wrap="virtual" name="Comments"
rows=3 cols=20
maxlength=100></textarea><br>
<input type="Submit" value="Submit">
<input type="Reset" value="Clear">
</form>
Example:
HTML Input
(Radio
Button)
HTML Input
<input>
<input>
<form method=post action="/cgibin/example.cgi">
Select an option:<br>
<input type="radio" name="option"> Option 1
<input type="radio" name="option" checked>
Option 2
<input type="radio" name="option"> Option 3
<input type="Submit" value="Submit">
</form>
Example:
Example: (Tip)
Example: (Tip)
Submit
Clear
Example: (Tip)
Select an option:
Option 1
Option 2
Option 3
Submit
Example: (Tip)
<form method=post action="/cgibin/example.cgi">
Select an option:<br>
<input type="checkbox" name="selection">
Selection 1
<input type="checkbox" name="selection"
checked>Selection 2
<input type="checkbox"
name="selection"> Selection 3
<input type="Submit" value="Submit">
</form>
(Checkbox)
Select an option:
Selection 1
Selection 2
Selection 3
Submit
Example 1: (Tip)
Example 1:
HTML List
Item
<menu>
<li type="disc">List item 1</li>
<li type="circle">List item 2</li>
<li type="square">List item 3</li>
</MENU>
<li>
Example 2:
<ol type="i">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>
HTML Link
<link>
List item 1
List item 2
List item 3
Example 2:
i.
List item 1
ii.
List item 2
iii.
List item 3
iv.
List item 4
<head>
<link rel="stylesheet" type="text/css"
href="style.css" />
</head>
(Tip)
HTML
Scrolling
Text
HTML Menu
<marquee
>
(Internet
Explorer)
<marquee bgcolor="#cccccc" loop="-1"
scrollamount="2" width="100%">Example
Marquee</marquee>
<menu>
<menu>
<li type="disc">List item 1</li>
<li type="circle">List item 2</li>
<li type="square">List item 3</li>
</menu>
HTML Meta
<meta>
HTML Meta
<meta>
<meta name="Description" content="Description
of your site">
<meta name="keywords" content="keywords
describing your site">
<meta HTTP-EQUIV="Refresh"
CONTENT="4;URL=http://www.yourdomain.com/"
List item 1
List item 2
List item 3
Nothing will show (Tip)
Nothing will show (Tip)
>
HTML Meta
<meta>
<meta http-equiv="Pragma" content="no-cache"> Nothing will show (Tip)
HTML Meta
<meta>
<meta name="rating" content="General">
Nothing will show (Tip)
HTML Meta
<meta>
<meta name="robots" content="all">
Nothing will show (Tip)
HTML Meta
<meta>
<meta name="robots" content="noindex,follow">
Nothing will show (Tip)
Name
HTML
Ordered List
HTML Tag
<ol>
HTML Code Example
Numbered
<ol>
<li>List
<li>List
<li>List
<li>List
</ol>
item
item
item
item
Browser View
Numbered
1</li>
2</li>
3</li>
4</li>
Numbered Special Start
<ol start="5">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>
1.
List item 1
2.
List item 2
3.
List item 3
4.
List item 4
Numbered Special Start
5.
List item 1
6.
List item 2
Lowercase Letters
7.
List item 3
<ol type="a">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>
8.
List item 4
Lowercase Letters
a.
List item 1
Capital Letters
b.
List item 2
<ol type="A">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>
c.
List item 3
d.
List item 4
Capital Letters
Capital Letters Special Start
A. List item 1
<ol type="A" start="3">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>
B. List item 2
Lowercase Roman Numerals
<ol type="i">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
C. List item 3
D. List item 4
Capital Letters Special Start
C. List item 1
D. List item 2
E.
List item 3
F.
List item 4
Lowercase Roman Numerals
i.
List item 1
<li>List item 4</li>
</ol>
ii.
List item 2
Capital Roman Numerals
iii.
List item 3
<ol type="I">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>
iv.
List item 4
Capital Roman Numerals Special Start
<ol type="I" start="7">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>
HTML Listbox
Option (Drop <option>
Down Box)
<form method=post action="/cgibin/example.cgi">
<center>
Select an option:
<select>
<option>option 1</option>
<option selected>option 2</option>
<option>option 3</option>
<option>option 4</option>
<option>option 5</option>
<option>option 6</option>
</select><br>
</center>
</form>
HTML Mailto
Email Link
<a
href="mailto:you@yourdomain.com">Email
Link</a>
HTML
Paragraph
<a>
<p>
This is an example displaying the use of the
paragraph tag. <p> This will create a line
break and a space between lines.
Attributes:
Capital Roman Numerals
I.
List item 1
II.
List item 2
III.
List item 3
IV.
List item 4
Capital Roman Numerals Special Start
VII.
List item 1
VIII.
List item 2
IX.
List item 3
X.
List item 4
Select an option: (Tip)
option 2
Email Link
This is an example displaying the use of the
HTML paragraph tag.
This will create a line break and a space
between lines.
<p align="left">
Example 1:<br />
<br />
This is an example<br>
displaying the use<br>
of the paragraph tag.</p>
<p align="right">
Example 2:<br>
<br>
This is an example<br>
displaying the use<br>
of the paragraph tag.</p>
<p align="center">
Example 3:<br>
<br>
This is an example<br>
displaying the use<br>
of the paragraph tag.</p>
Attributes:
Example 1:
This is an example
displaying the use
of the paragraph tag.
Example 2:
This is an example
displaying the use
of the paragraph tag.
Example 3:
This is an example
displaying the use
of the paragraph tag.
HTML
Small(Text)
<small>
<small>Example</small>
Example
HTML
Deleted Text
<strike>
<strike>Example</strike>
Example
<strong>Example</strong>
Example
HTML Strong <strong>
(Tip)
Example 1:
<table border="4" cellpadding="2"
cellspacing="2" width="100%">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
Example 1: (Tip)
Column 1
Column 2
Example 2: (Internet Explorer)
HTML Table
<table>
<table border="2" bordercolor="#336699"
Example 2: (Tip)
cellpadding="2" cellspacing="2"
width="100%">
<tr>
Column 1
<td>Column 1</td>
<td>Column 2</td>
</tr>
Example 3: (Tip)
</table>
Column 2
Example 3:
Column 1
Column 2
Row 2
Row 2
<table cellpadding="2" cellspacing="2"
width="100%">
<tr>
<td bgcolor="#cccccc">Column 1</td>
<td bgcolor="#cccccc">Column 2</td>
</tr>
<tr>
<td>Row 2</td>
<td>Row 2</td>
</tr>
</table>
<td>
<table border="2" cellpadding="2"
cellspacing="2" width="100%">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
HTML Table
Header
<th>
<div align="center">
<table>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
</tr>
<tr>
<td>Row 3</td>
<td>Row 3</td>
<td>Row 3</td>
</tr>
<tr>
<td>Row 4</td>
<td>Row 4</td>
<td>Row 4</td>
</tr>
</table>
</div>
HTML
Document
Title
<title>
<title>Title of your HTML page</title>
Title of your web page will be viewable in the
title bar. (Tip)
HTML Table
Row
<tr>
<table border="2" cellpadding="2"
cellspacing="2" width="100%">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
Column 1
HTML
Teletype
<tt>
<tt>Example</tt>
Example
HTML
Underline
<u>
<u>Example</u>
Example
Example 1:
<ul>
Example 1:<br>
<br>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
<br>
Example 2:<br>
<ul type="disc">
<li>List item 1</li>
<li>List item 2</li>
HTML Table
Data
HTML
Unordered
List
Column 1
Column 1
Row 2
Row 3
Row 4
Column 2
Column 2
Row 2
Row 3
Row 4
List item 1
List item 2
Example 2:
Column 3
Row 2
Row 3
Row 4
Column 2
<ul type="circle">
<li>List item 3</li>
<li>List item 4</li>
</ul>
</ul>
List item 1
List item 2
o
List item 3
List item 4
How to Code in HTML
In this section, you will find a free HTML lesson that will teach you basic html. You will learn the basics of how to code
in HTML, exactly what HTML code is, how to write it and see several examples.
If you'd like to learn how to create a web page, taking the time to learn how to code in HTML (hypertext markup
language) will not only provide you with the freedom to update your own web pages, but it will also save you some
money, as you will be able to avoid hiring a professional web designer.
What is HTML Code?
A web page is created using a language called, Hypertext Markup Language, better known as HTML Code. You can
write your own coding within a plain text editor, such as Note Pad, or use an HTML editor, which will write the code for
you.
HTML codes, also referred to as HTML tags, are enclosed by the lesser than (<) and greater than (>) brackets and may
be written in capital or lower case letters.
The opening bracket is followed by an element, which is a browser command, and ends with the closing bracket.
<font size=2>
An element may also be followed by attributes, which are words describing the properties of the element, and further
instruct the browser.
<font size=2>
Attributes are only contained in the opening HTML tags to the right of the element and are separated by a space and
followed by an equal (=) sign.
The value follows the equal sign and is enclosed in quotes.
<font size=2>
Basic HTML Document
Begin writing your HTML tags by creating your document's basic layout.
Browser View
HTML Code
<html>
Begins your HTML document.
<head>
Contains information about the page such as the TITLE, META tags for proper Search
STYLE tags, which determine the page layout, and JavaScript coding for special effec
<title> The TITLE of your page </title>
Your title should contain the page's most relevant keyword phrase, which are words
web page. It will also be displayed within the search results of the search engines.
</head>
Closes the head section.
<body>
</body>
The area between the opening and closing body tags will contain everything that wil
web browser, such as text and graphics. All of the information will be HTML coded.
</html>
Closes the <html> tag.
Text
<b>text</b> Specifies bold text
<i>text</i> Specifies italic text
<tt>text</tt> Specifies teletype (typewriter) text
<cite>text</cite> Specifies a citation that normally displays as italic.
<em>text</em> Emphasizes a word that normally displays as italic.
<strong>text</strong> Emphasizes a word that normally displays as bold.
<font>text</font> Specifies font for a specific area of text.
Formatting
Browser View
HTML Code
<p>text</p>
Specifies a paragraph.
<p>This is an example of text being displayed within a paragraph
tags. When you place a paragraph within the paragraph tags, a
space will automatically be placed between the paragraphs. </p>
<p>This is an example of text being displayed within a paragraph
tags. When you place a paragraph within the paragraph tags, a
space will automatically be placed between the paragraphs. </p>
This is an example of text being displayed within a paragrap
a paragraph within the paragraph tags, a space will automat
the paragraphs.
<br>
Specifies a line break.
This is an example of<br>
text being displayed with various<br>
line breaks. The text will<br>
This is an example of
text being displayed with various
line breaks. The text will
This is an example of text being displayed within a paragrap
a paragraph within the paragraph tags, a space will automat
the paragraphs.
break to the next line each time the <br>
tag is used.
break to the next line each time the break tag is used.
<blockquote>text</blockquote>
Indents a block of text from both sides.
<blockquote>This is an example of text being displayed within
the blockquote tags. The text is indented on both the left and the
right sides.</blockquote>
This is an example of text being displayed within the b
text is indented on both the left and the right sides.
<h1>heading 1 Text</h1>
Specifies a heading.
<h2>heading 2 Text</h2>
<h3>heading 3 Text</h3>
<h4>heading 4 Text</h4>
<h5>heading 5 Text</h5>
<h6>heading 6 Text</h6>
<pre>text</pre>
Specifies preformatted text.
<pre>
This is an example of displaying text
within the <pre> tags. Text will
display exactly as it looks between
the tags without adding any break or
paragraph tags.
This is an example of displaying text
within the <pre> tags. Text will
display exactly as it looks between
the tags without adding any break or
paragraph tags.
This is a great tag to use with a form
to enable the form to display properly
without placing it within a table.
</pre>
This is a great tag to use with a form
to enable the form to display properly
without placing it within a table.
<hr />
Inserts a horizontal rule.
Links
Browser View
HTML Code
<a href="http://www.domain.com">Linked Text </a>
Linked Text
<a href="mailto:you@yourdomain.com">Email Link </a>
Email Link
<a href="http://www.domain.com"><img
src="http://www.domain.com/image.gif"></a>
<a name="NAME"></a> Specifies a target location within a web
page.
The target location is located below. You won't see anything.
click on the link below, you will be taken to it.
<a href="#NAME">Text</a> Link leading to the target location
with the same web page.
Text Link leading to the target location within the same web
Images
HTML Code
Browser View
<img src="http://www.yourdomain.com/image.gif" alt="Alternate
Text" height="41" width="41">
Unordered list
HTML Code
<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
Browser View
List Item
List Item
List Item
Ordered list
HTML Code
<ol>
<li>First List Item</li>
<li>Second List Item</li>
<li>Third List Item</li>
</ol>
Browser View
1.
First List Item
2.
Second List Item
3.
Third List Item
Definition list
HTML Code
Browser View
<dl>
<dt>First List Item</dt>
<dd>First List Item Description</dd>
<dt>Second List Item</dt>
<dd>Second List Item Description</dd>
<dt>Third List Item</dt>
<dd>Third List Item Description</dd>
</dl>
First List Item
First List Item Description
Second List Item
Second List Item Description
Third List Item
Third List Item Description
Tables
HTML Code
Browser View
<table width="300" border="1">
<tr>
<th>Table Header</th>
<th>Table Header</th>
</tr>
<tr>
<td>Table Data</td>
<td>Table Data</td>
</tr>
<tr>
<td>Table Data</td>
<td>Table Data</td>
</tr>
</table>
Forms
Browser View
HTML Code
<form method=post action="/cgi-bin/example.cgi">
Specifies a form, which will require the use of a form process
on a web server.
<input type="text" size="10" maxlength="30">
<textarea name="comments" rows="6" cols="20"></textarea>
<input type="radio" name="option1"> Option 1
<input type="radio" name="option2" checked> Option 2
<input type="radio" name="option3"> Option 3
Option 1
Option 2
Option 3
<input type="checkbox" name="selection1"> Selection 1
<input type="checkbox" name="selection2" checked> Selection 2
<input type="checkbox" name="selection3"> Selection 3
<select>
<option>option 1</option>
<option selected>option 2</option>
<option>option 3</option>
<option>option 4</option>
<option>option 5</option>
<option>option 6</option>
</select>
Selection 1
Selection 2
option 2
<input type="password">
<input type="Submit" value="Submit">
<input type="reset">
Submit
Reset
<input type="hidden">
Nothing will display.
</form>
Specifies the end of a form.
Selection 3
