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, nest them correctly: <p><b><i>...</i></b></p> For differences in XHTML (HTML 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, (don't use) U (looks like link)
- <html> or use <html lang="en"> or <html lang="eng"> for 508 compliance , language codes
- <head> holds tags with information about the page not to be displayed on screen
- <meta name="generator" content="creation program"> web page was created automatically by a specific program (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> holds tags for contents of the page to be displayed on screen
- <!-- .... --> 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="...link address..." target="new">link name</a> open another site in a new window (the URL of the link)
- <a href="pdf_link_address.pdf#page=3">link name</a> open to a specific page within a pdf document
- <a href="pdf_link_address.pdf#SPOT">link name</a> open to a specific named spot within a pdf document - can not link to the actual bookmarks
- <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
- <acronym title=""></acronym> allows screen readers to "read" acronyms
- <b></b> for bold text (accepted by most browsers)(<strong> prefered)
- <big></big> to increase size of text
- <blockquote></blockquote> to indent a quotation
- <br /> *close inside tag for break, carriage return or to skip a line
- <caption></caption> displays a title for a table
- <center></center> to center stuff, but use of style sheets is preferred toward XHTML
- <div></div> (block element) for a division, <div align=left, center or right> 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
- <font></font> for font: face=(text), size=(1-7 default is 3, 1 is smallest), color=
- <form></form> (block element) for interactivity with a data base, form examples
- <frame></frame> (should not use) not a basic concept, but similar to the table concept
- <h1></h1> (block element) for headings or font sizes 1-6... ( 1 is the largest )
- <hr /> *close inside tag for horizontal rule size=#pixels(thickness) width=% or #pixels align= noshade
- <i></i> for italicized text (accepted by most browsers)(<em> prefered)
- <img /> **close inside tag (inline element) for images src=(URL source) alt=(alternative description for 508 compliance), height= width= align=left, center, right border=# of pixels
- <input /> *close inside tag (inline element) should be within form tags, type="text"... tabindex="" form examples
- <label></label> (inline element) for form input identification, for 508 compliance
- <legend></legend> use with <fieldset> as a visible caption (title)
- <li></li> (block element) for list items within a list, value=(any number) ( 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
- <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
- <small></small> to decrease size of text
- <script></script> for language="javascript" and more...
- <select></select> should be within form tags, to select from a list of options ( see <option></option> )
- <span></span> (inline element) 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
- <strike></strike> for strike through (why use this?)
- <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 (pdf) - (inside tables are rows and data cells) summary=description of data table width= height= bgcolor=within table 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
- <tr></tr> for table row (inside row are data cells) (in ie only, not netscape: 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; id=single or group of related cells axis=a grouping of cells width= height= bgcolor=within cell rowspan= colspan= align=left,center,right valign=top,middle,bottom
- *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, for multi-line text input cols= rows= wrap=
- <u></u> for underline (this is not good to use, looks like a link)
- <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> )
(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 or override the attributes of these elements.
Printer friendly version, a shorter basic version in PDF [1pg/9kb] and some table tips PDF [1pg/44kb] , Tags , Quiz , Tables
Other links to more about HTML:
W3C html ,
W3C attributes ,
webmonkey ,
htmlhelp ,
W3C tutorial
Links to HTML editor programs:
Arachnophilia (free),
CuteHTML (30-day trial),
Homesite (30-day trial)
