HTML Tags - From to
Created | Updated Mar 31, 2003
NOTE: This is not a GuideML guide. It is HTML only. Information on GuideML can be found here
The Word Wide Web Consortium sets HTML standards, and the current HTML specification can be found on their site.
The Basics
HTML stands for Hypertext Mark-up Language and is the language used to create webpages.
It is made up of a number of special tags; such as <I>, <U>, and <B>. Each tag consists of the tags 'name' and any attributes between < and >, i.e. <tagname attribute=value>. Most tags require a closing tag which is simply the name with a forward slash (/) before it, i.e. </tagname>. All the attributes are set in the opening tag.
Very few tags do not require a closing tag
All HTML documents must end in '.html' or '.htm', so 'page.txt' or 'page.html.txt' will not work.
Structure of a webpage
The content of a webpage (both text and tags) is contained within a pair of <HTML> tags. Next is a pair of <HEAD> tags. These contain information about the document that is not shown on screen (with the exception of the <TITLE> tag, which is used to define the title of the page that appears in the blue bar at the top of the browser. Finally, a pair of <BODY> tags contain the main content of the page that is to be shown on-screen.
<HTML>
<HEAD>
<TITLE>Page Title</TITLE>
</HEAD>
<BODY>
Page content
</BODY>
</HTML>
Tags
There are a large number of tags; the most common and useful ones are described below
Headings
<H1> to <H6> can be used to specify headings. <H1> is the largest, and <H6> is the smallest. The ALIGN attribute can be used to specify LEFT, CENTER, RIGHT, or JUSTIFY. If ALIGN is not set, the heading is aligned to the left. e.g.
<H1 ALIGN="RIGHT">This is the largest heading right aligned</H1>
<H3 ALIGN="CENTER">This is a medium heading centred</H3>
Hyperlinks
Links are defined with the <A> tag. The HREF attribute defines the destination for the link, and the text for the link goes between the opening and closing tags, e.g.
<A HREF="http://www.bbc.co.uk/h2g2">h2g2</A>
would become a link to the main page of this site
The optional TITLE attribute can be used to display a small message when the mouse pointer is pointing at the link, e.g.
<A HREF="http://www.bbc.co.uk/h2g2" TITLE="h2g2 - The Hitchhiker's Guide to the Galaxy">h2g2</A>
would make a link to the main page of this site with 'h2g2 - The Hitchhiker's Guide to the Galaxy' appearing when the cursor hovers over the link.
Paragraphs and line breaks
Paragraphs are defined using the <P> tag. This is one of the few tags that does not need to be closed, as when the browser gets to the next <P> tag, it assumes the previous paragraph has ended. However, it is good practice to close tags.
Text within the opening and closing <P> tags is displayed with a line break before and a line break after, so it is not necessary to put line breaks before or after the <P> tag.
<P>This will be a paragraph</P>
Line breaks are specified by the <BR> tag. It does not need to be closed, and is placed where the line break is required. The <BR> tag is the only way to force a line break, e.g.
There will be a line break here<BR>if this was in an html document
Simple formatting
There are three tags that can be used for simple formatting; <B>, <U>, and <I>. They have no attributes and need a closing tag.
<B> makes the text bold, <U> underlines the text, <I> puts the text in italics
<B>This text is bold</B>
This text is bold
<U>This text is underlined<U>
This text is underlined
<I>This text is italic<I>
This text is italic
Colours and fonts
Colours and fonts can be set using the <FONT> tag. The FACE attribute defines the font and the COLOR sets the colour, e.g.
<FONT FACE="Helvetica" COLOR="BLUE">The quick brown fox jumps over the lazy dog</FONT>
Would become "The quick brown fox jumps over the lazy dog", in blue.
Some 'major' colours can be specified by name (such as black, white, red, yellow), but most have to be set using their hexadecimal code; a # followed by a pair of hexadecimal digits for red, green, and blue (in that order), e.g. #FF0000 is red, #00FF00 is green, #0000FF is blue.
Hexadecimal numbers go from 0 to F, i.e. 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
Images
Images are inserted using the <IMG> tag. The SRC attribute defines where the picture is, in relation to the web page. i.e. if the page and the image are in the same directory, then only the image name is required in the SRC attribute. The ALT attribute specifies text to be shown while the image is loading or if the image cannot be found. The <IMG> tag does not need to be closed.
The width and height of the image do not need to be set in the <IMG> tag, as the size will be determined when the image is loaded; however it is possible to set them, in pixels, using the WIDTH and HEIGHT attributes
<IMG SRC="image.gif" ALT="An Image" WIDTH=100 HEIGHT=50>
Tables
Tables are contained within a pair of <TABLE> tags, rows are defined with <TR> and cells with <TD>.
Attributes for the <TABLE> tag include BORDER for setting the border of the table, CELLPADDING for setting the distance, in pixels, between the cell content and the cell border, and CELLSPACING for setting the distance between each cell, in pixels
<TABLE BORDER="1">
<TR>
<TD>Row 1, Cell 1</TD>
<TD>Row 1, Cell 2</TD>
<TD>Row 1, Cell 3</TD>
</TR>
<TR>
<TD>Row 2, Cell 1</TD>
<TD>Row 2, Cell 2</TD>
<TD>Row 2, Cell 3</TD>
</TR>
</TABLE>
will become
| Row 1, Cell 1 | Row 1, Cell 2 | Row 1, Cell 3 |
| Row 2, Cell 1 | Row 2, Cell 2 | Row 2, Cell 3 |
<TABLE>, <TR>, and <TD> must be closed
Lists
There are two main types of lists in HTML; numbered (ordered) and bulleted (unordered). In both types of lists, list items are defined by the <LI> tag. This does not have to be closed, but can be if desired.
Numbered lists are defined with <OL> and bulleted by <UL>. Both of these need to be closed at the end of the list. Lists are usually slightly indented on the page, and do not need to be enclosed in <P> tags.
Bulleted List:
<UL>
<LI>List Item 1</LI>
<LI>List Item 2</LI>
<LI>List Item 3</LI>
</UL>
- List Item 1
- List Item 2
- List Item 3
Numbered List:
<OL>
<LI>List Item 1</LI>
<LI>List Item 2</LI>
<LI>List Item 3</LI>
</OL>
- List Item 1
- List Item 2
- List Item 3
Finally
HTML tags are not case sensitive; <P></P> will work the same as <p></p>. However, try to be consistent.
