Major HTML Tags

This list below contains all the major text tags. For information on FORMS, which don't just work on HTML, contact Andy. For information on META tags see this webpage. For a complete list of tags, including ones no long used, see this w3 consortium page. Don't use deprecated tags.

Tags (or "elements") are traditionally divided into those that deal with blocks, like paragraphs, and "inline" tags that deal with stuff you can put inside lines of text. Most block level tags can contain the attribute align, set as align=left or right or center. When you can set the size of objects they're usually expressed as pixels or percentages of the screen or enclosing object.

Just because tags are listed below, it doesn't necessarily mean that you should use them. Read the notes carefully to see if they're worthwhile. If you want to see what the tags look like with the School's stylesheet on them, check out this page.

Essential tags are immediately below, but further down there are also sets of tags for text formating, hypertext functions (images, lines, links), special text blocks (headers, blockquotes), tables and lists.

Essential Tags Example HTML How it looks (styled)

<HTML> <HEAD></HEAD> <BODY></BODY> </HTML>
The basic webpage, with HTML tags surrounding an unshown head area which contains information about the page and a body area that contains the actually page. The head can contain LINK and META but often just contains the <TITLE></TITLE> tags, text between which shows at the top of the browser. <HTML> <HEAD> <TITLE>Major HTML Tags</TITLE> </HEAD> <BODY> See the title for this page! </BODY> </HTML> See the title for this page!

<LINK>
Links to another file from the head section. Most often used to link to a stylesheet. <LINK rel="stylesheet" href="http://www.geog.leeds.ac.uk/style/docstyle1.css" type="text/css"> The link used in School pages.

Text Formatting Tags Example HTML How it looks (styled)

 
Breaks a line This breaks here and continues. This breaks here
and continues.


Puts in a line before and after text

Eachwordaparagraph

Each

word

paragraph


Puts text in bold. Here's a bold example. Here's a bold example.


Puts text in italics. Here's an italics example. Here's a italics example.


Characterises important text, often rendered as bold, but can be rendered differently by stylesheets and speaking browsers. Here's a strong example. Here's a strong example.


Emphasises text, often rendered as italics, but can be rendered differently by stylesheets and speaking browsers. Here's an emphasis example. Here's an emphasis example.

<CODE></CODE>
Used to mark up computer code, often rendered as "monospaced" typewriter type. Here's a <CODE>code</CODE> example. Here's a code example.

<SAMP></SAMP>
Used to mark up sample outputs from computer programs etc. Here's an <SAMP>sample</SAMP> example. Here's an sample example.

<KBD></KBD>
Used to mark up keyboard inputs, i.e. stuff you want people to type or do, often rendered as typewriter type. Here's a <KBD>keyboard</KBD> example. Here's a keyboard example.

<S></S>
Strikethrough text: puts a line through text - rarely used. Here's an <S>strikethrough</S> example. Here's an ~~strikethrough~~ example.


Underline text: this should never be used, as people browsing will assume anything underlined is a link and try repeatedly to click on it. Here's an evil underlined example. Here's an evil underlined example.

 <BIG></BIG>
Unsurprisingly enough, make text smaller or bigger. Not well supported in browsers so rarely used. Here's a small and <BIG>big</BIG> example. Here's a small and big example.

<ABBR></ABBR> <ACRONYM></ACRONYM>
Rarely used tags to mark up abreviations and acronyms. Not well supported in browsers so rarely used - they should allow the browser to show the full term by using the title attribute. Here's an <ABBR title="Abbreviation">abbr.</ABBR> and <ACRONYM title="Acronym Example">AE</ACRONYM> example. Here's an abbr. and AE.

 
Superscript and Subscript respectively. Maths is notoriously badly supported in HTML (equations are usually put in as images) but these do work. y1 = y2 + x2 y₁ = y₂ + x²

&;
The special character markers. These are used to include characters that might confuse the browser and characters that aren't covered by all western keyboards. Each special character has a number prefixed by a the US number symbol # but some also have names which are easier to remember. For example,   is   the "non-breaking" space, which puts in a space the browser can't wrap onto a new line between words. Here's some examples: &, <, >, %, £ Here's some examples: &, <, >, %, £

Miscellaneous Hypertext Tags Example HTML How it looks (styled)

<A></A>
The Anchor tag, used to put in links. The hypertext reference attribute href is used to give the address. This can be replaced by nohref to disable the anchor. In addition you can use the name attribute to make a target for an area within a page like this <A name=here></A> and link to it with the page name (if in another page) and the name prefixed with a hash, like this <A href="this.html#here>go here</A>. However, unless the page is a list of items, the need for such "targets" is usually a sign the page is too long and complex. Here's two <A href="links.html">link</KBD> <A nohref>examples</KBD>. Here's two link examples.

<IMG></IMG>
The Image tag, used to put in pictures. The source reference attribute src is used to give the address. You should also supply a height and width so the browser can render the page correctly before the image is downloaded, and an alt attribute for blind browsers. Here's an <IMG src="image.jpg" width=64 height=29 alt="icon: picture of the word image."></IMG> Here's an

<HR>
The Horizontal Rule tag, used to put in lines.

Here's an <HR> example.

Here's an

example.

<FRAMESET> <FRAME></FRAME> </FRAMESET>
Tags for making "frames", which is when the browser window is broken up into separate areas. The go against most accessibility guidelines so should be used with extreme care and reluctance For more on frames, see this page.

Tags for Special Text Blocks Example HTML How it looks (styled)

<H1></H1>
The Header tags used to mark up headers. These are usually rendered with a blank line before and after them. They go from H1 (largest) to H6 (smallest)

<H1>Big Header</H1><H6>Little Header</H6>

