Step 4: Basic HTML Tags for Text
HTML tags tell a browser how to present a page, including its text, images
and multimedia.
For example, a title for a document would look like:
<title>My First HTML Document</title>
Notice that each of the two tags is enclosed in < > symbols and
the closing tag starts with a forward slash (/) to end the tag's action.
HTML tags are not case-sensitive, but using lower case is preferred.
However, in the newer XHTML, not covered in this tutorial, every tag must
be lower case and have an ending tag. So it would be to your advantage
to get into the habit of using only lower case from the beginning.
Except for preformatted text, HTML collapses multiple consecutive spaces
to a single one and ignores blank lines. However, when you write your
HTML source document, insert several blank lines between paragraphs to
make editing easier.
Here are some of the basic HTML tags for text:
HTML tag
The <html> tag marks the beginning of a document that's to to be
interpreted as HTML. Place it on the first line of your document and the
</html> tag on the last line.
Head tag
Just like the header of a memo, the head of an HTML document contains
special information, such as its title. The head is demarcated by <head>
and </head>, respectively.
For the purposes of this tutorial, only the title tag, covered next,
should be included in the document head. A typical head section might
look like
<html>
<head>
<title>My First HTML Document</title>
</head>
Title tag
A title tag allows you to specify a document title that will appear in
the browser window. When someone adds a document to a list of favorites
or bookmarks, this title appears in the list. The format is:
<title>My First HTML Document</title>
Note that the title usually doesn't appear in the document itself, but in
a title box or bar at the top of the window.
Body tag
As you might expect, the tags <body> and </body> define the
beginning and end of the bulk of your document. All your text, images
and links, i.e., everything on your page that is displayed in a browser,
will be in the body, which should start after the head. A typical page
would have this structure:
<html>
<head>
<title>My First HTML Document</title>
.
.
</head>
<body>
.
.
All the page content that you want to be displayed will go here.
.
.
</body>
</html>
Header tags
Up to six levels of headers are available. Header 1 is the largest, and
they get progressively smaller through header 6. Here is how they usually
appear in relation to one another:
<h1>This is a header 1 tag</h1>
This is a header 1 tag
<h2>This is a header 2 tag</h2>
This is a header 2 tag
<h3>This is a header 3 tag</h3>
This is a header 3 tag
<h4>This is a header 4 tag</h4>
This is a header 4 tag
<h5>This is a header 5 tag</h5>
This is a header 5 tag
<h6>This is a header 6 tag</h6>
This is a header 6 tag
In addition to varying in size, headers are bold and have a blank line
inserted before and after them. It's important to use headers only for
headings. Later we'll cover a separate tag for making text bold.
Paragraph tag
Every paragraph of "normal" text, i.e., one that doesn't already have
a tag associated with it, should be enclosed between a <p> and a
</p> tag.
<p> causes a line break and adds a trailing
blank line
<br> causes a line break with no trailing
blank line
As a convenience to yourself and others who might have to edit your HTML
documents later, it's a very good idea to insert two or three blank lines
between paragraphs to facilitate editing.
Preformatted text tag
The preformatted text tag displays your text just as you typed it, retaining
all the spaces, lines and tabs. Using this tag is the only way to prevent
browsers from collapsing multiple spaces or tabs into a single space.
Preformatted text looks like a courier font.
<pre>
this is
an example
of a
preformatted
text tag
</pre>
Here's how it displays:
this is
an example
of a preformatted
text tag
Boldface and italics tags
To add emphasis to text, use the boldface and italic tags or the emphasis
and strong tags.
There is also an underline tag, but in an HTML document, underlined text
is too easily confused with a link and should be avoided.
When using these tags, you usually cannot (and probably should not) have
text that is both boldface and italics; the last tag encountered is usually
the one that's displayed. For example, if you had a boldface tag followed
immediately by an italic tag, the tagged text would appear in italics
only.
- Physical tags
- This is a <b>boldface</b> tag.
- This is how boldface appears.
This is an <i>italics</i> tag. - This is how italics appear.
- Logical tags
- This is a <strong>strongly emphasized</strong> tag.
- This is how strongly emphasized text appears.
This is an <em>emphasized</em> tag.
- This is how emphasized text appears.
There is a subtle distinction between the above "physical" tags, which merely
change the displayed font, and "logical" ones which are used (or eventually
will be) to make types of emphasis browser-specific (e.g., using the <em>
tag to make text red). Either style is fine now, but be aware that differences
between them may become more important as HTML advances.
List tags
In HTML it's easy to have numbered, unordered and definition lists. In
addition, you can nest lists within lists. There is a standard spacing
between the bullet or number and the list item.
Unordered (bulleted) lists
Unordered lists begin with the <ul> tag and end with
the </ul> tag. Each individual list item is enclosed by a <li>
and a </li> tag.
For example, here is an unordered list with three items:
<ul>
<li> list item 1</li>
<li> list item 2</li>
<li> list item 3</li>
</ul>
Here is how that list would display:
- list item 1
- list item 2
- list item 3
Ordered (numbered) lists
Here is the same list using a ordered list format:
<ol>
<li> list item 1</li>
<li> list item 2</li>
<li> list item 3</li>
</ol>
Here is how that list would display:
- list item 1
- list item 2
- list item 3
Definition lists
Definition lists allow you to indent without necessarily having
to use bullets.
<dl>
<dt> This is a term </dt>
<dd> This is a definition </dd>
<dd> And a second definition</dd>
<dt> Another term </dt>
<dd> Another definition </dd>
</dl>
And here is how this would be displayed
- This is a term
- This is a definition.
- And a second definition.
- Another term
- Another definition
Nested lists
Finally, here is an ordered list nested within an unordered
list. (We could have had an unordered list nested within an ordered list
just as easily.)
<ul>
<li> list item 1</li>
<ul>
<li> nested item 1</li>
<li> nested item 2</li>
</ul>
<li> list item 2</li>
<ul>
<li> nested item 1</li>
<li> nested item 2</li>
</ul>
<li> list item 3</li>
<ul>
<li> nested item 1</li>
<li> nested item 2</li>
</ul>
</ul>
Here is how that list would display:
- list item 1
- nested item 1
- nested item 2
- list item 2
- nested item 1
- nested item 2
- list item 3
- nested item 1
- nested item 2
Blockquote tag
The blockquote tag indents text on both the left and right and inserts a
blank line before and after the text. It looks like this:
<blockquote>...</blockquote>
and displays like this:
Blockquoted text is often used for indenting big blocks of text
such as quotations. The text will be indented until the ending tag is
encountered. Note that the text here is indented from both the left and
the right margins.
Center tag
You can center text, images and headings with the center tag:
<center>This is a centered sentence</center>
This is a centered sentence.
The center tag automatically inserts a line break after the closing
center tag.
Horizontal rule (line) tag
To separate sections in a document, you can insert a horizontal rule
tag <hr>, which displays as follows:
Address tag
The <address> tag normally appears at the end of a document and
is usually used to provide a way to contact the author or institution
supplying the document. Text contained within the address tag appears
in italics. This is another logical tag; it currently only italicizes
text, but this could change as HTML advances.
Here's an example of an address tag:
<address> Introduction to HTML / Pat Androget
/ Pat_Androget@ncsu.edu / last updated June 4, 2003</address>
And it would appear as:
Introduction to HTML / Pat Androget / Pat_Androget@ncsu.edu
/ last updated June 4, 2003
Comment tag
It is possible to include text in an HTML source document that does not
appear when viewed with a browser. This is most useful for providing comments,
warnings and special instructions to future editors of your document.
Comments take the form:
<!-----This comment will not appear in the browser----->
The comment can even break lines
<!----This comment won't be seen by
anyone either, even though it contains a line break--->
Codes for special characters
Finally, if you need to display the characters which make up HTML tags
(such as <, > and &), or if you use special characters not in
the ASCII standard, then you'll need codes to create them. Here are some
characters and their respective codes:
| Character |
Code |
|
Character |
Code |
| á |
á |
|
ñ |
ñ |
| â |
â |
|
ó |
ó |
| æ |
æ |
|
ò |
ò |
| à |
à |
|
ø |
ø |
| å |
å |
|
ô |
ô |
| ã |
ã |
|
ö |
ö |
| ä |
ä |
|
ú |
ú |
| ç |
ç |
|
û |
û |
| é |
é |
|
ù |
ù |
| ê |
ê |
|
ü |
ü |
| è |
è |
|
ÿ |
ÿ |
| ð |
ð |
|
& |
& |
| ë |
ë |
|
> |
> |
| í |
í |
|
< |
< |
| î |
î |
|
" |
" |
| ì |
ì |
|
ß |
ß |
| ï |
ï |
|
þ |
þ |
Go on to Step 5: HTML tags for images
Go back to Step 3: Creating your pages
Return to the Introduction
Last modified
July 13, 2004
by cawalker
|
Page Top
| OIT
| PolicyDisclaimer
