XHTML tag lookup

<!DOCTYPE>: Defines a document type, written as the first line in any HTML file above the <html> tag.
One of the options below is required for all HTML files.

Example useage
`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Example</title> </head> <body> </body> </html>`

Common options for Document Type Definitions
strict.dtd	The prefered default choice
frameset.dtd	If the document uses Frames
loose.dtd	A legacy option when a document contains obsolete tags

<a>: Defines an anchor or link which offers jump options within and between documents. The link can be a full Universal Resource Locator to elsewhere

Example useage
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head><title>Example</title></head> <body> <a name="label-here"></a> <a href="myfile.html#mylabelname">Take me away</a> <a href="http://www.google.com" title="Leaving my site">Lookup site</a> <a href="nextfile.html" target="_blank">Open doc</a> <a href="explain-my-logo.html"><img src="logo.png"></a> <a href="mysite.html" target="_top">Go</a> to my site <a href="mailto:myfriend@somewhere.com?cc=buddy@mail.com &subject='Hello and welcome'">Email me</a> </body> </html>

Common Attributes for anchors
href	Filename or URL to jump to
name	A label for other links to jump to
title	A text string often displayed while hovering over the link, useful for non-graphical browsers
target [frameset.dtd]	A destination frame or window name for the link destination to be displayed in.
	_blank	for a new popup window
	_parent	is for the parent frameset
	_top	for the outermost frameset
	_self	for the current window
shape/coords	For client side image maps, see <area>

<abbr> <acronym> <q>: These tags define Abbreviations, Acronyms and Quotations respectively. Aside from clearly having different meanings in organizing your document, they may cause the rendering effect of selecting the font. This can be modified via stylesheets. Also see <blockquote>.

Example useage
`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><head><title>Example</title></head><body> <p> The shortform <abbr title="television">tele</abbr> is a british abbreviation <br> The letters <abbr title="British Broadcasting Company">BBC</abbr> make up an acronym<br> A misquote is "<q title="Should be Peace for our time" cite="http://en.wikipedia.org/wiki/Peace_for_our_time">Peace in our time</q>" from before WWII<br> </p> </body></html>`

Common attributes for abbr, acronym and quotation
title	A common attribute to all tags, particularly useful here however to explain the meaning of the markup
cite	For <q> to reference where the quotation can be found although this may not show when rendered

<applet>: This older tag for loading code into a document is no longer supported. Refer instead to <object>.

<area>: Defines an area within a client-side image map that has some active content, typically a link to another page or label. The <area> tag is used when an image map is created distinct from the image and referenced via the usemap attribute. The same map can be shared by multiple images. This tag may appear superfluous as the same effect is achievable with the anchor tag <a>.

Example useage
`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head><title>Example</title></head> <body> <img src="fish.png" usemap="#mymap" alt="Wet lands"> <map name="mymap"> <area href="bigfish.png" shape="circle" alt="Hello" coords="238,194,60"> <area href="smallfish.png" shape="circle" alt="Hi" coords="70,173,44"> <area href="blub-blub.html" shape="rect" alt="fish talk" coords="118,152,137,68"> </map> </body></html>`

Common attributes for area
href	The link destination that an image area maps onto
nohref	Set nohref="true" to mark an image area without a link
shape	Choice of circle, rect[angle] or polygon
coords	Varies with shape, e.g circle.x, circle.y, circle.radius. polygon can be a string of x,y points, the final point matches the first for closure
alt	Alternative text for non graphical browsers, like <img>
target	Target frame or window, like <a> [frameset.dtd]

<b> <strong>: Defines a selected area of text to be drawn in Bold typeface. Along with <strong> this effect is better managed by stylesheets. If however you are Bolding a few letters this is a useful tag. There are no commonly used attributes for these tags.

Example useage
`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><head><title>Example</title></head><body> <p> This is my <b>bold text</b> in the middle! <br> This is my <strong>strong text</strong> for comparison. </p> <p style="font-weight: bold; color: red"> All this paragraph text is bold and red. </p> </body></html>`

<base>: Defines a base directory for file references such as links or images being loaded within a document. The default base directory is typically wherever the document was served from. If the webpage developer has a lot of content elsewhere then the <base> tag allows for shorter path specifications and the option to separate content by file directory. The base definition is made in the head of a document and applies to all the links and object loads in the body of that document. Once the base is established you can create relative paths. Similar to <meta>, there is no base closing tag in HTML.

Example useage
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head><title>Example</title> <!-- Set default working directory & output frame --> <base href="http://www.dezigning.com/HTML-tutorial/" target="_self"> </head> <body> <a href="intro.html">Please read the introduction</a> <!-- resolves to http://www.dezigning.com/HTML-tutorial/intro.html --> <img src="../HTML-to-XHTML/images/logo.png" alt="local W3C logo"> <!-- resolves to http://www.dezigning.com/HTML-to-XHTML/logo.png --> </body> </html>

Common attributes for base
href	The file root directory specification
target	Target frame or window, like <a> [frameset.dtd]

<bdo>: An acronym for Bi-Directional Override, a confusing name for text direction reversal. This provides a localized override for the direction of character drawing between this tag and the close. It has uses in foreign language display where the reading may go from the right hand side of the page. All it does is print the characters backwards for each line. Read the text being printed below backwards. Note that the lines maintain their order, not being reversed when the text is.

