Jessett.com home  

html

html tag library
html editors
hex colors
forms
xhtml

home > html > html tag library

html tag library

basic tags

<html>...</html> Creates the html document
<head>...</head> Contains the head information, such as the title and meta tags which are not visible to the user
<title>...</title> Contains the title of the document which appears at the top of the browser window
<body>...</body> Contains the viewed portion of the document

back to top

body

<body>...</body> Contains the viewed portion of the document
<body bgcolor="?"> Sets the color of the background in hexadecimal code
<body background="filename.xxx"> Sets an image as a page's background (wallpaper)
<body text="color"> Specifies the color of normal text in hexadecimal code
<body link="color"> Specifies the default color of unvisited links in hexadecimal code
<body alink="color"> Specifies the color of links on click in hexadecimal code
<body vlink="color"> Specifies the color of followed links in hexadecimal code

n.b: It'd best to keep the attributes for bgcolor etc in a style sheet, unless you know that many of your visitors don't have a css compliant browser

back to top

formatting

<p>...</p> Creates a new paragraph
<p align=?> Aligns a paragraph to the left, right, or center
<br> Inserts a line break
<blockquote>...
</blockquote>
Indents text from both sides

back to top

lists

<dl>...</dl> Creates a definition list
<dt> Precedes each definition term
<dd> Precedes each definition
<ol>...</ol> Creates a numbered list
<li>...</li> Precedes each list item, and adds a number
<ul>...</ul> Creates a bulleted list
<div align=?> A generic tag used to format large blocks of HTML, also used for stylesheets

back to top

text

<pre>...</pre> Creates preformatted text
<hl>...</hl> to <h6>...</h6> Creates headings
<b>...</b> Creates bold text
<i>...</i> Creates italic text
<tt>...</tt> Creates teletype, or typewriter-style text
<cite>...</cite> Creates a citation, usually italic
<em>...</em> Emphasizes a word (with italic or bold)
<strong>...</strong> Emphasizes a word (with italic or bold)
<sub>...</sub> Subscript - text is lower than baseline
<sup>...</sup> Superscript - text is higher than basline

back to top

font

<font>...</font> Changes font attributes for text within the tags
<font size="value">...</font> Sets the font to a size from 1 to 7, with 1 the smallest and 7 the largest
<font face="name">...</font> Sets the font face
<font color="color">...</font> Sets the font color using hexadecimal code

n.b: It'd best to not use the <font> tag and to determine these attributes in a style sheet

back to top

images

<img> Embeds an image in the document at the location of the tag
<img src="url" alt="text"> Adds an image with a text description
<img src="url" alt="text" align="direction"> Aligns an image to the left, right, center, bottom, or top
<img src="url" alt="text" border="number"> Sets the size of the border around an image
<img src="url" alt="text" height="pixels"> Sets the height of an image
<img src="url" alt="text" width="pixels"> Sets the width of an image
<img src="url" alt="text" hspace="pixels"> Sets a horizontal margin to be placed around an image
<img src="url" alt="text" vspace="pixels"> Sets a vertical margin to be placed around an image
<img src="url" alt="text" usemap="map-name"> Designates an image as a client-side image map

back to top

links

<a>...</a> Designates the origin and destination of a hyperlink
<a href="url">...</a> Creates a hyperlink
<a href="#name">...</a> Links to a target location in the current page
<a href="URL#name">...</a> Links to a target location in a page outside the current page
<a name="name">...</a> Sets a target location within a document
<a href="mailto:email@something.com">...</a> Creates a mailto link

back to top

tables

<table>...</table> Generates a table
<table border="pixels"> Sets the size of cell borders
<table cellspacing="pixels"> Sets the amount of space between cells
<table cellpadding="pixels"> Sets the amount of space between a border and cell content
<table height="pixels" or "%"> Sets the height of a table
<table width="pixels" or "%"> Sets the width of a table
<td>...</td> Defines a table data cell
<td colspan="columns"> Sets a cell to span columns
<td rowspan="rows"> Sets a cell to span rows
<td nowrap> Prevents the lines within a cell from wrapping
<th>...</th> Defines a table header with bold, centered table data
<tr>...</tr> Defines a table row
<tr align="?"> or <td align="?"> Aligns the contents of a row or cell to the left, right, or center
<tr valign="?"> or <td valign="?"> Sets the vertical alignment of a row or cell to the top, middle, or bottom

back to top

frames

<frameset>...</frameset> Specifies the layout of subsections in the main browser window
<frameset rows="value,value"> Defines the rows within a frameset
<frameset cols="value,value"> Defines the columns within a frameset
<noframes>...</noframes> Provides alternate content for browsers that do not support frames
<frame src="?"> Defines the appearance and content of a single frame
<frame name="name"> Labels the frame for targeting by other frames
<frame marginwidth="#"> Sets the margin width of a frame
<frame marginheight="#"> Sets the margin height of a frame
<frame scrolling="value"> Creates a frame scrollbar
<frame noresize> Prevents the resizing of a frame

n.b: It'd best to not use frames for usability reasons and so that search engines can spider the site effectively

back to top

horizontal rules

<hr> Inserts a horizontal rule
<hr size=?> Sets size (height) of rule
<hr width=?> Sets width of rule, in percentage or absolute value
<hr noshade> Creates a rule without a shadow

back to top

forms

<form>...</form> Generates a container for all form elements
<form action="url"> Designates the path of the script to process input from the form
<form method="get|post"> Instructs the browser how to interact with the form URL
<form accept="media type"> Defines which MIME types are supported by the server processing the form
<form accept-charset="text"> Defines which character sets are supported by the server processing the form
<form enctype="media type"> Defines the format of the submitted data
<option> Defines each menu item
<select name="name">...</select> Generates a pull-down menu
<input type="checkbox"> Generates a check box
<input type="hidden"> Conceals a field from view
<input type="image"> Generates an image that acts like a Submit button
<input type="password"> Generates a one-line password box
<input type="radio"> Generates a radio button
<input type="text"> Generates a one-line text box
<input type="submit"> Generates a Submit button (send form)
<input type="reset"> Generates a Reset button (clear form)

back to top

special characters

&amp; & Ampersand
&trade; Trademark
&reg; ® Registered trademark
&copy; © Copyright
&quot; " Double quote marks
&#147; Left quote
&#148; Right quote
&frasl; Forward slash
&lt; < Less than arrow
&gt; > Greater than arrow
&raquo; »

Right pointing double angle quotation mark

&laquo; « Left pointing double angle quotation mark

&#151; Em-dash
&pound; £ Pound sign (GBP currency)
&deg; 30° Degree
&frac14; ¼ Quarter
&frac12; ½ Half
&frac34; ¾ Three quarters
&middot; · Middle dot
&iexcl; ¡ Inverted exclamation mark
&spades; Black spade suit
&clubs; Black club suit
&hearts; Black hearts suit
&diams; Black diamond suit

back to top