Oz Web Hub : the spot for the web design beginner

Home > Web design

HTML tags

Although Dreamweaver creates our code for us, we need to know the basic HTML tags so that if you want to insert something extra into the page that isn't generated by Dreamweaver, you will know where to place it in the code.

This site strives to use XHTML tags. There are a few differences. The beginner needs to know HTML tags however.

Basic Tags


<html></html>
Creates an HTML document
<head></head>
Stores title, styles and other information that is not displayed on the Web page itself
<body></body>
Houses the visible portion of your document
Header Tags
<title></title>
Puts the name of the document in the title bar

Body Attributes
<body bgcolor=?>
Sets the background color (name or hex value)
<body text=?>
Sets the text color (name or hex value)
<body link=?>
Sets the color of links (name or hex value)
<body vlink=?>
Sets the color of followed links (name or hex value)
<body alink=?>
Sets the color of links on click

Text Tags
<hl></hl>
Creates the largest headline/title
<h6></h6>
Creates the smallest headline/title
<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 (usually bold)
<font size=?></font>
Sets size of font, from 1 to 7
<font color=?></font>
Sets font color, (name or hex value)

Links
<a href="URL"></a>
Creates a hyperlink
<a href="mailto:EMAILME"></a>
Creates a link that will send an email
<a name="NAME"></a>
Creates a jump-to target location within a document
<a href="#NAME"></a>
Jumps to that target location from elsewhere in the document

Formatting
<p></p>
Creates a new paragraph with spacing above and below
<p align=?>
Aligns a paragraph left, right, or center
<br>
Inserts a line break
<blockquote>
</blockquote>
Indents text from both sides
<dl></dl>
Creates a definition list
<dt>
Must precede each definition term
<dd>
Must precede 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

Graphical Elements
<img src="name">
Adds an image
<img src="name" align=?>
Aligns an image
<img src="name" border=?>
Sets size of border around an image (set to 0 for links)
<hr>
Inserts a horizontal rule
<hr size=?>
Sets height of rule
<hr width=?>
Sets width of rule
<hr noshade>
Creates a rule without a shadow

Tables
<table></table>
Creates a table
<tr></tr>
Defines each row in a table
<td></td>
Defines each cell in a row
<th></th>
Defines the table header (bold, centered text)

Table Attributes
<table border=#>
Defines width of border around table cells
<table cellspacing=#>
Defines amount of space between table cells
<table cellpadding=#>
Defines amount of space between a cell's border and its contents
<table width=# or %>
SDefines width of table — in pixels or as a percentage of document width
<tr align=?> or <td align=?>
Defines alignment for table cells (left, center, or right)
<tr valign=?> or <td valign=?>
Defines vertical alignment for table cells (top, middle, or bottom)
<td colspan=#>
Defines number of columns a cell should span
<td rowspan=#>
Defines number of rows a cell should span

Frames
<frameset></frameset>
Replaces the <body> tag in a frames document; can also be nested in other framesets
<frameset rows="value,value">
Defines the rows within a frameset
<frameset cols="value,value">
Defines the columns within a frameset
<frame>
Defines a single frame within a frameset
<noframes></noframes>
Defines what will appear to browsers that don't support frames

Frames Attributes
<frame src="URL">
Specifies which HTML document will be displayed in the frame
<frame name="name">
Names the frame to be targeted by other frames
<frame marginwidth=#>
Defines the left and right margins for the frame
<frame marginheight=#>
Defines the top and bottom margins for the frame
<frame scrolling=VALUE>
Sets whether the frame has a scrollbar ("yes," "no," or "auto.")
<frame noresize>
Prevents the user from resizing a frame

Forms
<form></form>
Creates a form
<select multiple name="NAME" size=?></select>
Creates a scrolling menu. Size sets the number of menu items visible before you need to scroll.
<option>
SDefines each of the menu items
<select name="NAME"></select>
Creates a drop-down menu
<option>
Defines each drop-down menu item
<textarea name="NAME" cols=40 rows=8></textarea>
Defines a text box area. Columns gives the width; rows gives the height.
<input type="checkbox" name="NAME">
Creates a checkbox.
<input type="radio" name="NAME" value="x">
Creates a radio button.
<input type=text name="name" size=20>
Creates a one-line text input area. Size demarks length in characters.
<input type="submit" value="NAME">
Creates a Submit button
<input type="image" border=0 name="NAME" src="name.gif">
Creates a Submit button using an image where src is the url to the image
<input type="reset">
Creates a Reset button

I have just found an interactive site which allows XHTML+CSS REFERENCE BY EXAMPLE

It is called HTML Playground: very useful

 

straight to the top

© Jenny Campbell