BBC - h2g2 - HTML Tags

The World Wide Web Consortium sets HTML standards and the current HTML specifications can be found on their site.

The Basics

HTML stands for HyperText Mark-up Language and is the 'code' 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 tag's 'name' and 'attributes' between < and >. A generic tag would, therefore, be <tagname attribute=value>. Most tags require a closing tag which is simply the name with a forward slash (/) before it: </tagname>. All of the attributes are set in the opening tag and almost all tags must be closed.

All HTML documents' filenames must have the extension '.html' or '.htm'. 'Page.txt' or 'Page.html.txt' will not be correctly displayed by a browser.

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 so only the most common ones are described below.

Headings

<H1> to <H6> are the tags used to specify headings. <H1> produces the largest heading text; <H6> the smallest text. 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.

<H1 ALIGN="RIGHT">This would be the largest possible heading, right aligned</H1>
<H3 ALIGN="CENTER">This would be a medium-sized 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.

<A HREF="http://www.bbc.co.uk">BBC</A>

This would create a link to the BBC homepage.

The optional TITLE attribute can be used to display a small message when the mouse pointer is pointing at the link.

<A HREF="http://www.bbc.co.uk" TITLE="The BBC Homepage">BBC</A>

This would create a link to the BBC homepage with 'The BBC Homepage' 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 that the previous paragraph has ended. However, it is good practice to nevertheless close each tag. Text within the opening and closing <P> tags is displayed with a line break before and after it, so it is not necessary to put line breaks before or after the <P> tag.

<P>This would 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. For example:

There would be a line break here<BR>if this were 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; and <I> puts the text in italics.

<B>This text would be in bold</B>
<U>This text would be underlined</U>
<I>This text would be in italics</I>

Colours and fonts

Colours and fonts can be set using the <FONT> tag. The FACE attribute defines the font and the COLOR¹ defines its colour.

<FONT FACE="Helvetica" COLOR="BLUE">The quick brown fox jumps over the lazy dog</FONT>

This would insert the text 'The quick brown fox jumps over the lazy dog' in blue using the font 'Helvetica'.

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). For example, #FF0000 is red; #00FF00 is green; #0000FF is blue.

Images

Images are inserted using the <IMG> tag. The SRC attribute defines picture's source, in relation to the web page. If the page and the image are in the same directory, 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. It is, however, possible to manually set them, in pixels, using the WIDTH and HEIGHT attributes.

<IMG SRC="image.gif" ALT="An Image" WIDTH=100 HEIGHT=50>

This would insert 'image.gif' sized 100x50 pixels with the alternative text 'An Image' into the document.

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>

This would create a table similar to:

Row 1, Cell 1 Row 1, Cell 2 Row 1, Cell 3
Row 2, Cell 1 Row 2, Cell 2 Row 2, Cell 3

All <TABLE>, <TR>, and <TD> tags must be closed.

Lists

There are two main types of lists in HTML; bulleted (unordered) and numbered (ordered). 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>

This would be displayed as:

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>

This would be displayed as:

List Item 1
List Item 2
List Item 3

Case sensitivity

HTML tags are not case sensitive; <P></P> and <p></p> both work in identical ways. In this entry, all the example HTML tags have been uppercase so they could be easily distinguished from the example text. However, it is good practice to be consistent and, arbitrarily, most webpages tend to be coded solely with lowercase tags.