Example useage
`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><head><title>Example</title></head><body> <p> Backward reading can be fun, try this: <br><bdo dir="rtl">noom eht no gniklaW <br>ylenol oS <br>ennaxoR </bdo> <br>are 3 songs by The Police. </p> </body></html>`

Common attributes for bdo
dir	rtl for Right-to-left or ltr for Left-to-right

<big> <small>: Defines a selected area of text to be drawn in a bigger or smaller font-size. The font-sizes chosen are relative and browser specific. To control the font size better use stylesheet controls. Also see <h1>. There are no commonly used attributes for these tags.

Example useage
`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><head><title>Example</title></head><body> <p> This is <big>big text</big> here <br> This is <small>small text</small> for comparison. </p> <p>Alternately here is some <span style="font-size: 8pt; color: olive"> tiny text</span> in 8 pt font. </p> </body></html>`

<blockquote>: This tag should be used whan a large quotation is included in the text. Typically an indentation of one tab stop is included with Blockquote for all the lines in the block. If this is unwanted then a better tag to use would be <q>. A closing tag is required however these tags can be nested to increase indentation although this is far better handled by stylesheet. No quotation marks are added automatically.

Example useage
`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><head><title>Example</title></head><body> <p> A funny line is <blockquote title="From the Movie Amadeus" cite="http://www.imdb.com/title/tt0086879/quotes">"Well, there it is"</blockquote> </p> </body></html>`

Common attributes for blockquote
cite	To reference where the quotation can be found although this may not show when rendered

<body>: Defines the body section of an HTML document. This defines where the displayable content of a document should be encapsulated. The body closing tag is required.

Example useage
`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head><title>Example</title> <!-- Set default working directory & output frame --> <base href="http://www.dezigning.com/HTML-tutorial/" target="_self"> </head> <body bgcolor="silver" text="navy"> <p> This is my HTML document before XHTML... <!-- More of your document here --> </p> </body> </html>`

Stylesheets should be used for future documents
bgcolor	The background color for this webpage
background	An Image loaded as the backdrop to a page, often a swatch that tesselates to render a texture
text	Text color default

<br>: Defines a line break in the current text type. A break represents both a carriage return and a line feed character in white space. Some tags like <p> and <hr> include a break in their actions. There are no common attributes to the break tag. There is no break closing tag, so for XHTML you will see <br />

Example useage
`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Example</title> </head> <body> <p> Some text on a line <br> 2nd line of text<br> Newline! </p> </body> </html>`

<button>: In useage the button element is similar to the input request for form data entry. In the case of a button the only user input is the choice to either click or not click the button. This could be managed by an input tag, however buttons allow browsers a richer rendering opportunity to detail a button in 3D and potentially load an image to detail the button surface. If used without attributes, it will render a clickable button with no function.

Example useage
`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Example</title> </head> <body> <form method="post" action="form_action.php"> <input type="text" name="my_name"> <button type="submit" title="Click here to enter your name"> SEND </button> </form> </body> </html>`

Common Attributes for button
name	A name sent to the server when the form is submitted
value	A default value on form submission
type	What the button does
	button	Decorative only
	submit	Send the form data to the server
	reset	Clear the data to original values throughout a form
title	A helpful string displayed while hovering over the button, useful for non-graphical browsers

<caption>: Defines a table caption, or what might be considered a title. Only valid at the start of a table and there can only be the one caption element for each table. The text within the caption tags is centered over the table wherever the table is aligned. There are no common attributes for the caption tag.

Example useage
`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Example</title> </head> <body> <table> <caption>This table is about shoes </caption> <!-- Table rows and columns go here --> </table> </body> </html>`

<code> <samp> <kbd> <tt>: These phrase tags are used to mark up computer source code in documents. Code is for computer code, samp for sample code, kbd for something to be typed from the keyboard and tt for the output for printouts. They define a selected area of text to be drawn in a different font. The fonts chosen are browser specific but are non-proportional or fixed-width allowing columns to line up vertically. To control the font types it is better to use stylesheet controls. There are no commonly used attributes for these tags.

Example useage
`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><head><title>Example</title></head><body> <code>10 function flash { <br>20 printf ("hello world!"); <br>30 } </code><br> <samp>10 function flash { <br>20 printf ("old hello world"); <br>30 } </samp> <p>Type in <kbd>qwerty</kbd> on your keyboard. </p> <p>The output should be <tt>hello world!</tt> </p> <p style="font-family: courier;"> Monospaced font </p> </body></html>`

<col> <colgroup>: These tags apply common attributes across a range of columns, typically to control the alignments of data elements within their cells. <col> and <colgroup> are similar, except any column grouping may also cause a different rendering with a potentially different outline. This can be encouraged with the <table> attribute rules=groups. See the table examples in the HTML Tutorial.

Example useage
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Example</title> </head> <body> <table summary="An example of a 5x2" border="1"> <caption>This table is affected by colgroup</caption> <colgroup span="2" align="center" width="15%"> </colgroup> <col span="1" align="left"></col> <colgroup span="2" align="right" width="100"> </colgroup> <tr><td> a1 </td><td> a2 </td><td> a3 </td><td> a4 </td><td> a5 </td> </tr> <tr><td> b1 </td><td> b2 </td><td> b3 </td><td> b4 </td><td> b5 </td> </tr> </table> </body> </html>

