|Basic html tags
By Chris Harvey
Even if you're going to be using a Web-editing tool such as Dreamweaver or a content management tool such as WordPress to build your pages, it's good to know how to create and recognize the basic html tags that are used as the backbones of your pages.
Hypertext Markup Language is an evolving language used to create,
link and view documents on the Internet. HTML 4.01 is being overtaken by XHTML and HTML 5.0, but the evolution has been gradual. HTML is also complemented by Cascading Style Sheets (CSS), which help to control the look of text and the design of a Web page.
For today, we'll focus on simple HTML as a starting point. In subsequent sessions, we'll look at cascading style sheets, which are linked to a series of Web pages to control the look and style of them all.
HTML documents rely on inserted codes, or tags, to tell the computer how to display the information when viewed with a Web browser, such as Mozilla
Firefox, Safari or Microsoft's Internet Explorer. You can use a number of simple text editors to create
html code for a Web file. However, many of these text editors, such as Wordpad and Word, insert undesirable coding into your html file.
To avoid this problem, we'll use Notepad for this exercise. It won't insert unintended code. (You may also use TextWrangler on a Mac.)
Notepad is often buried in your computer's software under Accessories.
To get there on a PC, try clicking on your bottom
tool bar's Start button, then move your mouse to Programs, then Accessories. You should
in the next popup. (You can find TextWrangler in a Mac's Applications area.)
You'll be formatting your Web document with tags, created with less than
and greater than symbols <> and words or letters sandwiched between those symbols.
Most html elements have a start tag <>and an end tag, which includes a forward slash after the first less-than symbol: </>.
It's a good idea to type the letters and symbols comprising your tag
commands in lowercase letters, to conform to the latest coding formats.
Letís create a Notepad file. If you're taking JOUR 202 or a short tutorial,
please save it c:\lastname.html
(thus putting it on your computer's hard drive), or a:\lastname.html,
if you choose to save it on a disc to take the work home with you. If you're
taking JOUR 352/652, please save it as h:\lastname-resume.html,
thus saving the work in your own class work area. You need to be logged in
to our class network before saving to h. If you're on a Mac, you could save it to your Desktop, then move it into your personal work folder.
Please type the document name all in lowercase letters.
Beginning at the top of
your open document, start creating the skeleton of your html file, by typing
each of these structural tags on a separate line:
You have created
What you should notice
first of all is that html opening and closing tags are used in pairs. The
first tag in your file, to start the page of text and codes, should be <html>; the last tag
should be </html>.
PLEASE NOTE that in newer versions of html or xhtml, the html tag is preceded by a longer string, called a document declaration. I don't expect you to memorize the document declaration; it will pop up automatically in Web editor tools. I simply expect you to know that "html" is part of the tag, and it describes what type of a page you are creating. Here's what a document declaration might look like:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
When coding with html tags, ORDER MAKES A DIFFERENCE. Tags are generally nested on a page:
then <b>, followed by </b>, then </a>.
So if you have a string of code surrounding a sentence or phrase, you'd close each tag
in the reverse order that you typed it.
Ex: <p><i>The Artful
The head tag defines the top of your page. Itís where you type the title, which
will show up at the top of your Web browser to identify your page and help search engines find your page, and other advanced
formatting information called Metatags.
Metatags help search engines to
find relevant Web pages for a particular query. They also contain descriptive information about your page that would be displayed in a search query.
confuse the header with a headline. Theyíre not the same. A headline will
appear in the body area.
The title area is very important to your document! In most browsers,
words typed here will show up in the title bar at the very top of the
screen. The title bar identifies your page. The title is also used by search indexes
and engines such as Yahoo! to help locate your document
on the Web. And words in the title area will show up in bookmarks you create, to
help you return to favorite pages. So choose your words carefully. Make the title
succinct, but informative. Donít use symbols, colons or backslashes in
it. Three to five words for a title would be a good choice.
If you're creating a resume, go ahead and type a
title into the title area of your document. Because we're about to type a
resume, it should include your first and last name and the word "resume," as in: Chris Harvey's resume.
The body area of
your page is where your main page content appears, such as headlines, section
subheads and codes for pictures and graphics and layout.
Here are some basic tags you'll need to know before creating your first page in class, a resume:
<p> creates a line of space between lines of text; close it with </p>.
<p align=center> centers the text that follows it; close with a </p>
<center> allows you to center text without the p space; close with a </center>
<br /> drops your cursor to the next line, without creating a line of space. It does not need a separate closing tag.
<b> or <strong> bold words; close with </b> and </strong>.
<i> and <em> italicize words; close with </i> and </em>.
way to create headlines is with tags ranging from h1, the largest, to h6, the smallest.
Some of you may be familiar with point sizes for headlines in newspaper
or magazine page layouts. H1 on a PC
is equal to about 24 points of type. h2 is roughly 18 points, h3 14 points, h4 12 points,
10 points, h6 8
Top of Page
You can combine these headline prompts with an align prompt to either center
your type or to flush it left or right. So to center your headline--or your name
on your resume--and size it at 18 points (h2), here's what you'd type:
Type <h2 align="center"> before the first name. Immediately after
your last name, type </h2> to create the closing
Because youíve typed a
headline, a paragraph break is understood in the command and doesnít need to be
typed after the closing tag. A boldface is also understood in the headline command, without being
explicitly typed, so it does not need to be typed before the name.
Let's use the headline tags to type resume categories, starting with
Surround the words with html tags to create a paragraph break between
this phrase and your name. Try the <H3> tag.
Notice that we didn't include an align="left" command in our <p>
tag. The computer will automatically align your type left, unless you give it a
different alignment command, such as center. We also failed to put in a color
command. The computer will automatically make the text black, unless
Below that Work Experience line, type in a
sentence or phrase about your current job. Iíd recommend using an Italics tag
<i> or <em> when naming the newspaper or broadcast outlet you work for. Or
you could boldface it. To activate either command, youíll need to surround
it with the less-than, greater-than symbols, as in <b> or <i>; you'll also need to close the tags
with a </b> or </i> after the last word
you want bolded or italicized.
Maryland Philip Merrill College of Journalism</i>, July 1998 to present: Full-time
If you have more to add here, type it now. If you have a second paragraph, remember to start and finish
this paragraph with <p> and </p> tags.
If, however, you simply wanted to drop your type to the next line, without any space between your lines of text, you'd type
br, enclosing it in
<>. Example: <br / >.
This is a line break, rather than a paragraph break.
A <br /> tag is
opened and closed in the same tag.
But before you go on,
letís again save your work in Notepad, so we don't lose it.
Remember to keep your file name
lowercased and to use your last name and a .html extension. And let's minimize
our Notepad file, double-click on the minimized browser on the tool bar,
refresh that page and view our latest work.
Creating basic hyperlinks and
To create a hyperlink, you need to know the Web address for
the page you want to send users to. In this case, the College of
Journalism home page is http://www.merrill.umd.edu/. The best practice is to cut or copy the Web address, or URL,
from the "Location" area at the top of your browser, pasting it
right into your document. This way you won't mistype the address.
Once you know the URL, it's easy to create the
link. (To copy it in a PC, you can shade it with your mouse and type Ctrl C. To
paste it in, you can use Ctrl V On a Mac, it's Command C and Command V.)
the words "University of Maryland College of Journalism," I'll
create the tag by typing:
The full URL is
dropped between the quotation marks inside the tag.
After the word "Journalism,"
I would then close the hyperlink, with </a>.
A link off your
site, using the full Web address, is called an absolute link. It is
the full address.
Large sites typically use partial, or relative links,
for story files within a section, to make it
easier to move the files to another section should the site be redesigned.
Relative links generally only consist of the page name, skipping the main
part of the Web address, called the domain name.
A quick tip: To open
up a new browser window from your link, include as an
attribute in the <a href> tag. So it's: <a href="http://www.merrill.umd.edu"
target="_blank"> to pull up the College of Journalism home page in a new
important hyperlink for Web resumes is the one for your e-mail address,
which you'll likely want to center below your name at the top of your
resume. Here's the code I'd use to create my link:
to type your link, substituting your e-mail address in the two spots.
One last note about identifying
yourself on a Web resume. Centered below your e-mail address, you
may want to add a work phone number. I do not recommend putting home phone
numbers or home addresses on Web resumes. You'd be giving too many people
easy access to this personal information.
Links within documents, or
be used to send readers from one spot on a Web page to a different place on
the same page--although occasionally they are used to sed readers to a spot
below the top of another page. The bulleted links in the left-hand column of
this page are examples of these jump-down, or anchor links.
When creating an anchor link,
it's a two-step process. First you must create a
link--the words users will click on. It should include a # symbol at the
start of the URL. (You may use a partial, or relative link, if you're simply
jumping readers around on the same page.) Then you must code in the anchor, or
the spot on the page where you'll send readers to.
Example: To jump the reader down from the top of this page to the above
subhead on anchor links, I typed the link information (see below) at the top
of the page, and the anchor information next to the subhead. Only the link
line will appear underlined.
Link: <a href="#anchorlink">Anchor
Anchor: <a name="anchorlink">Links within documents, or
To create a bulleted list (using indented cirecles) on a Web page,
start with a <ul> tag (for unordered list); start each item with an <li> tag (for list item). Open and close each, nesting your tags. Your code would look like this:
<li> apples </li>
<li> peaches </li>
<li> pears <li>
Creating a horizontal
A horizontal line, or rule, can create a tidy break between sections or paragraphs.
As with the line break, no end tag is needed
to close this tag.
Type HR, for horizontal rule, and enclose the two letters in carots:
<hr />. Notice that the horizontal rule tag opens and closes in the same tag.
Before the greater-than
symbol, you can type additional words, called attributes, to alter the height and width of the rule.
size="x" gives you a height in pixels (a pixel is roughly
equal to one point in size); width="x" gives you the width of the rule in pixels. Or
you can type the width as a percentage of the width of your page, as I did
Align="direction", as in center, left or
Noshade gives you a solid bar, with no shading, when the rule is viewed in
So a full tag for a horizontal rule could look like
<hr size="5" width="50%" align="center" noshade />
Adding photos and graphics to a page:
Once you have downloaded, sized and
cropped a photo or graphic for use on your pages, you can type in a tag to call
that image onto your Web page.
The tag you'll need is an image source tag, or <img
To correctly write this tag, you'll need to know the Web address of the image,
and its width and height. You should also add an ALT attribute inside your tag,
describing the image. To call in a frog graphic with a Web address of
http://www.newsline.umd.edu/Harvey/frog2.gif, a width of 200 pixels, and a
height of 155 pixels, here's what you'd type inside the tag:
width="200" height="155" alt="cute frog" />
To figure out the width and height of an image,
right-click on it. (On a Mac, then click on "Get Info," "More Info. The width is shown first, in pixels."
To link that image to another page, simply add a
link tag before the image source tag, then close the link tag after the image
source tag. So to send users from the frog image to a page about frogs, I'd
width="200" height="155" alt="cute frog" /></a>
Checking out others' work:
You can check out the code on others' work. If you're in Internet Explorer, for instance, with salon.com's home page open, go to the top of your Browser and
"View," then "Source." This will show you all the code used to create the page.
Be aware that stealing large chunks of another site's code is unethical and
often illegal; you're stealing their copyrighted design work. Also be aware
if the site is copyrighted, it's a copyright violation to lift text, photographs
But looking at someone else's code to learn from it is
Free Code and Tutorials on the Web
Some sites on the Internet do offer tutorials or coding help for free. HTML Goodies offers tutorials, as does and W3 Schools. Sites with free code include FreewareJava.com's news tickers.
Created January 2001. Last updated: .
Sept. 6, 2012
Copyright © 2001 and 2002, 2003,
2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012 Chris Harvey. Reproduction in whole or in part without permission is prohibited.