Big Header

Little Header

<ADDRESS></ADDRESS>
Used to mark up address information. Usually rendered as italics, but with the additional property that it can be automatically processed/replaced.

<ADDRESS>

School of Geography<BR>

University of Leeds<BR>

</ADDRESS>

School of Geography
University of Leeds

<PRE></PRE>
Used to mark up preformatted text. Unlike most HTML this is rendered with the format it is typed in the source file.

<PRE>

   Lorem ipsum dolor sit amet,

consectetuer

adipiscing   elit

sed diam nonummy nibh euismod
 
   tincidunt ut laoreet dolore
 
magna aliquam erat volutpat.
 
</PRE>


   Lorem ipsum dolor sit amet,
consectetuer
adipiscing   elit
sed diam nonummy nibh euismod 
   tincidunt ut laoreet dolore 
magna aliquam erat volutpat.

<BLOCKQUOTE></BLOCKQUOTE><Q></Q>
Used to mark up blocks of quoted text and quotes within lines respectively. Usually blocksquotes are indented. Q quotes should have quote marks automatically added, but many browsers don't.


Linda, Vivian's friend for 25 years said...
 
<BLOCKQUOTE>

He did drink lighter fuel and he did used to go and recite to the wolves in 
Regents Park. And he used to eat dog buscuits in Camden when he had no money. If it was a choice 
between drink and food, then I think they all would have chosen drink...Drink - you know, 
<Q>the finest wines known to humanity</Q> was very much the preferred intoxicant.
  
</BLOCKQUOTE>.

Linda, Vivian's friend for 25 years said...

He did drink lighter fuel and he did used to go and recite to the wolves in Regents Park. And he used to eat dog buscuits in Camden when he had no money. If it was a choice between drink and food, then I think they all would have chosen drink...Drink - you know, the finest wines known to humanity was very much the preferred intoxicant.

<DIV></DIV>
Tag to delimit a general block of text. Often rendered as a paragraph. The advantage of a DIV is largely in stylesheets, where they can be given a background colour different from the rest of a page, however, they can also be given a align attribute set to align = center to center text, or left and right. In stylesheets you can also justify DIV text.

<DIV align=center>

Lorem ipsum dolor sit amet, consectetuer<BR>

adipiscing elit sed diam nonummy nibh euismod<BR>
 
tincidunt ut laoreet dolore magna aliquam erat volutpat.

</DIV>

Lorem ipsum dolor sit amet, consectetuer
adipiscing elit sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat.


The same thing as DIV but for general areas within a line. Displayed as normal text and therefore rarely used. Check this out. Check this out.

Table Tags Example HTML How it looks (styled)

<TABLE></TABLE>
Used to mark up Tables. Used with TR, TD and TH tags. Can have a width attribute, but also border set to some pixel size (border = 0 for an invisible table) and cellspacing and cellpadding attributes which set the space around and within Table cells respectively. The <CAPTION></CAPTION> tags can be used for captions immediately after the table tag, though this is rare. Tables can be nested.


<TABLE border=1 cellspacing=7 width=200>

<CAPTION>Table Two: Example</CAPTION>

<TR>

<TD>Cell 1</TD>

<TD>Cell 2</TD>

</TR>

</TABLE>

Table Two: Example
Cell 1	Cell 2

<TR></TR> <TD></TD> <TH></TH>
Used to mark up Table rows, data cells and header cells respectively. Cells can have a width in pixels or percentage of the table. To skip rows cells can have a rowspan attribute, and to skip columns a colspan attribute.


<TABLE border=1 width=200>

<TR>

<TH colspan=2>Header</TH>

</TR>

<TR>

<TD rowspan=2>Cell 1</TD>

<TD>Cell 2</TD>

</TR>

<TR>

<TD>Cell 3</TD>

</TR>

</TABLE>

Header
Cell 1	Cell 2
Cell 1	Cell 3

List Tags Example HTML How it looks (styled)

<UL></UL>
Delimits an unordered, i.e. bullet-point, list. The default is usually rendered with filled disk, but can by used with the type attribute set as type = square, disk, or circle to specify the type. List items are delimited with the <LI></LI> tags.

Example of an

<UL type=circle>

<LI>Unordered</LI>

<LI>List</LI>

</UL>

and items.

Example of an

Unordered
List

and items.

<OL></OL>
Delimits an ordered, i.e. numbered, list. The default is usually rendered with arabic numerals, but can by used with the type attribute set as type = I, i, or 1 to specify the type. List items are delimited with the <LI></LI> tags. You can start the numbering at a particular place using the start attribute set to, for example start=10.

Example of an

<OL type=I start=104>

<LI>Ordered Roman</LI>

<LI>List</LI>

</OL>

and items.

Example of an

Ordered Roman
List

and items.

<LI></LI>
Delimits a list item. The default rendering for each item can be overridden with the type attribute as above. Items can also be new lists, to create sub-lists.

Example of a

<OL>

<LI>Ordered List</LI>

<LI>containing</LI>

<UL>

<LI>an unordered</LI>

<LI>list</LI>

</UL>

<LI>as a sub-list</LI>

</OL>

Example of an

Ordered List
containing

an unordered
list

as a sub-list

<DL></DL>
Delimits a definition list of terms and explainations. Definition Terms are delimited by the <DT></DT> tags, while each has a separate item specifying the Definition using the <DD></DD> tags.


<DL>

<DT>Term 1</LI>

<DD>Definition of Term 1</DD>

<DT>Term 2</LI>

<DD>Definition of Term 2</DD>

</DD>

Term 1: Definition of Term 1
Term 2: Definition of Term 2

[School of Geography homepage] [Leeds University homepage]