Common attributes for col and colgroup
align	Position the element in the cell, valid values are left, right or center.
span	An integer >0 for how many columns are affected
width	How wide is the column, in pixels or a percentage

<dl> <dd> <dt>: These three tags mark a definition list in the body of a document. The definition list is contained between <dl> and </dl>. The definitions in the list typically come in pairs of tags comprising a definition term <dt> and the <dd> tag to describe the definition text for this term. An exception is to define multiple terms with the same description, e.g. where the terms have alternate spellings but the description is the same.
These tags provide little formatting, just line breaks and the definition descriptions being indented. The markup value typically comes with the stylesheet decoration of terms and descriptions. With HTML the closing tags for definition lists were optional when the structure was clear. For XHTML closing tags are required.

Example useage
`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head><title>Example</title> <style type="text/css"> dt { color: navy; text-decoration: bold} dd { color: olive} </style> </head> <body> <dl> <dt>Juventus</dt> <dd>Italian club from the city of Turin</dd> <dt>Real Madrid</dt> <dd>Leading spanish club, a regular in European contests</dd> <dt>Arsenal</dt> <dt>Gunners</dt> <dd>Top 4 club in the English Premier league</dd> </dl> </body> </html>`

<div>: Defines a division in the document, or otherwise viewed as a collection of one or more constructs. The primary aim of the division tag is to apply a set of stylesheet effects to the constructs between the tags. This tag is used when a style applies to part of the document, if it applies to all the document then the style should be set in the header and <div> is unnecessary. A closing </div> tag is essential. There are no common attributes aside from the general style attribute. Also see <span>.

Example useage
`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head><title>Example</title> </head> <body> <h1>My book </h1> <p> Thanks for buying my book </p> <div style="color: red; font-size: 8pt"> <h3>Legal terms</h3> <p>Legal requirements are listed here</p> </div> <p>Chapter 1....</p> </body> </html>`

<fieldset> <legend>: An optional structure to a form that can be used to group user inputs into sections that can be managed independently. <legend> is a notation to describe this grouping, used in a similar manner as <caption> is in table. A large form may for example separate out personal information form other data to be collected. A legend is optional for any fieldset, closing quotes are required. Aside from appending the legend, the fieldset tag also offers the browser the chance for the tab key to traverse options boxes within one fieldset only or visually to draw a border around the grouping. This can also be done with tables. If there is a great deal of form data one alternative is to submit multiple forms. See <form> and <input>

Example useage
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head><title>Example</title> </head> <body> <form method="post" action="myscript.php"> <fieldset> <legend>Personal Data</legend> <input type="text" name="firstname">First</input> <input type="text" name="lastname">Last</input> </fieldset> <fieldset> <legend>Preferences</legend> <input type="text" name="fab_movie">Movie?</input> <input type="text" name="fab_tv">TV show?</input> </fieldset> <input type="submit" name="Send">Enter</input> </form> </body> </html>

Common attributes for form
action	Define the file that accepts the user data, typically a server script file.
method	Define the server communication method
	get	Append the form data to the URL after a ? Suitable for 1 or 2 data pairs, typically used for search strings
	post	Send the form data in a file

<form>: Defines a collection of user inputs that normally results in user data being sent to a web server for any number of potential applications. Most forms are thin client interfaces that leave the server to do the work processing the form data. HTML provides for the appearance of the form, the names and data being collected and the action to be taken once the data is available. There are various tags that may feature between form tags, including <input>, <button>, <select> and <textarea>.

Example useage
`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head><title>Example</title> </head> <body> <form method="post" action="myscript.php"> <input type="password" name="user-pwd"> </form> </body> </html>`

Common attributes for form
action	Define the file that accepts the user data, typically a server script file.
method	Define the server communication method
	get	Append the form data to the URL after a ? Suitable for 1 or 2 data pairs, typically used for search strings
	post	Send the form data in a file

<frameset> <frame> <noframes>: These tags collectively implement the frame structure that can only be used in the [frameset.dtd]. These tags cannot be specified under the strict.dtd or loose.dtd. Frames are useful, but not universally implemented, particularly in micro-browsers or non-graphical interfaces. The concept is that the screen may be split into segregate windows that abut each other without overlap.
The screen can be split horizontally or vertically by varying amounts according to the frameset attributes rows and cols respectively. These windows, or frames, can then accept different HTML documents that could be shown in parallel. These are the <frame> definitions.
The use of the asterisk for a frame column or row size denotes that any available pixels remaining should go into the final frame. E.g. rows="200,*,100" would be 3 horizontal frames, top would be 200 pixels, the lower 100 pixels with all the rest of the screen given to the center frame. This definition would be followed by 3 frame definitions, one for each horizontal frame from top to bottom..
If a browser has no frame support it will drop through the frameset tags and look for <noframes> which should provide some alternate HTML code that avoids the use of frames.
Frames are most unusual in HTML as they occupy a separate HTML file to your documents. The frameset file has a header but no body, just frameset and frame definitions. The noframes tag requires a body tag defining any actual HTML markup in the file. Also see <iframe> for inline frames.

