Personal tools
  •  

HTML Tags

Document Actions
  • Content View
  • Bookmarks
  • CourseFeed
Title Description
A <a>...</a>

Usage: Used to define links and anchors

Start/End Tag: Required/Required.

Attributes:

name="..." - Defines an anchor.

href="..." - The URL of the linked resource.

target="..." - Determines where the resource will desplayed (user-defined name, _blank [in a new unnamed window], _parent [in the immediate parent frameset], _self [in the same frame as the current document], or _top [in a full browser window that removes the frameset completely]).

Example:

Linking to another URL:

<a href="http://www.usu.edu">Utah State University's Website</a>

Linking to an anchor:

<a href="#steve">Click here to go to steve!</a>

<a name="steve">This line of text has been named Steve.</a>

ALT alt="..."

Usage: The alt attribute in the <img> tag provides a meaningful text alternative for your visitors who are using text-only Web browsers, or who have graphics turned off on their browsers.  The alt attribute contains a string with the text you want to substitute for the graphic.

Example:

<img src="myimage.gif" alt="[a picture of a cat]" />

BODY <body>...</body>

Usage: Contains the content of the document.

Start/End Tag: <body></body> - Optional in HTML, required in XHTML 1.0

Attributes: (Note: the following presentational attributes are deprecated in favor of setting these values with style sheets)

background="..." - URL for the background image.

bgcolor="..." - Sets background color.

text="..." - Text color.

link="..." - Link color.

vlink="..." - Visited link color.

alink="..." - Active link color.

Notes: There can be only one <body>, and it must follow the <head>. The <body> element can be replaced by a <frameset> element.

Example:

<html>

    <head></head>

    <body>  Body goes here  </body>

</html>

BR <br>

Usage: Forces a line break.

Start/End Tag: Required/Illegal.

Attributes:

clear="..." - Sets the location where next line begins after a floating object (none, left, right, all).

Notes: In XHTML 1.0, this tag should take the XML form of <br /> to ensure compatibility with older browsers.

Example:

<p>This line is separated...</p>

<br />

<p>...by a line break!</p>

CODE <code>...</code>

Usage: This tag indicates that the text inside is a code sample and displays it in a fixed-width font such as Courier.

Start/End Tag: Required/Required.

Empty: No.

Example:

<code> cout<<"Code displayed!"<<endl; </code>

DIV <div>...</div>

Usage: Division element is used to add structure to a block of text.

Start/End Tag: Required/Required.

Attributes:

align="..." - Controls alignment (left, center, right, justify).

Empty: No.

Notes: Cannot be used with a P element.

Example:

<div align="right">This text is right-aligned!</div>

DOCTYPE

<!DOCTYPE...>

Usage: Version information appears on the first line of an HTML document and is a Standard Generalized Markup Language (SGML) declaration rather than an element.

Notes: Optional in HTML documents, required in XTHML 1.0.

Example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/strict.dtd">

<html>

</html>

EM

<em>...</em>

Usage: Italicizes text.

Start/End Tag: Required/Required

Empty: No.

Notes: <i>...</i> may also be used in place of <em>...</em>.

Example:

<em>This text will appear italicized when viewed in a web browser!</em>

FONT <font>...</font>

Usage: Changes the font face, size, and color.

Start/End Tag: Required/Required.

Attributes:

size="..." - the font size (1 through 7 or relative; that is, +3).

color="..." - The font color.

face="..." - The font type.

Empty: No

Notes: Deprecated in favor of style sheets..

Example:

<font color="green">This text would appear green in a web browser!</font>

FONT-FAMILY font-family

Usage: Specifies a list of font family names and generic family names.

Valid Property Values: serif, sans-serif, cursive, fantasy, monospace

Example:

<p><span style="font-family: monospace">This is monospaced text.</span></p>

FONT-SIZE font-size

Usage: Describes the size of the font when set solid.

Valid Property Values: A size (relative or absolute) in any of the units of measure supported by CSS.

Example:

<p>This text is normal-sized, and this text is <span style="font-size: 200%">twice that size</span>.</p>

FONT-STYLE font-style

Usage: Requests normal (roman or upright), italic, and oblique faces within a font family.

Valid Property Values: normal, italic, oblique

Example:

<p>This text is <span style="font-style: italic">now italicized</span>.</p>

FONT-WEIGHT font-weight

Usage: Specifies the weight of the font.

Valid Property Values: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900

