Most HTML tags come in pairs, an opening tag and a closing tag. They
surround and contain the part that they are labeling, like:
<p>Here is a paragraph.</p>.
The purpose is to tell what the logical function of that part is.
Document structure tags:
|Marks the headings and sub-headings of your document.
H1 is the
Browsers will usually make headings look different from regular
paragraphs and from each other by changing the size, boldness,
or font for the text. Headings usually have extra blank areas,
called white space, above or
below the text. Some programs can use the heading tags to make an outline or
table of contents.
|Marks a normal paragraph of text.
There is extra white space
between paragraphs compared with lines that just wrap in the window.
There are many other structural parts, like numbered lists, bulleted
lists, addresses, quoted material, tables, etc. Some of these will be
discussing a paired
tag, it is usual to just use the opening tag in the sentence and to drop the
< and > symbols, like "The BLOCKQUOTE tag is often mis-used to create an
Most browsers show EM text as italic.
|A stronger emphasis than EM.
Most browsers show
STRONG text as bold.
used to mark words or
phrases that should look different from regular text for a logical
reason. For example, a new term might be marked this way. The browser will
control exactly how these tags change the look of the text. Software that
reads text aloud knows to give vocal emphasis to words with these tags.
These tags let you change the look of your text. They are being replaced
with Cascading Style Sheets (CSS),
which is an advanced topic.
|Must include attribute(s) that set typeface, size,
<font size="3" face="Georgia" color="blue">
The FONT tag has been deprecated.
This means it is considered obsolete. At some point in the future browsers
may not even recognize the FONT tag.
A few tags do not have a closing tag in HTML. They stand alone.
|Inserts a line break in your text.
|Inserts a dividing line with blank space
above and below the line.
|A comment: Anything written between the
tags is ignored by the browser. Authors often write notes to
themselves inside these tags. They can help the author pick out the
parts of the page later when it must be edited.
|Contains information about where to find
an image file and how to display it.
<img alt="My dog" src="rover.gif" border="0"
Some tags do not label parts of the document itself. They give important
information to the browser. They do not do anything to the page that you see
in your browser.
Tells the browser or code-checking program what
version of HTML was used to write the source code. Many HTML editing
programs add one of these automatically. A browser will display the page
without this tag, but the results may not be what you intended. Most current browsers change the page display based on which DOCTYPE you use. Programs that check the code for accuracy need
this information to work properly.
Must come before the
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.0 Transitional//EN">
Required. Marks the start and end of the
HTML document. All other tags must be between these two except
Marks the start and end of directions to the
browser. Nothing in this section will display on the screen. Must come
before the BODY tag.
Surrounds text that will display in the browser's
title bar. Must be contained between the HEAD tags.
Required. Surrounds the material that will
display on the screen - text and images. Must be between the HTML
What Can Contain What?
elements are the tags that define sections of the document and,
generally, start a new line. This includes all the headings, the paragraph
tag, lists, and tables.
Tags that are not block elements, are called
These include the logical and character formatting tags.
When a tag contains other tags, we say that the tags are
Rules on Containment:
elements may contain both other block elements and also inline
Inline elements can only contain data and other
In some browsers, breaking these rules can make parts
vanish from your page!
Example: To display the sentence -
This is hard!
<p><b><i>This is hard!</i></b></p>
Block element P contains the inline elements B and I. Since the opening
order was P and then B and then I, the closing order is the reverse, I and then B
and then P.
<b><i><p>This is hard!</p></i></b>
Containment error: Inline elements B and I contain block element