Example useage
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html><head><title>Example</title></head> <frameset rows="100,"> <!-- Banner at the top --> <frame frameborder="0" noresize name="banner" src="banner.html"></frame> <frameset cols=", 200"> <!-- Menu on the right --> <frame frameborder="0" scrolling="auto" name="main" src="main.html" marginwidth="0" marginheight="0"></frame> <frame frameborder="0" noresize scrolling="auto" name="right-menu" src="menu.html"></frame> </frameset> <noframes><body> <p> Click <a href="main,html">here</a> for the no frames version. <br> Menus will be innactive so use your browser back button </p> </body> </noframes> </frameset> </html>

Common attributes for frame
src	The HTML document to load initially into the frame
name	The name of the frame, useful for targeting See <a>.
frameborder	How much border is drawn around the frame
noresize	The user cannot change the frame size by mousing over the edges and pulling up or to the sides.
scrolling	The new frame will offer a scroll bar if true. Legal values are true, false and auto which adds a scroll bar when needed
marginheight	A height offset for this frame within the current frame. Typically set to zero as any default margin is a waste of space
marginwidth	An indentation of this frame within a parent frame, typically set to zero

<head>: Defines the header section of an HTML document. The header describes the document, where it comes from, language, title, author etc. Only the title in a header is typically displayed, the other information is used to define the document's contents and to control how it is displayed. The head closing tag is required after the header section. The header always comes before the body in an HTML document.

Example useage
`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head > <!-- This is my header section --> <title>My first HTML document</title> </head> <body> <p> Hello World!</p> </body> </html>`

Common attribute for head
profile	Reference a meta data profile that would define what Meta names should be provided. These values would be set in subsequent Meta statements.

<h1> <h2> <h3> <h4> <h5> <h6>: Defines headings by inserting line breaks before and after the enclosed text. The text is typically rendered in different font sizes with h1 being the largest and H6 being the smallest denoting lesser importance. There are no common attributes for the heading tags. Closing tags are required. To change font size also see <:big> and <:small>.

Example useage
`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><head><title>Example</title></head><body> <h1> My book name </h1> <h3>Chapter One </h3> <h5>All about sheep</h5> </body> </html>`

<head>: Defines the header section of an HTML document. The header describes the document, where it comes from, language, title, author etc. Only the title in a header is typically displayed, the other information is used to define the document's contents and to control how it is displayed. The head closing tag is required after the header section. The header always comes before the body in an HTML document.

Example useage
`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head > <!-- This is my header section --> <title>My first HTML document</title> </head> <body> <p> Hello World!</p> </body> </html>`

Common attribute for head
profile	Reference a meta data profile that would define what Meta names should be provided. These values would be set in subsequent Meta statements.

<hr>: Draws a horizontal rule, or line across the screen. There is no hr closing tag, so for XHTML you will see <hr /> The attributes for hr were commonly width and size, although these are now all deprecated. Line/rule drawing can still be controlled by stylesheets.

Example useage
`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Example</title> </head> <body> <hr> <p> Reading between the lines </p> <!-- Deprecated example, do not use --> <hr width="100"> <!-- Using a style --> <hr style="margin-left: 2cm; margin-right: 2cm; color: "navy"> </body> </html>`

<html>: Defines the beginning and ending of an HTML document. An HTML document contains a Header and a Body section. The html closing tag is required after the body section of the document.

Example useage
`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <!-- This is my header section --> <title>My first HTML document</title> </head> <body> <p> Hello World!</p> </body> </html>`

Common attribute for html
lang	A general attribute that could appear elsewhere in a document, however it is most useful to give the browser language information early in the document. "en" is the two letter code for the English language.

<i> <em> <var> <cite> <dfn> <address>: These tags define Italicize, Emphasize, Variable from a computer program, Citation or external reference, the first instance of a Definition and an Address to reach somebody respectively. Aside from clearly having different meanings in organizing your document, they all appear to have an identical rendering effect of italicizing text. There are no commonly used attributes for these tags. For bold text see <b>.

Example useage
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><head><title>Example</title></head><body> <p> This is <i>italicized text</i> here <br> This is also italics <em>here</em>, <var>here</var>, <cite>here</cite> and <dfn>here</dfn>. <br>Any complaints please send to <address><a href="mailto:laurie@dezigning.com">Laurie</a> who authored this guide </address> </p> <p>Alternately here is just some <span style="font-style: italic; color: blue"> italic</span> text. </p> </body></html>

<iframe>: This tag implements a frame structure within the current frame that can only be used in the [frameset.dtd]. These tags cannot be specified under the strict.dtd or loose.dtd. Frames are useful, but not universally implemented, particularly in micro-browsers or non-graphical interfaces. Unlike <frameset> iframe goes inline within the body of an HTML document.
<iframe> defines an inline frame within an HTML body, this allows for a frame to float within another. As there may be HTML surrounding the inline frame there is an implicit noresize attribute with an iframe to maintain the frame size and position. Also see <frame> for more information on frames.

Example useage
`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html><head><title>Example</title></head><body> <p> Create a new window below </p> <iframe src="hello.html" width="400" height="200" scrolling="yes" frameborder="1"> [Your browser does not support frames or is currently configured not to display frames. However, you may visit what would have been in this frame <a href="hello.html">here</a>.] </iframe> </body> </html>`