Notes: Values 100 through 900 form an ordered sequence.  Each number indicates a weight that is at least as dark as its predecessor, normal is equal to a weight of 400, and bold is equal to a weight of 700.

Example:

<p>Here's some <span style="font-weight: bold">bold text</span>.</p>

HEAD <head>...</head>

Usage: This is the document header and contains other elements that provide information to users and search engines.

Start/End Tag: <head></head> - optional for HTML, required for XHTML

Notes: There can be only one <head> per document.  It must follow the opening <html> tag and precede the <body>.

Example:

<html>

    <head>  header goes here  </head>

    <body>  body here  </body>

</html>

Headings <h1>...</h1> Through <h6>...</h6>

Usage: The six headings (h1 is the uppermost or most important) are used in the body to structure information in a hierarchical fashion.

Start/End Tag: Both are required.

Attributes:

align="..." - controls alignment (left, center, right, justify)

*The align attribute is deprecated in favor of controlling alignment through style sheets.

Notes: Visual browsers display the size of the headings in relation to their importance, with h1 being the largest and h6 the smallest.

Example:

<body>

<h1>Camembert Incorporated</h1>

</body>

HR <hr>

Usage: Horizontal rules are used to separate sections of a Web page.

Start/End Tag: Required/Illegal.

Attributes:

align="..." - Controls alignment (left, center, right, justify)

noshade="..." - Displays the rule as a solid color.

size="..." - The size of the rule.

width="..." - The width of the rule.

Notes: In XHTML 1.0, this tag should take the XML for of <hr /> to ensure compatibility with older browsers.

Example:

<p>These two lines are separated...</p>

<hr />

<p>...with a horizontal rule!</p>

HTML

<html>...</html>

Usage: Encloses the entire HTML document.

Start/End Tag: <html></html> - Optional in HTML, required in XHTML 1.0

Example:

<html>

    ...rest of webpage

</html>

IMG <img>

Usage: Includes an image in the document.

Start/End Tag: Required/Illegal - See note for XHTML 1.0 requirements.

Attributes:

src="..." - The URL of the image.

alt="..." - Alternative text to display.

height="..." - The height of the image.

width="..." - The width of the image.

align="..." - Controls alignment (left, center, right, justify).

border="..." - Border width.

hspace="..." - The horizontal space separating the image from other content.

vspace="..." - The vertical space separating the image from other content.

Empty: Yes.

Notes: In XHTML 10, this tag should take the XML form of <img /> to ensure compatibility with older browsers.

Example:

<img src="example.jpg" alt="Example image" width="480" height="352" />

LI <li>...</li>

Usage: Defines a list item within a list.

Start/End Tag: Required/Optional (HTML); Required/Required (XHTML 1.0)

Attributes:

type="..." - Changes the numbering style (1, a, A, i, I) in ordered lists or bullet style (disc, square, circle) in unordered lists.

value="..." - Sets the numbering to the given integer, beginning with the current list item.

Example:

<ol>

    <li>This is a list item.</li>

</ol>

mailto mailto

Usage: Opens the user's default email program and inserts the defined email address in the "to:" field.

Example:

<a href="mailto:someone@example.com">Email someone!</a>

OL <ol>...</ol>

Usage: Creates an ordered list.

Start/End Tag: Required/Required.

Attributes:

compact - Compact the displayed list.

start="..." - Sets the starting number to the chosen integer.

type="..." - Sets the numbering style (1, a, A, i, I).

Notes: Must contain at least one list item.

Example:

<ol type="1" start="3">

    <li>This is an ordered list item</li>

</ol>

P

<p>...</p>

Usage: Defines a paragraph.

Start/End Tag: Required/Optional (HTML); Required/Required (XHTML 1.0)

Attributes:

align="..." - Controls alignment (left, center, right, justify)

Example:

<p align="center">Type a centered paragraph here</p>

SPAN <span>...</span>

Usage: Organizes the document by defining a span of text.

Start/End Tag: Required/Required.

Empty: No.

Example:

<span>Here is a span of text!</span>

TABLE <table>...</table>

Usage: Creates a table.

Start/End Tag: Required/Required.

Attributes:

width="..." - Table width.

cols="..." - The number of columns.

border="..." - The width in pixels of a border around the table.

cellspacing="..." - Spacing between cells.

cellpadding="..." - Spacing in cells.

align="..." - Controls alignment (left, center, right, justify).

