Main Page | See live article | Alphabetical index

HTML tag

An HTML tag is a code used in the World Wide Web markup language HTML to denote the boundaries of an element, and, through its attribute values, set properties of that element. An element is usually a chunk of (marked-up) text: most elements can contain other elements. For instance, the <em> tag tells the browser that a certain chunk of emphasized text begins here. A browser may render this emphasis by displaying the text in bold print on the screen, or by pronouncing it louder than normal text through the computer speakers. Elements that can contain other elements also have a corresponding "end" tag, which is identical to the opening tag except that it begins with a slash (i.e. </em> for the emphasis tag).

Table of contents
1 Syntax
2 Basic tags
3 Header tags
4 Body tags
5 External links

Syntax

 <element-name attribute-name="attribute-value">content</element-name>
Note that HTML, but not XHTML, through some SGML features ("SHORTTAG") allows various abbreviated notations, which make the following equivalent:

 <ul>
 <li>Foo</li>
 <li>Foo</>
 <li>Foo
 <li/Foo/
 <>Foo
 </ul>
Furthermore the trailing angle bracket can be omitted when another opening one directly follows (<li<em>Foo</em</li> If an attribute can only take predefined values, the attribute name itself and the equals sign can be omitted (<p left>); when the only valid value is called the same as the attribute, you get "binary attributes" (<dl compact> = <dl compact="compact">). Browser support for these features is very limited, though.

Whenever an attribute requires you to specify a color (such as a text or background color), there are two ways to do this. The more flexible of these is hexadecimal RGB notation. A hexadecimal RGB color consists of six hexadecimal digits. The first pair of these signifies the brightness of the red-light component of the color; the second pair, the blue-light component; the third, the green-light component. By combining different values, 16 million colors can be defined. For the benefit of anyone not comfortable with hexadecimal RGB notation, there exists a set of conventional color names: the sixteen names specified in HTML 4.01 are:

NameHexadecimal RGB valueDecimal RGB valueExample
Aqua #00FFFF 0,255,255    
Black #000000 0,0,0    
Blue #0000FF 0,0,255    
Fuchsia #FF00FF 255,0,255    
Gray #808080 128,128,128    
Green #008000 0,128,0    
Lime #00FF00 0,255,0    
Maroon #800000 128,0,0    
Navy #000080 0,0,128    
Olive #808000 128,128,0    
Purple #800080 128,0,128    
Red #FF0000 255,0,0    
Silver #C0C0C0 192,192,192    
Teal #008080 0,128,128    
White #FFFFFF 255, 255, 255    
Yellow #FFFF00 255,255,0    

Most browsers also recognise additional color names, such as the ones in the so-called X11 Color Names.

Basic tags

<html>, </html>
Delimit a HTML document (i.e. instead of an XML or another class document).

<head>, </head>
Delimit the header section of the document, which contains information about the page.

<body>, </body>
Delimit the body section of the document, which contains the displayed content of the page.

Header tags

<title>, </title>
Delimit the page title. Depending on the browser and the operating system it shows up at various places, such as in the browser's title bar. in the task bar when the window has been minimized, as default for the name of the file when saving the page, etc.

Body tags

Text appearance (presentational)

<font>, </font>
Sets font sizes in seven intervals using the "size" attribute and the foreground color using the "color" attribute. from 1 to 7.

<b>, </b>
In bold type.

<i>, </i>
In italics.

<tt>, </tt>
Typewriter (fixed-width) fonts.

<pre>, </pre>
Preformatted text. (Text will be displayed in a non-proportional font exactly as it is laid out in the file). See : ASCII art.

Headings

<h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5>, <h6></h6>
Section headings at different levels; by convention, higher-level headings are displayed larger than lower-level headings. (h1 is the highest level, h6 the lowest)

Emphasis

<em>, </em>; <strong>, </strong>
Emphasis (conventionally displayed in italics) and strong emphasis (conventionally displayed bold).

Paragraphs and lists

<p>, </p>
Delimit a paragraph.

<br>
Inserts a line break.

<blockquote>, </blockquote>
Delimits a block quotation; conventionally displayed indented, but not to be misused to indent text. The "cite" attribute gives the source.

<dl>, </dl>
Delimit a definition list (consisting of definition terms paired with definitions).

<dt>, </dt>
Delimit a definition term.

<dd>, </dd>
Delimit a definition.

<ol>, </ol>
Delimit an ordered (numerated) list.

<ul>, </ul>
Delimit an unordered list (with points, not numbers).

<li>, </li>
Delimit a list item in ordered and unordered lists.

Links and anchors

<a href="URL">, </a>
Delimit an element that becomes a hyperlink with the "href" attribute set to a URL and becomes an anchor with the "name" attribute set, which precede by a hash sign acts as a link target.

Graphics

<img>
Includes an image with the "src" attribute, the required "alt" provides alternative text in case the image cannot be displayed.

<hr>
Inserts a horizontal rule.

Tables

<table>, </table>
Delimit a table

<tr>, </tr>
Delimit a row in the table.

<th>, </th>
Delimit a table header cell within a row; contents are conventionally displayed bold and centered.

<td>, </td>
Delimit table content cell within a row.

Frames

(Note: a HTML document may contain a header and a body or a header and a frameset, but not both.)

<frameset>, </frameset>
Delimit the frameset. The frames layout is giving by comma separated lists in the "rows" and "cols" attributes.

<frame>, </frame>
Delimit a single frame - or region - within the frameset. A different document linked with the "src" attribute appears inside.

<noframes>, </noframes>
Contains a normal body element with children what will appear in web browsers that don't support frames.

See also Framing#Websites.

Forms

Note: HTML can only specify the form appearance; processing of the user's input must be done with a server-side script.

<form>, </form>
Delimit a form.

<select name="NAME">, </select>
Create a menu list, from which the user can select a single option.

<option>, </select>
Delimit a menu option in a scroll menu or menu list.

<input type="checkbox">
Creates a checkbox.

<input type="radio">
Creates a radio button; if multiple radio buttons are given the same name, the user will only be able to select one of them.

<input type="submit" value="NAME">
Creates a send button.

<input type="image" border=0 name="NAME" src="name.gif">
Creates a send button using a image.

<input type="reset">
Creates a reset button (that resets the form to its default values).

<input type="text">
Creates a one-line text area. Size sets the long dimension in character-widths. Maxlength sets the maximum number of characters the user can enter (which may be greater than size).

<textarea>, </textarea>
Create a multiple-line text area specified by "cols" and "rows" attributes. Text in between the tags appears in the text area when the page is loaded.

External links