Common attributes for iframe
src	The HTML document to load initially into the frame
name	The name of the frame, useful for targeting See <a>.
frameborder	How much border is drawn around the frame
scrolling	The new frame will offer a scroll bar if true. Legal values are true, false and auto which adds a scroll bar when needed
height	How tall the frame should be
width	How wide to render this frame

<img>: Loads an image or picture into a document. Three standard forms of images are commonly supported, GIFs, JPGs and PNGs. Other image types are at the discretion of whatever browser a client uses.
Images require an alternative text description, this allows something to be displayed when either images are unavailable such as on a speech browser, or when images are disabled as many browsers will offer if using a low bandwidth network connection.
An image can be used as a background to almost any stylesheet element but that is outside the scope of the img tag. There is no closing tag </img>. The same function can be achieved using the <object> tag.

Example useage
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head><title>Example</title> </head> <body> <img src="..\images\arrow.gif alt="An arrow pointing to the right" height="30" width="42"> <img src="photos\tall-ship.jpg" alt="A sailing ship photograph" width="300"> <img src="drawing.png" alt="Tech drawing of part#ga-30267"> <!-- Or alternately... --> <object data="drawing.png" type="image/png"> A technical drawing of our part#ga-30267.</object> </body> </html>

Common attributes for img
src	A required pointer to the file where the image is stored. The file extension defines the image type, directories can be used and the filename is case sensitive.
alt	A required value that labels the image for non-graphical viewers
height	Override the image height, resizing the image as necessary
width	Override the image width, resizing the image as necessary

<input>: This tag requests input from the user into the browser, typically to be forwarded to a server script for processing. Inputs are part of a form construct. Input types can include buttons, text boxes or unrevealed passwords. A closing tag is required.
The server-side processing of forms is based on name/value pairs, hence every input requires a name field. The value should come from the user, however a default value, should the user not override, can be provided using the value attribute. For multi-line text input use <textarea>.

Example useage
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><head><title>Example</title></head> <body> <form method="post" action="form_action.php"> <input type="text" name="town" size="40">Enter town name</input> <br> <input type="password" name="user-pwd">Enter password</input> <br> Do you own a dog? <input type="radio" have-dog="yes-or-no" value="yes">Yes</input> <input type="radio" have-dog="yes-or-no" value="no dog">No</input><br> <input type="checkbox" checked name="add-list">Want our mailer?</input> <input type="submit" value="Send">Thanks!</input> </form> </body> </html>

Common attributes for input
name	Define the name of the data pair being sent to the server when this form is submitted
type	Define the type of input
	text	The user types data into a box
	radio	The user clicks on a round button
	password	The user types, but letters are typically shown as asterisks to hide the value being displayed
	checkbox	Typically a square box, the user clicks or not.
size	Maximum number of characters to enter, defining the text box size
checked	Whether a radio or checkbox option is preselected. In XHTML write checked=checked

<label>: Defines a label for a form input. Also see <form>, and <input>. There are two useages for label. One is to wrap the label around the input element to connect the two together. The other is to float the label in a form and use the id attribute to associate the label and input. The latter method is particularly useful when the label and input are wanted in different table elements for layout reasons. Labels only appear inside forms where closing tags are a requirement.

Example useage
`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head><title>Form Example</title> </head> <body> <form method="post" action="myscript.php"> <label>Enter your FTP password here <input type="password" name="user-pwd"> </label> <br> <label for="finale">If you have finished, please click here</label> <input type="submit" name="user-pwd" id="finale"> </form> </body> </html>`

Common attributes for label
for	Define where the label goes by linking to an `id` attribute

<li>: The <li> tag marks a list item in either an ordered list <ol> or an unordered list <ul>. Closing tags are required for XHMTL, where they were assumptive in HTML. There are no common attributes for the list item tag.

Example useage
`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head><title>Example</title> </head> <body> <ol type="a"> <li>Apples</li> <li>Bananas</li> <li>Cherries</li> </ol> <ul type="square"> <li>Sugar</li> <li>Flour</li> </ul> </body> </html>`

<link>: The link tag is exclusive to the header section of an HTML document, it is not the same as an anchor tag <a> which resides in the body of document and is visible to a user. Links define the logical connection bewteen this document and another. This can be used to aid categorization by archiving software or indexing for search engine discovery. You can add as many links as you feel are appropriate. An additional use of the Link tag is to reference an external stylesheet so that styles can be shared across documents. There is no closing tag for <link>.

Example useage
`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <!-- This is my header section --> <title>All about kettles</title> <link media="print" title="Kettle manual in postscript" type="application/postscript" rel="alternate" href="http://homeware.com/manuals/kettle.ps"> <link rel="stylesheet" type="text/css" href="mystyles.css"> </head> <body> <p class="mydark"> Hello World!</p> </body> </html>`

Common attributes for link
rel	How the documents are related. The value of `stylesheet` is the typical value when importing styles.
type	The kind of file this link is pointing to, `text/css` being the cascading stylesheet [css] value.
href	The link destination filename

<map>: Defines a group of active areas on a client-side image map. The map definition is a set of shapes and coordinates that could be common to highly similar images. An end tag is required

Example useage
`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head><title>Example</title> <head> <body> <img src="fish.png" usemap="#mymap" alt="Wet lands"> <img src="nightfish.png" usemap="#mymap" alt="Dark lands"> <map name="mymap"> <area href="bigfish.png" shape="circle" alt="Hello" coords="238,194,60"> <area href="smallfish.png" shape="circle" alt="Hi" coords="70,173,44"> </map> </body></html>`

