Basic HTML Tags

The HyperText Markup Language (HTML) is composed of a set of elements (HTML tags) that define a document and guide its display.

HTML tags are enclosed in brackets made of the less-than and greater-than signs on your keyboard, (< >). They include a name, some attributes and some text or hypertext, and will appear in an HTML document as...

<tag_name attribute=value> text </tag_name> or
<tag_name> text </tag_name> or just
<tag_name>

Most HTML tags consist of a start tag, <tag_name>, and an end tag, </tag_name>. The end tag is identified by a forward slash (/) before the tag name. Some tags, such as the Break <br> and Horizontal Rule <hr> tags, do not require an end tag.

Tag attributes and their values are entered in the start tag. Attributes are separated from one another by a single space. There should be no spaces after the left bracket (<).

Tag and attribute names are not case-sensitive, so that <FONT> and <font> are interchangeable. Some attribute values, particularly file names, are case-sensitive, however.

Many tags can be nested, that is, placed inside other tags, but tags should never overlap...
<b><i> Correct sequence </i></b>
<b><i> Incorrect sequence </b></i>

The actual page content, text, links, images, etc., is placed between the start and end tags.

Here's the source code of a simple Web page as an example of basic HTML tags...

The tags are in red.
The explanations to you are in black.

<html>
Tells the browser that it's reading an HTML page. An HTML document is composed of a single element <html>...</html>

<head>
Defines the beginning of the heading section of the page. This section contains information about the page.

<title> Basic HTML Tags </title>
This is the title of the page. It appears in a window bar identifying the contents of the window, but not on the actual Web page that you view.

</head>
Defines the end of the heading part of the page. It doesn't matter what order you place the tags in the head area, although it's recommended that you include the title tag first on the page, before listing any other tags.

<body bgcolor="#FFFFFF" text="#000000" link="#003399" vlink="#444444" leftmargin="50" rightmargin="50">
Begins the body of an HTML document that contains all the text and images that make up the page. Tells the browser what color to make the background (bgcolor), the normal text (text), the links (link), the visited links (vlink), and sets left and right margins of the document.
"#RRGGBB" is a hexadecimal (base 16) red-green-blue triplet used to specify the color.

<table width="100%" cellspacing="0" border="0">
This tag begins the table, sets its width as 100% of the browser display window and inserts no space between individual data cells (cellspacing="0"). The invisible tables (border="0") are often used for layout. This table has one row and three columns.

<tr>
Begins the first row of the table.

<td>
Begins the first cell.

<img src="img/html-tags.gif" width="102" height="114" alt="Basic HTML tags">
Puts a picture "img/html-tags.gif" into the first cell. The width and height attributes allow the browser to determine the text layout surrounding the image before the entire image has been downloading, which can significantly speed up display of the document text. Alternate text (alt="...") is provided for whenever the graphic is not rendered (i.e. if the user has image loading turned off). Many browsers also use any alt text as a ToolTip to be displayed when the mouse pauses over the image.

</td>
Ends the first cell.

<td width="100%">
Begins the second cell. The width="100%" attribute ensures the maximum possible width of the cell.

<h1 align="center">Basic HTML Tags</h1>
Inserts the headline and centers it in the cell (align="center").
<h1> is the highest level of headings, followed by <h2> ... <h6>.

</td>
Ends the second cell.

<td>
Begins the third cell.

<a href="index.html"><img src="img/bws.gif" width="110" height="114" alt="Build website for you" border="0"></a>
The <a> tag creates a link. In this example, it's telling the browser to turn the image img/bws.gif into a link with the destination URL "index.html." The border="0" attribute makes the blue border around the picture invisible.

</td>
Ends the third cell.

</tr>
Ends the first row of the table.

</table>
Ends the table.

<table width="100%" cellpadding="5" cellspacing="0" border="0">
Begins the next table used as a navigation bar. The cellpadding attribute sets the amount of white space between the actual cell data and the borders of the table cell.

<tr bgcolor="#CCFFFF" align="center">
Begins the first row of the table and sets its background color (bgcolor="#CCFFFF").

<td> <a href="index.html"> <b> Home</b> </a> </td>
<td> <a href="website-planning.html"> <b> Planning</b> </a> </td>
<td> <a href="website-promotion.html"> <b> Promotion</b> </a> </td>
<td> <a href="building-income.html"> <b> Income</b> </a> </td>
<td> <a href="advanced.html"> <b> Advanced</b> </a> </td>
<td> <a href="web-tools.html"> <b> Tools</b> </a> </td>
<td> <a href="web-resources.html"> <b>Resources</b> </a> </td>
The cells contain text links to different Web pages. The <b> ... </b> HTML tags specify that the enclosed text should be rendered in boldface.

</tr>
</table>
Ends the row and the table respectively.

<p>
Instructs the browser to put a space between paragraphs here.

<font face="Verdana,Geneva,Arial,Helvetica,sans-serif" size=2>
This tag sets the typeface that will be used to display the text on the screen. In this example the text will be displayed in either Verdana, or Geneva, or Arial, or Helvetica, or sans-serif, depending on which fonts are installed on the system. Valid values for the size attribute range from 1-7. The default font size is 3.

The <i>HyperText Markup Language</i> is composed of a set of elements (HTML tags) that define a document and guide its display.
<br>
They may include a name, some attributes and some text or hypertext, and will appear in an HTML document as...
This is the actual text of the page. The <i> ... </i> tag tells the browser to italicize the enclosed words. The <br> tag specifies that a new line will be started at the given point.

</font>
</body>
</html>
Ends <font>, <body> and <html> tags respectively.

For more information on HTML tags, see a list of learning resources on the Net...
Resources: HTML Tutorials
or purchase a great book that provides a solid starting point for beginners who have no programming experience...

HTML: A Beginner's Guide, Second Edition
by Wendy Willard

See also...

HTML Codes
The basics of building Web pages, popular HTML editors.

HTML Validators
Professional-level tools to help you make your Web pages faultless and standards-compliant.

What's New

How to Create a Website
One-page guide for beginners.

Easy Website builders
Easy way to build a professional looking site for commercial use or just for fun.

Fast and free Internet accelerators
Comparison and reviews of the most popular Internet accelerators.

New Web-based approach to remote computer access

Basic HTML Tags

What's New

Sponsored links