Basic HTML codes
As technology, browsers, the web and HTML continue to evolve, languages & tags
will be in flux. New tags and attributes will be added, old ones deprecated...
However in general:
Tags should have a opening tag <html> and an closing tag </html>,
unless otherwise noted...
Tags can be nested within each other, nested them correctly:
<p><b><i>...</i></b></p>
For differences in the new XHTML (which is the transition to XML)
all tags should be in lower case,
quotes should surround attributes <td align="center" width="25%">
some tags include close within tag, <br /> <hr /> <img /> <input />
use style sheets instead of: FONT, BGCOLOR, CENTER, STRIKE, U, DIV,
if using <font> place within <style> tags inside the
head area (like cascading style sheets)
<html> or use <html lang="en"> or <html lang="eng"> for ADA
<head>
<meta name="generator" content="creation program">
web page created by (ie: GoLive, Front Page)
<meta name="description" content="whatever">
may appear in a search engine description of the page
<meta name="keywords" content="whatever, whatever">
one of the things search engines may look for
<meta name="author" content="whomever">
author of document
<title></title> appears at top of window, and will be bookmark title
<style type="text/css"><!--h2 {font-family:Arial; color:red}--></style>
</head>
<body>
or <body bgcolor="#FF0000">
to change background color for whole page
or <body background="any.gif">
to change background for whole page
or <body background="any.gif" fixed>
to fix background on page, text only will scroll
or <body fgcolor="#FF0000">
to change foreground (text) color for whole page
or <body text="#FF0000">
to change text color for whole page (“name” or “#00AAFF”)
or <body link=‘ ’ vlink=‘ ’ alink=‘ ’
for link, visited link & active link colors...
also <body marginheight="0" marginwidth="0" topmargin="0" leftmargin="0">
for a borderless page structure;
height & width for Netscape, top & left for IE
<body marginheight="20" marginwidth="20" topmargin="20" leftmargin="20">
to create a border around the page structure;
height & width for Netscape, top & left for IE
<!-- .... --> for comments that will not appear on actual web page
<a></a> (inline element)
for anchors for links
<a href="...link address...">link name</a>
for linking to other sites (the URL of the links)
<a href="mailto:me@123.com">e-mail</a>
for e-mails (the address of the links)
<a href="mailto:me@123.com?subject:Hi">contact</a>
for e-mail with subject "Hi"
<a name="linktop">link name</a>
for tagging a part on page that can be linked to
<a name="#linktop">link name</a>
for linking to another part of same page
<a name="pagename.html#linktop">link name</a>
for linking to tagged part of another page
<a accesskey="H" href="home.html">Home page</a>
creates a keyboard shortcut of letter H
<abbr title=""></abbr>
allows screen readers to "read" abbreviations and acronyms
<blockquote></blockquote>
to indent a quotation
<br /> *no closing
for break, carriage return or to skip a line
<caption></caption>
displays a title for a table
<div></div> (block element)
for a division, but not within <p>...</p> tags,
<dl></dl>
for definition list
<dt></dt>
for definition term (or label)
<dd></dd>
for definition description
<em></em> (inline element)
for emphasis or italics (preferred for Jaws over <i>) (server selects if italics)
<fieldset></fieldset>
groups related form elements or controls use <legend> within
<form></form> (block element)
for interactivity with a data base, form examples
<h1></h1> (block element)
for headings or font sizes 1-6... ( 1 is the largest )
<hr /> *no closing
for horizontal rule size=#pixels(thickness) width=%or#pixels align= noshade
<img /> *no closing (inline element)
for images src=(URL source) alt=(alternative description for ADA compliance),
height= width= align=left,center,right border=# of pixels
<input /> *no closing (inline element)
should be within form tags, type="text"... tabindex="" form examples
<label></label> (inline element)
for form input identification, for ADA compliance
<legend></legend>
use with <fieldset> as a visible caption (title)
<li></li> (block element)
for list items with in a list ( see <ol>, or <ul> )
<map title=""></map> will group a set of links
<p></p> (block element)
for paragraph (all spaces reduced to 1 each between words)
<pre></pre>
for preformatted (what you see is what you get, spaces & all)
<ol></ol> (block element)
for ordered list (numbered) type=A, a, I, i, 1 and start=(any number)
<li></li>
for list item with in a list ( see <ol>, or <ul> )
<option></option>
inside select tags, for a drop down menu to select from
<script></script>
for language=”javascript” and more...
<select></select>
should be within form tags, to select from a list of <option>
<small></small>
to decrease size of text
<span></span> (inline element)
is a generic inline container, it has no structural meaning itself, it is
used to provide extra structure such as class="" for style sheets,
or change the natural language, lang="" for a phrase
<strong></strong> (inline element)
for strong, most browsers will display bold for this (preferred for Jaws over <b>)
<sub></sub>
for subscript
<sup></sup>
for superscript
<table></table>
for a table - (inside tables are rows and data cells)
summary=description of data table width= height=
border=between&around cells frame=around table
cellspacing=between cells cellpadding=within cells(don't use if table width is a %)
align=left,center,right valign=top,middle,bottom bgcolor=within table
<tr></tr>
for table row (inside row are data cells) bgcolor= all cells within row
<th></th>
for table heading (like a data cell, but text is bold and centered)
scope=col,row,colgroup,rowgroup id=a2 axis=a grouping of cells
<td></td>
for table data cells; width= height= rowspan= colspan=
align=left,center,right valign=top,middle,bottom bgcolor=within cell
id=single or group of related cells axis=a grouping of cells
*tables - if you get a white line between rows or cells -
try removing all spaces between the all tags
<tr><td>1</td><td>2</td><td>3</td></tr>
*tables - if get a blank area in <td> cell instead of an empty cell (Netscape)
insert a non-breaking-space between the tags <td> </td>
*tables - if table doesn't look right or align correctly,
set <table border="1"> to see where your rows and cells are appearing
<textarea></textarea>
should be within form tags, multi-line text input cols= rows= wrap=
<ul></ul> (block element)
for unordered list (bulleted) type=circle, square, disc, bullet
<li></li>
for list item with in a list ( see <ol>, or <ul> )
</body>
</html>
(block elements) * Always begin on a new line
* Height, line-height and top and bottom margins can be manipulated
* Width defaults to 100% of their containing element, unless a width is specified
(inline elements) * Begin on the same line
* Height, line-height and top and bottom margins can't be changed
* Width is as long as the text/image and can't be manipulated
style sheet (css) may reverse the attributes of these elements.
Back to full version,
a shorter basic version in
PDF [1pg/7kb],
Print Page
Return to Top of Page |