Common attributes for map
name	The map's name to be referenced from the <img> tag

<meta>: The meta tag is exclusive to the header section of an HTML document. Meta defines document attributes that are typically non-displayed properties of the document. Examples include author, creation date, keywords etc. Most meta data is for search engines and cataloging applications to help them manage groups of documents they discover. There is no closing tag for <meta>.

Example useage
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head><title>Example</title> <meta http-equiv="Content-Language" content="en-us"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>My first book</title> <meta name="description" content="A wonderful book on office life"> <meta name="keywords" lang="en-us" content="Office book drone cube 1st"> <meta name="author" content="Laurie"> <meta name="robots" content="INDEX,FOLLOW"> </head> <body> <p> Once upon a time...</p> </body> </html>

Common attributes for meta
name	The type of Meta data being described, typically used for search engine hints.
content	The value of the property data being described
http-equiv	Similar to `name` used for HTTP response message headers. Typically used for server meta data.

<object>: The object tag is used to include external objects into your document. These may include audio and video files, java applets, activeX browser controls, Adobe .pdf files and Flash applications. A closing tag is required for all objects. Objects were originally intended to replace both <applet> and <img> tags, however browser support lagged behind. When image loading only, the same function can still be achieved using the <img> tag.

Example useage
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head><title>Example</title> </head> <body> <object classid="clsid:F08DF954-8592-11D1-B16A-00C0F0283628" id="Slider1" width="100" height="50"> <param name="BorderStyle" value="1" /> <param name="MousePointer" value="0" /> <param name="Enabled" value="1" /> </object> <object data="drawing.png" type="image/png"> A technical drawing of our part#ga-30267.</object> <!-- Or alternately... --> <img src="drawing.png" alt="Tech drawing of part#ga-30267"> </body> </html>

Common attributes for object
archive	A list of URLs to archives, separated by spaces
border	Border thickness drawn around the object
classid	Value from Windows registry or a URL
codebase	Where the code for this object can be found
codetype	The MIME type code that the `classid` refers to
data	A URL to external data if required by the code
type	The MIME type code taht the `data` attribute refers to
declare	Declares the object so it can be rendered, even if the code is not actually loaded
height	Override the default height for rendering
width	Override the default width for rendering
name	Provide an ID that can be referenced from scripts
standby	A text string to display while waiting for the object to load
usemap	Client-side image map, see <map>

<ol>: The <ol> tag marks an ordered or numbered list containing one or more list item <li> tags. Ordered lists have numbered indexes, for lists with just bullets see <ul>. If left to the browser the default list numbering would be arabic letters however there are other choices as listed below. A closing tag is required to complete the list. Also see definition lists <dl>.

Example useage
`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head><title>Example</title> </head> <body> <p> Add the ingredients in this order: </p> <ol type="a"> <li>Butter</li> <li>Sugar</li> <li>Milk</li> <li>Eggs</li> <li>Flour</li> </ol> </body> </html>`

Common attributes for ol
type	Selects the bullet/numbering type, default is 1,2,3...
	i	Lower case roman numerals: i, ii, iii, iv...
	I	Upper case roman numerals: I, II, III, IV...
	a	Lower case letters: a,b,c,d...
	A	Upper case letters: A,B,C,D...
value	Select the index, future values incerement from here

<option> <optgroup>: The option tag defines the choices that can be made available in an option box to a form user. Options are choices to be made within a <select> tag. The standard browser format for an option box is to show a drop down menu which once clicked upon will offer all the options within the <select> tag. An additional click is then required to select one of the options. HTML excused the lack of closing </option> tags, XHTML requires them.
The optgroup capability groups a list of options together within a selection list. Optgroup inserts a comment into the selection list via it's label. All the input selections within the optgroup will typically render under the comment in the drop down list with indentation.

Example useage
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><head><title>Example</title></head> <body> <form method="post" action="form_action.php"> <select name="my_state"> <option selected value="None">Select A State</option> <option value="AR">Arkansas</option> <option value="AL">Alabama</option> <br> <optgroup label="Western states"> <option label="Alaska" value="AK">Far west</option> <option value="AZ">Arizona</option> </optgroup> </select> <input type="submit" value="Send"> </form> </body></html>

Common attributes for option
value	The value to be sent to the server should that option be selected
selected	An option chosen to be selected prior to user input
label [option]	Defines the dropdown menu entry, overriding the text between tags which is now just commentary
label [optgroup]	A comment in bold as a grouping header will appear on the menu of choices

<p>: Defines a paragraph of text in a document. A paragraph represents both a carriage return and a line feed character in white space before the paragraph and afterwards. No indentation is assumed but it can be easily added via stylesheets. The paragraph tag despite it's common useage is not intended as a container and therefore should not be nested. There are no common attributes to the paragraph tag. This tag under HTML excused omitting a closing tag, but for strict HTML and XHTML a closing tag is required.

Example useage
`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Example</title> </head> <body> <p> A new beginning... </p> </body> </html>`

<param>: The parameter tag is used to pass information into code objects being loaded into the document, such as Java programs or Flash files. The attributes to <param> define what the parameters mean but only within the context of the code that is being loaded with the object. It is up to the writer of the applet to create sensible names for the parameters otherwise the HTML code will be unintelligable. A closing tag is required for the parameter tag in XHTML but they were unexpected in HTML.