bgcolor="..." - Sets the background color.

Empty: No.

Example:

<table width="819" height="586" border="1">

    <tr>

        <td> This is a cell in your table. </td>

        <td> This is another cell in a table! </td>

    </tr>

</table>

 

TD <td>...</td>

Usage: Defines a cell's contents.

Start/End Tag: Required/Optional (HTML); Required/Required (XHTML 1.0).

Attributes:

rowspan="..." - The number of rows spanned by a cell.

colspan="..." - The number of columns spanned by a cell.

align="..." - Horizontally aligns the contents of cells (left, center, right, justify, char).

char="..." - Sets a character on which the column aligns.

charoff="..." - Offset to the first alignmentt character on a line.

valign="..." - Vertically aligns the contents of cells (top, middle, bottom, baseline).

nowrap="..." - Turns off text wrapping in a cell.

bgcolor="..." - Sets the background color.

height="..." - Sets the height of the cell.

width="..." - Sets the width of the cell.

Empty: No.

Example:

<tr>

    <td rowspan="2"> This cell will appear as a large merged cell.</td>

    <td>This cell will show up as a smaller cell to the right of the larger one.</td>

</tr>

<tr>

    <td>...So will this one!</td>

</tr>

TEXT-ALIGN text-align

Usage: Specifies the minimal height of each inline box.

Valid Property Values: left, right, center, justify

Example:

<div style="text-align: center">Centered text.</div>

TEXT-DECORATION text-decoration

Usage: Used to specify a decoration to be applied to the text within the affected tag.

Valid Property Values: underline, overline, line-through, blink.

Example:

<p>Here is some <span style="text-decoration: blink">blinking text</span>.</p>

TH <th>...</th>

Usage: Defines the cell contents of the table header.

Start/End Tag: Required/Optional (HTML); Required/Required (XHTML 1.0).

Attributes:

rowspan="..." - The number of rows spanned by a cell.

colspan="..." - The number of columns spanned by a cell.

align="..." - Horizontally aligns the contents of cells (left, center, right, justify, char).

char="..." - Sets a character on which the column aligns.

charoff="..." - Offset to the first alignment character on a line.

valign="..." - Vertically aligns the contents of cells (top, middle, bottom, baseline).

nowrap="..." - Turns off text wrapping in a cell.

bgcolor="..." - Sets the background color.

height="..." - Sets the height of the cell.

width="..." - Sets the width of the cell.

Empty: No.

Example:

<tr>

    <th>Size</th>

    <td>Big</td>

    <td>Small</td>

</tr>

TITLE <title>...</title>

Usage: This is the name you give your Web page.  The <title> element is located in the <head> element and is displayed in the browser window title bar.

Start/End Tag: <title></title> - Required.

Notes: Only one title allowed per document.

Example:

<html>

    <head>

        <title>  Title here  </title>

    </head>

    <body>  Body here  </body>

</html>

TR <tr>...</tr>

Usage: Defines a row of table cells.

Start/End Tag: Required/Optional (HTML); Required/Required (XHTML 1.0).

Attributes:

align="..." - Horizontally aligns the contents of cells (left, center, right, justify, char).

char="..." - Sets a character on which the column aligns.

charoff="..." - Offset to the first alignment character on a line.

valign="..." - Vertically aligns the contents of cells (top, middle, bottom, baseline).

bgcolor="..." - Sets the background color.

Empty: No.

Example:

<tr valign="top">

    <td>Now the text in this row...</td>

    <td>...is positioned at the top of the cells!</td>

</tr>

UL
<ul>...</ul>

Usage: Creates an unordered list.

Start/End Tag: Both are required.

Attributes:

compact - Compacts the displayed list

type="..." - Sets the bullet style (disc, square, circle).

Notes: Must contain at least one list item.

Example:

<ul type="disc">

    <li>item one</li>

    <li>item two</li>

</ul>

   
Copyright 2008, by the Contributing Authors. Cite/attribute Resource . admin. (2005, September 16). HTML Tags. Retrieved January 07, 2011, from Free Online Course Materials — USU OpenCourseWare Web site: http://ocw.usu.edu/instructional-technology-learning-sciences/learn-and-apply-html/html-tags.html. This work is licensed under a Creative Commons License Creative Commons License
Online Degree Program
Utah State University offers an online masters degree program (MS & MEd) in Instructional Technology and Learning Sciences. Click below to find out more.

Reuse Course
Download this course