Example useage
`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head><title>Example</title> </head> <body> <object classid="clsid:F08DF954-8592-11D1-B16A-00C0F0283628" id="my_java_app" width="20" height="20"> <param name="BorderStyle" value="1"></param> <param name="MousePointer" value="0"></param> <param name="Enabled" value="1"></param> </object> </body> </html>`

Common attributes for param
name	The name of a run-time parameter recognized by the code to be loaded
value	The value given to a run-time parameter
valuetype	A choice of one of these three options
	data	The default value where the value is a string
	object	Value matches the id attribute of an Object declaration within this document
	ref	An address where data values are stored
type	The content type when `valuetype="ref"`

<pre>: Pre stands for pre-formatting. This can be an invaluable tag when you wish to preserve whitespace in the HTML code. An example might be indentation for poetry or text already laid out by software that you now wish to include.

Example useage
`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><head><title>Example</title></head><body> <pre> There was a young man from Bengal who went to a fancy dress ball. He thought he would risk it and go as a biscuit but a dog ate him up in the Hall. </pre> </body></html>`

<script> <noscript>: The script tag integrates scripts into HTML documents. They can be local or retrieved from an external file. The type of the script must be specified plus a closing tag is required. The <noscript> tag marks an alternate action for when either a script type is unsupported by a browser, or when a browser has been configured to disable scripts.

Example useage
`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><head><title>Example</title></head> <body> <script type="text/javascript"> ...some JavaScript... </script> <noscript> ...some alternative, or an error message... </noscript> </body></html>`

Common attributes for script
src	The location of an external script file
type	The kind of script language being used
defer	If there is no screen rendering to be done, set `defer="true"` tells the browser to keep drawing and not to wait for the script to execute.

<select>: The select tag defines a drop down box within the <form> tag. A selection box is comprised of <option> tags. The standard browser format for a selection box is to show a drop down menu which once clicked upon will offer all the options. An additional click is then required to select one of the options. A closing tag is required. The default for a selection is that only one option can be chosen, however the multiple attribute allows for multiple choices.

Example useage
`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><head><title>Example</title></head> <body> <form method="post" action="form_action.php"> <select name="my_state"> <option selected value="None">Select A State</option> <option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option> <option value="AR">Arkansas</option> </select> <input type="submit" value="Send"> </form> </body></html>`

Common attributes for option
name	The name of a name/value pair sent to the server when the form is submitted
multiple	Allow the user to select multiple options from the list. Usually this is done by combining mouseclicks with the control or shift keys. The server-side script will need to recognise the repeated name in the name/value pairs it receives.

<span>: Span is a vehicle for applying stylesheets to inline content. It may also more rarely be seen specifying the span of a language change with the lang attribute. Span works within a block of text to apply a style, should you wish a block-level style application use <div>. Many HTML tags that format text strings such as <b>, <i>, <u>, <strong>, <big>, <small> and <em> can all be better managed by using span and stylesheet effects. There are no common attributes aside from the general style attribute. A closing </span> tag is essential.

Example useage
`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><head><title>Example</title> </head> <body> <p> He said <span style="color: maroon; font-size: 28pt"> vamos! </span> and promptly disappeared... </p> </body> </html>`

<style>: This tag is not to be confused with the style attribute that can be used with all text formatting tags. The <style> tag appears in the head section of a document, or externally within a linked stylesheet file. A closing tag is required.

Example useage
`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head><title>Example</title> <style type="text/css"> p { color: navy; text-decoration: bold} tt.mine { color: olive} </style> </head> <body> <p> <Hi there! </p> <tt class="mine">Greeks and the romans </tt> </body> </html>`

Common attributes for style
type	Allow for the inclusion of different kinds of stylesheet. `text/css` is required for css.

<sub> <sup>: Subscript and Superscript provide a convenient shortform method for both changing the vertical alignment of text, and reducing the font size for the subscripted or superscripted text. Closing tags are required. This can be done with stylesheets which is particularly useful when the implied font size reduction doesn't match your taste.

Example useage
`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head><title>Example</title> </head> <body> <p> <br>Famous equation is e=mc<sup>2</sup> <br>Water is H<sub>2</sub>O <br>Today is March 4<sup>th</sup> 2009 <br>Tomorrow is March 5<span style="vertical-align: super; font-size: 8pt">th</span> </p> </body> </html>`

<table> <thead> <tfoot> <tbody>: Defines a table in the document. A closing tag is required. Tables can be complex constructs that contain many potential tags including: <thead>, <tbody>, <tfoot>, <tr>, <th>, <td>, <colgroup>, <caption> and <summary>. The structural elements <thead>, <tfoot> and <tbody> are all optional, but if added a closing tag is required for each. You can have as many table bodies as you like, including the common option for none. Without these tags all the contents between <table> and the closing tag are assumed to be a single table body. The thead, tfoot and tbody are primarily useful for segmenting the table to apply style effects to different table areas.

Example useage
`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Example</title> </head> <body> <table width="80%" summary="An example table"> <caption>This table shows structure only </caption> <thead> <!-- header rows and columns go here --> </thead> <tfoot> <!-- Footer goes here, but rendered under the table --> </tfoot> <tbody> <!-- Rows and columns --> </tbody> <tbody> <!-- Rows and columns in body 2 --> </tbody> </table> </body> </html>`

Common attributes for table
width	How wide the table is drawn, can be in pixels, or a percentage of the available screen size.
summary	A potentially long description to summarize the table contents for non-graphical browsers.

<td> <tr> <th>: These tags define table cell values and are only ever seen inside a <thead>, <tbody>, <tfoot> or just inside <table> tags when the other tags are omitted. A row of data is captured between <tr> tags where the r is for rows. Every cell in the row is either marked by <th>, where h is for header, or <td> where d stands for data. A closing tag is required for each tag. You can have as many table rows and columns as you like by defining more <tr> constructs and <td>s respectively. The <th> is almost identical to <td> except it marks the header to the table, typically the head of columns to a table. The table header may be rendered in a bold font and the headings are centered over the columns. By marking your column heads you can control these effects using stylesheets.

Example useage
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Example</title> </head> <body> <table width="640" summary="An example of a 2x3"> <caption>This table shows rows and columns/caption> <thead> <tr><th> Head1</th><th> Head2</th></tr> </thead> <tfoot> <tr><td> Foot1</td><td> Foot2</td></tr> </tfoot> <tbody> <tr><td> Row1 col1 </td><td> Row1 col2 </td></tr> <tr><td> Row2 col1 </td><td> Row2 col2 </td></tr> </tbody> </table> </body> </html>

Common attributes for td and th
colspan	Define a data element that spans across multiple columns, an integer value > 1
rowspan	Define a data element that spans across multiple rows

<textarea>: Defines a <form> input from a multi-line text box. The number of lines, hence the size of the box should be specified. An initial value can be entered into the textarea, often to explain the sense of the input to the user. When the form submit button is entered and the form action is executed, the data in the textarea will be sent as a file to the server for processing. A closing tag is essential. For a single line of text use the <input> tag.

Example useage
`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head><title>Example</title> </head> <body> <form method="post" action="myscript.php"> <textarea name="blog_post" rows="5" cols="80">Write your post here: </textarea> <button type="submit">Post it</button> </form> </body> </html>`

Common attributes for textarea
name	The name submitted to the server with the text from this box when the form action is executed
rows	How many text rows appear in the text box
cols	How wide the text box is defined as a number of characters
readonly	The user is prevented from editing the text pre-placed in the box

<title>: This section refers to the <title> tag that appears in HTML headers. There is also a title attribute to most tags that is quite different. The title tag defines the name of the current webpage. Browsers will typically display the title at the top of a page above the rendered window. The title is also used by Search Engines to catgorize your site. The <title> tag can only appear once in each header, not in the body. A title is a text string, so don't add other markup or even comments inside the <title> tags. A closing </title> tag is required. There are no common attributes used with this tag.

Example useage
`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>My fabulous webpage</title> </head> <body> <p> Cool...</p> </body> </html>`

<u> <ins> <del>: Defines a selected area of text to be drawn with a line underneath or through the text. Be wary of highlighting text by underlining as underlining is also used for links. The two tags <ins> and <del> are intended for document editing to denote inserted and deleted text respectively. For a webpage these should be avoided to retaining this original meaning, however the appearance of inserted text tends to match underline <u>. Deleted text is often striked out by drawing a horizontal line through the text. This was the equivalent of the deprecated tags <s> or <strike> which are now replaced by stylesheet controls. There are no commonly used attributes for these tags.

Example useage
`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><head><title>Example</title></head><body> <p> This is <u>underlined text</u> in the middle! <br>Name checking changed <del>Appolo</del> into <ins>Apollo</ins> </p> <p> Only the word <span style="text-decoration: line-through;">blah</span> is struck out. </p> </body></html>`

<ul>: The <ul> tag marks an unordered list containing one or more list item <li> tags. Unordered in this context means there is no list numbering, for numbered lists see <ol>. Most browsers implement a bulleting scheme for list items. If left to the browser a common bullet would look like a small black filled circle. Other options are available, a circle being unfilled and a filled square shape. A closing tag is required to complete the list. Also see definition lists <dl>.

Example useage
`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head><title>Example</title> </head> <body> <ul type="circle"> <li>Sugar</li> <li>Flour</li> </ul> </body> </html>`

Common attributes for ul
type	Selects the bullet type
	disc, normally the default
	circle
	square

<!DOCTYPE>

<a>

<abbr> <acronym> <q>

<applet>

<area>

<b> <strong>

<base>

<bdo>

<big> <small>

<blockquote>

<body>

<br>

<button>

<caption>

<code> <samp> <kbd> <tt>

<col> <colgroup>

<dl> <dd> <dt>

<div>

<fieldset> <legend>

<form>

<frameset> <frame> <noframes>

<head>

<h1> <h2> <h3> <h4> <h5> <h6>

<head>

<hr>

<html>

<i> <em> <var> <cite> <dfn> <address>

<iframe>

<img>

<input>

<label>

<li>

<link>

<map>

<meta>

<object>

<ol>

<option> <optgroup>

<p>

<param>

<pre>

<script> <noscript>

<select>

<span>

<style>

<sub> <sup>

<table> <thead> <tfoot> <tbody>

<td> <tr> <th>

<textarea>

<title>

<u> <ins> <del>

<ul>