XHTML Elements - explanation, usage and examples
Friday, January 11th, 2008This is an article intending to inform people about what XHTML elements are available to use, their correct uses and if you should actually use them or not. This information is generally based on our experience and is not intended to provide a solid definition of the XHTML usage. We welcome all suggestions and comments about this article.
XHTML Element Index:
a
Description:
Anchor element, used to define links.
Common Attributes:
href : used to define link location.
title : used to display tooltip, often for accessibility.
enctype : used to define the encryption type, this must be set to “multipart/form-data” if you are using the form to submit files and images to the server.
Notes:
N/A
Example:
<a href=”http://www.digitaloverload.co.uk” title=”link to Digital Overload”>Digital Overload Ltd</a>
abbr
Description:
Used to explain or identify abbreviations of words.
Common Attributes:
title: used to give full non abbreviated content.
Notes:
You should only really apply this to the first instance of an abbreviated word, not every instance of the abbreviation.
Example:
<abbr title=”Cascading Style Sheets”>CSS</abbr>
acronym
Description:
Used to define acronyms
Notes:
N/A
Example:
<acronym title=”World Wide Web”>WWW</acronym>
address
Description:
Used by authors to supply contact information for a document or a major part of a document such as a form. This element often appears at the beginning or end of a document.
Notes:
N/A
Example:
<address>
<a href=”/People/dave.php”>Dave bobbit</a>,
<a href=”mailto:someone@someone.com”>bob davis</a>,
contact persons for the <a href=”/activity/”>document activity</a><br />
date: 11/11/2011
</address>
applet
Description:
Used to define an embedded applet.
Common Attributes:
width : defines width of applet
height: defines height of applet
Notes:
This element is deprecated and should be avoided.
Example:
<applet code=”some.class” width=”320″ height=”70″>
<param name=”fps” value=”18″ />
</applet>
area
Description:
Used to define a region or area within an image map element.
Common Attributes:
alt : alternative meaning to area
coords : specifies the coordinates for the clickable area
href : the location the user will be taken to when they click on the area
shape : defines the shape of the area
Notes:
This element is always nested inside a <map> tag.
Example:
<img src=”digitaloverloadmap.gif” width=”145″ height=”126″ alt=”Map of Digital Overload HQ” usemap =”#digitaloverloadmap” />
<map id =”digitaloverloadmap” name=”digitaloverloadmap”>
<area shape =”rect” coords =”0,0,82,126″ href=”london.php” alt=”London Studio” />
<area shape =”circle” coords =”90,58,3″ href=”norwich.php” alt=”Norwich Studio” />
</map>
b
Description:
Used to apply a stronger font weight to text (or make text bold).
Notes:
This HTML elements is deprecated, if you want to make text bold apply the “strong” element instead.
Example:
<b>Digital Overload</b>
base
Description:
Used to define the base URL for all the links in a page.
Common Attributes:
href : defines the URL to use as the base URL for links in the page
Notes:
The base tag must go inside the head element.
Example:
<head>
<base href=”http://www.digitaloverload.co.uk/” />
</head>
basefont
Description:
Used to define the base font.
Common Attributes:
color : defines colour of text
size : defines size of text
face : defines font face
Notes:
This element is deprecated and should not be used.
Example:
<basefont face=”arial, verdana, courier” size=”4″ color=”green”>
bdo
Description:
Used to overrides the default text direction.
Common Attributes:
dir : direction of text, right to left (rtl) or left to right (ltr).
Notes:
Allows users to display text from right to left.
Example:
<bdo dir=”rtl”>Here is some Hebrew text</bdo>
big
Description:
Used to render text bigger.
Notes:
This element is not deprecated but its better to use CSS to achieve this affect as CSS allows for a richer interpretation of the font size being larger.
Example:
<big>Big text</big>
blockquote
Description:
Used to define a quotation.
Common Attributes:
cite : URL of the quote, if it is taken from the web
Notes:
By Default the blockquote element creates white space on both sides of the text.
Example:
<blockquote> quotation content </blockquote>
body
Description:
Used to define the documents’ body.
Common Attributes:
although there are some attributes available its best not to use them as you can manipulate the body tag with CSS and achieve a far better level of customisation.
Notes:
This element should contain all the contents of the document such as text, images, tables etc.
Example:
<body>
The body content of the document.
</body>
br
Description:
Used to force a line break.
Notes:
Try to avoid using this where possible.
Example:
Some text here on one line <br />
Some text on another line
button
Description:
Used to define a push button. Inside a button element you can put content, like text or images. This is the difference between this element and buttons created with the input element.
Common Attributes:
name : name of the button
type : type of the button
value : value of the button
Example:
<button>Button appears here!</button>
caption
Description:
Used to define a table caption. Often implemented to give more information about the table the caption is relating to.
Common Attributes:
align : alignment of caption content.
Notes:
The <caption> tag must be inserted immediately after the <table> tag. You can specify only one caption per table. Usually the caption will be centered above the table
Example:
<table>
<caption>This is a table for costs.</caption>
<tr>
<td>price</td>
<td>£20.25</td>
</tr>
</table>
center
Description:
Used to center text on a page.
Notes:
This is deprecated, and best avoided. If you want to center your text then use CSS. You can do this by applying css style attribute of “text-align:center;” to the parent HTML element that needs the content to be aligned center. If you are confident with CSS then its always best to have your CSS in a .css file and not directly applied to the HTML element
Example:
<style>p { text-align:center; }</style>
<p>CSS</p>
cite
Description:
Used to cite an author, owner or a resource relevant to other information on the page.
Notes:
Commonly used to cite the author of a quotation or passage, or to
Example:
<q>”There are no more other worlds to conquer!”</q> - <cite>Alexander the Great</cite>
According to <cite>http://wordpress.org/</cite>, WordPress is a state-of-the-art semantic personal publishing platform with a focus on aesthetics, web standards, and usability.
code
Description:
Used to present a short piece of computer code.
Notes:
If you’re going to be displaying many lines of code, take a look at the “pre” element. Typically the contents of the code element would be rendered in monospace font format though this of course should be controlled with CSS.
Example:
To assign an array to a variable in PHP you would write <code>$var = array();</code>
col
Description:
Used to define the attribute values for one or more columns in a table.
Common Attributes:
width : defines the width of the column.
span : defines the number of columns the “col” element should span.
Notes:
You can only use this element inside a table or a colgroup. Often used for Accessibility.
Example:
<table>
<colgroup span=”3″>
<col width=”20″></col>
<col width=”50″></col>
<col width=”80″></col>
</colgroup>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
</table>
colgroup
Description:
Used to define groups of table columns. With this element, you can group columns for formatting.
Common Attributes:
width : defines the width of the column.
span : defines the number of columns the “colgroup” element should span.
Notes:
This element is only valid inside the table element.
Example:
<table border=”1″>
<colgroup span=”3″ style=”background:red;”>
</colgroup>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
</table>
dd
Description:
Used for a definition description.
Notes:
When using a DL (definition list) element to get a relationship between a title and the description of that title you would use the DD element to encapsulate the description.
Example:
<dl>
<dt>title of a object</dt>
<dd>This description of the title object is used for many things</dd>
</dl>
del
Description:
Used to markup parts of a page which have been deleted since the last version/revision of the page.
Notes:
This element is directly related to the “ins” element.
Example:
<h2>My Project</h2>
<p>My project has the support of <del>no</del> major investors.
dfn
Description:
Used to identify the word or phrase being defined in the current section of text.
Example:
<p>HTML should not be used to control presentation. <dfn>Cascading Stylesheets</dfn> are a method of linking presentation based code to an HTML document allowing for a separation of content and presentation.</p>
dir
Description:
Used to define a directory list.
Notes:
This element was used in HTML until the release of HTML 4.01 and is deprecated in XHTML therefore should not be used.
Example:
<dir>
<li>html</li>
<li>xhtml</li>
</dir>
div
Description:
Used to divide content within a page, and often used for layout markup.
Notes:
This element is often used to divide content, in recent web development and the use of CSS many people opt to use div elements for visual rendering.
Example:
<div>Content goes in here</div>
dl
Description:
Used for a definition list.
Notes:
definition list contain dt (definition titles) and dd (definition description)
Example:
<dl>
<dt>title of a object</dt>
<dd>This description of the title object is used for many things</dd>
</dl>
dt
Description:
Used for a definition title.
Notes:
When using a DL (definition list) element to get a relationship between a title and the description of that title you would use the DT element to encapsulate the title.
Example:
<dl>
<dt>title of a object</dt>
<dd>This description of the title object is used for many things</dd>
</dl>
em
Description:
Used to emphasis text and content.
Notes:
Many people use this as a way of making text italic, the em element is not actually used to make text italic its used for emphasis, the fact that most browsers chose to emphasis text with an italic style by default is just a handy side effect. when semantically marking up a website you should always use this rather than the “i” element.
Example:
This is some some of it is <em>very important</em> to users
embed
Description:
Used to embed media files
Common Attributes:
src : defines the source of the embedded media
height : defines the height of the media being displayed
width : defines the width of the media being displayed.
Notes:
This element is now deprecated in favor of the Object element.
Example:
<embed src=”../sound.mid” height=”60″ width=”144″ />
fieldset
Description:
Used to group form items for accessibility
Notes:
N/A
Example:
<form method=”post” action=”submit.php”>
<fieldset>
<label for=”frm_title”>Title:</label>
<input type=”text” name=”title” id=”frm_title” value=”Enter Title Here” />
</fieldset>
</form>
font
Description:
Used to define font styles and attributes.
Notes:
This is deprecated and should be avoided. If you want to change the font of an item or its visual appearance then use CSS to do this.
Common Attributes:
face : used to define the font used
color : used to define the color of the text
size : used to define the size of the text
Example:
<font face=”arial” size=”20″ color=”red”>this is some red large text in arial</font>
form
Description:
Used for forms.
Common Attributes:
action : used to define the location of the form when its been submitted
method : defines if the form should use the “GET” or “POST” method to submit the form data to the server
Notes:
When using a DL (definition list) element to get a relationship between a title and the description of that title you would use the DD element to encapsulate the description.
Example:
<form action=”submit.php” method=”post” enctype=”multipart/form-data”>
<label for=”frm_title”>Title</label>
<input type=”text” name=”title” id=”frm_title” value=”Form title Here” />
</form>
frame
Description:
Used to define a frame (or sub window).
Common Attributes:
frameborder : Defines if a border should be applied
longdesc : Used for accessibility, enter a URL containing a long description of the frame contents
name : Defines a unique name for the frame
scrolling : Defines if scrollbars should appera
src : Defines the URL that the frame will display
Notes:
Frames must be conained within a frameset element. If you are defining a frameset then the frameset tag replace the body tag.
Frames can be unaccessible if used incorrectly, there should be no need to use frames with modern browsers so try and avoid using frames unless you have no other option.
Example:
<html>
<frameset cols = “25%, 25%,*”>
<frame src=”testa.htm” />
<frame src=”testb.htm” />
<frame src=”testc.htm” />
</frameset>
</html>
frameset
Description:
Used to define a frameset. Framesets are used to define multiple frames, each of these frames holds different content. In its simplest use, the frameset element states how many columns or rows appear. You must use the cols or the rows attribute.
Common Attributes:
cols : Defines how many columns the frameset has
rows : Defines how many rows the frameset has
Notes:
Frames can be unaccessible if used incorrectly, there should be no need to use frames with modern browsers so try and avoid using frames unless you have no other option.
If you are defining a frameset element then this replaces the body element. ie you cannot have a body element and frameset element within the same document.
Example:
<html>
<frameset cols = “25%, 25%,*”>
<frame src=”testa.htm” />
<frame src=”testb.htm” />
<frame src=”testc.htm” />
</frameset>
</html>
h1
Description:
Used to markup the 1st level heading on a page.
Notes:
When marking up a website the main heading of a site should be in a h1. H1 tags are given more premis to search engines and aid users with accessibility requirements.
Example:
<h1>Main Page Heading</h1>
h2
Description:
Used to markup the 2nd level heading on a page.
Notes:
When marking up a website the second most important heading of a site should be in a h2. H2 help search engines define which of your content is the most important and aid users with accessibility requirements.
Example:
<h2>Second Level Page Heading</h2>
h3
Description:
Used to markup the 3rd level heading on a page.
Notes:
When marking up a website the third most important heading of a site should be in a h3. h3 help search engines define which of your content is the most important and aid users with accessibility requirements.
Example:
<h3>Second Level Page Heading</h3>
h4
Description:
Used to markup the 4th level heading on a page.
Notes:
When marking up a website the fourth most important heading of a site should be in a h4. H4 help search engines define which of your content is the most important and aid users with accessibility requirements.
Example:
<h4>Second Level Page Heading</h4>
h5
Description:
Used to markup the 5th level heading on a page.
Notes:
When marking up a website the fifth most important heading of a site should be in a h5. h5 help search engines define which of your content is the most important and aid users with accessibility requirements.
Example:
<h5>Second Level Page Heading</h5>
h6
Description:
Used to markup the 6th level heading on a page.
Notes:
When marking up a website the sixth most important heading of a site should be in a h6. H6 help search engines define which of your content is the most important and aid users with accessibility requirements.
Example:
<h6>Second Level Page Heading</h6>
head
Description:
Used to define information about the XHTML document.
Notes:
The Browser does not display this element to the screen. The following elements can be used in the head section: base, link, meta, script, style, and title. The head attribute is defined within the HTML element and should be appear before the body element.
Example:
<html>
<head>
<title>Title of the document</title>
</head>
<body>
</body>
</html>
hr
Description:
Horizontal Rule, Used to separate content.
Notes:
N/A
Example:
<hr />
html
Description:
Base HTML tag, used to contain all other HTML on a page.
Common Attributes:
xmlns : Declares a namespace for custom tags in an HTML document
xml:lang : defines the xml language to be used
lang : defines the default language to be used
Notes:
Other than a Doctype, the HTML tag is the first tag on a page. ALL other tags should be contained within this tag.
Example:
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
</html>
i
Description:
Used to make text italic.
Notes:
Try to avoid using this element as its depricated. If you are making text italic as it needs to be emphasised then you shoud use the “em” tag instead.
Example:
<i>italic text here</i>
iframe
Description:
used to display another pages content within the page.
Common attributes:
src : used to define the source (or webpage location) that the iframe will pull in.
width : used to define the width of the iframe
height : used to define the width of the iframe
frameborder : used to turn the border off and on
scrolling : if the iframe should display scroll bars
Notes:
Try to avoid using this element as its deprecated and is quite often in-accessible. There is a lot of talk about IFrames and if they should be used. There are lots of alternatives available and iframes should only be used as a last resort.
Example:
<iframe src=”iframe.php” width=”100px” height=”100px” frameborder=”0″ scrolling=”auto”>
<noframe>You browser does not currently support Iframes.</noframe>
</iframe>
img
Description:
Used to display images within the page.
Common Attributes:
src : the location of the image file on the server
width : width of the image
height : height of the image
alt : alternative content, this is displayed if the image cannot be
Notes:
All images should have “alt” attributes applied, this should contain a meaningful alternative to the image, this is also used by search engines. you should also try and define dimensions to all images.
Example:
<img src=”media/images/title_img_services.gif” alt=”Services our digital agency offers” width=”69″ height=”25″ />
input
Description:
Used within a form tag to allow users to input data.
Common Attributes:
alt : alternative content, this is displayed if the type is set to image
id : defines an identifier for a label to link to, used for accessibility
maxlength : Defines the maximum number of characters allowed in a text field. (only applies to type=text)
type : this is the type of input media and method, you can use the following values:
button
checkbox
file
hidden
image
password
radio
reset
submit
text
Notes:
N/A
Example:
<input type=”text” name=”title” />
<input type=”submit” name=”submit” value=”submit” />
<input type=”checkbox” checked=”checked” name=”live” value=”1″ />
ins
Description:
Used to define inserted text.
Common Attributes:
cite : Defines a url to another document which explains why the text was inserted
Notes:
Use it together with the del element to describe updates and modifications to a document.
Example:
Our chicken laid <del>20</del> <ins>11</ins> Eggs!
kbd
Description:
Defines Keyboard Text.
Notes:
This element is not deprecated but should be avoided as you can achieve similar results with CSS.
Example:
<kbd>Keyboard text</kbd>
label
Description:
Used to relate text to form inputs.
Common Attributes:
for : this is the ID that the label directly relates to
Notes:
Each input should have a label and an input, This is mainly for accessibility purposes but its good practice to use the label attribute.
Example:
<label for=”frm_title”>Title:</label>
<input type=”text” name=”title” id=”frm_title” value=”Enter Title Here” />
legend
Description:
Used to define a caption for a fieldset.
Notes:
When using this element visual formatting can become very tricky, its often used for accessibility, Normally we suggest the use of Heading tags to achieve a similar accessibility result but with a greater level of customisation.
Example:
<form action=”submit.php” method=”post”>
<fieldset>
<legend>User information:</legend>
<label for=”frm_email”>Email</email> <input type=”text” name=”email” id=”frm_email”/>
<label for=”frm_name”>Name</email> <input type=”text” name=”name” id=”frm_name”/>
<input type=”submit” name=”submit” value=”submit” />
</fieldset>
</form>
li
Description:
This element is used to markup list item.
Notes:
This element must be contained within a unordered list (UL) or ordered list (OL) element.
Example:
<ul>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>
link
Description:
Used to define the relationship between two linked documents.
Common Attributes:
href : Defines the url / location of the linked document.
media : Specifies on what device the document will be displayed
rel : Defines the relationship between the current document and the targeted document
rev : Defines the relationship between the targeted document and the current document
type : Specifies the MIME type of the target URL
Notes:
The link element is an empty element, it contains attributes only and this element goes only in the head section, but it can appear any number of times.
Example:
<head>
<link rel=”stylesheet” type=”text/css” href=”styles.css” />
</head>
map
Description:
Used to define an image map or image with clickable regions.
Common Attributes:
id : Defines unique id for image to reference with the “usemap” attribute.
Notes:
N/A
Example:
<img src=”digitaloverloadmap.gif” width=”145″ height=”126″ alt=”Map of Digital Overload HQ” usemap =”#digitaloverloadmap” />
<map id =”digitaloverloadmap” name=”digitaloverloadmap”>
<area shape =”rect” coords =”0,0,82,126″ href=”london.php” alt=”London Studio” />
<area shape =”circle” coords =”90,58,3″ href=”norwich.php” alt=”Norwich Studio” />
</map>
menu
Description:
Used to define a menu list
Notes:
This element is deprecated and should be avoided.
Example:
<menu>
<li>Item 1</li>
<li>Item 2</li>
</menu>
meta
Description:
This element provides meta-information about your page, such as descriptions and keywords for search engines.
Common Attributes:
name : this is the name or type of meta information this instance of the tag represents.
content : this is the content relating to the name attribute.
Notes:
This element must always goes inside the head element.
Example:
<meta name=”description” content=”HTML examples and explanation of available tags” />
noframes
Description:
Used to define text for browsers that do not handle frames.
Notes:
The noframes element goes inside the frameset element.
Example:
<frameset cols = “25%, 25%,*”>
<noframes>
<body>Your browser does not handle frames!</body>
</noframes>
<frame src=”navigation.htm” />
<frame src=”content.htm” />
<frame src=”contact.htm” />
</frameset>
noscript
Description:
Used to define an alternate content (text) if a script is not executed or supported.
Notes:
To be used for aiding accessibility.
Example:
<script type=”text/javascript”>
<!–
document.write(”Digital Overload!”)
//–>
</script>
<noscript>Your browser does not support JavaScript!</noscript>
object
Description:
Used to define an embedded object on your page, such as flash, audio files
Common Attributes:
classid : Defines a class ID value as set in the Windows Registry or a URL
codebase : Defines where to find the code for the object
codetype : The internet media type of the code referred to by the classid attribute
data : Defines a URL that refers to the object’s data
height : Defines the height of the object
width : Defines the width of the object
usemap : Defines a map element to link to
name : Defines a unique name for the object
Notes:
The text between the object tags is the alternate text, for browsers that do not support this tag.
Example:
<object classid=”clsid:F08DF954-8592-11D1-B16A-00C0F0283228″ id=”digitalexample” width=”200″ height=”250″>
<param name=”enabled” value=”1″ />
<param name=”min” value=”0″ />
<param name=”max” value=”10″ />
</object>
ol
Description:
Used to define an ordered list.
Common Attributes:
Although there are some attributes that can be defined they are all deprecated and CSS should be used to achieve customisation of your ol element.
Notes:
N/A
Example:
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
optgroup
Description:
Used to define an option group. This element allows you to group choices within an select element.
Common Attributes:
label : Defines the label for the option group.
Notes:
Suggested use if you have lots of options in a select element, this will also aid accessibility.
Example:
<select name=”developers”>
<optgroup label=”serverside”>
<option value =”adam”>Adam</option>
<option value =”james”>James</option>
</optgroup>
<optgroup label=”clientside”>
<option value =”ronan”>Ronan</option>
<option value =”david”>David</option>
</optgroup>
</select>
option
Description:
This element is a selectable value used within a “select” element.
Common Attributes:
value : the value to be submitted to the server
Notes:
Used within forms if you have multiple options for someone to select from, this element must always be contained within a “select” item.
Example:
<select name=”colours”>
<option value=”"> — Please Select — </option>
<option value=”red”>Red</option>
<option value=”blue”>Blue</option>
<option value=”green”>Green</option>
</select>
p
Description:
Used to define paragraphs.
Notes:
N/A
Example:
<p>This is a paragraph tag</p>
param
Description:
Used to define the run-time settings for an object.
Common Attributes:
type : Defines the internet media type for the parameter
value : Defines the value of the parameter
Notes:
N/A
Example:
<object classid=”clsid:F08DF954-8592-11D1-B16A-00C0F0283228″ id=”digitalexample” width=”200″ height=”250″>
<param name=”enabled” value=”1″ />
<param name=”min” value=”0″ />
<param name=”max” value=”10″ />
</object>
pre
Description:
Used to define pre-formatted text.
Notes:
Content within this tag will honor all whitespace and formatting. By default most web browsers will apply a font style to distinguish pre content from normal content, this can be overwritten with CSS
Example:
<pre>This is a pre formatted tag
ALL Of
this space will Appear as you type it</pre>
q
Description:
Used to define a short quotation.
Common Attributes:
cite : Defines the citation for the quote.
Notes:
This element will put quotation marks around the text automatically in most all major browsers, except for IE.
Example:
My father said to me <q>Son, your gonna make the fastest cars</q> then laughed…
s
Description:
Used to define strike through text.
Notes:
This element is deprecated and should be avoided.
Example:
Fresh apples only <s>£10.99</s> £6.99!
samp
Description:
Used to define sample output from programs, scripts, etc.
Notes:
N/A
Example:
On starting, you will see the prompt <samp>$i = 0;</samp>
script
Description:
Used to define script statements or include script files.
Common Attributes:
type : defines the type of script your including
language : defines the language the script is written in
src : used if your including a script file to be applied to your page
Notes:
Try and keep all your script in remote files and not directly within the script tags. If possible try to keep script tags in the head of a document.
Example:
<script type=”text/javascript” language=”javascript” src=”main.js”></script>
<script type=”text/javascript” language=”javascript”>
alert(’JavaScript Active’);
</script>
select
Description:
Used to define multiple options within a form, give the user the ability to select one value from your list.
Notes:
the only valid items that should appear in a select element are “option” elements.
Example:
<select name=”colours”>
<option value=”"> — Please Select — </option>
<option value=”red”>Red</option>
<option value=”blue”>Blue</option>
<option value=”green”>Green</option>
</select>
small
Description:
Used to make font size smaller.
Notes:
Often the same effect can be achieved with CSS, CSS also give you more control over the font size the browser generates.
Example:
<small>small text here</small>
span
Description:
Generic Cont inaner, often used as an universal tag to wrap items in for visual formatting.
Notes:
N/A
Example:
<p>this is some content <span>span content goes here<span> this is the rest of the content</p>
strike
Description:
Used to define strike through text.
Notes:
This element is deprecated and should be avoided.
Example:
Fresh apples only <strike>£10.99</strike> £6.99!
strong
Description:
Used to give text strong (bold) emphasis.
Notes:
This is the preferred method of making text bold. Use this rather than the b tag as its more widely supported and the b tag is now deprecated.
Example:
<p>This is some <strong>strong text</strong> in a paragraph</p>
style
Description:
Used to define style information.
Common Attributes:
type : defines the type of style information
media : the media that the style information applies to e.g. “screen”, “print”
Notes:
Used mainly for CSS styling, Although you can write styles within this tag all styles should really be in an external style sheet and called in with the “link” element within a documents head.
Example:
<style type=”text/css” media=”screen”>
body {
color:red;
}
</style>
sub
Description:
Used to define subscript font style.
Notes:
N/A
Example:
<sub>This text is Sub Script</sub>
sup
Description:
Used to define superscript font style.
Notes:
N/A
Example:
<sup>This text is Super Script</sup>
table
Description:
Used to define a table element.
Common Attributes:
cellpadding : Defines the table cell walls and the content
cellspacing : Defines the space between the table cells
summary : Defines a summary of the table, often used for accessibility.
width : Defines the width of the table, either a % or pixels. - Use CSS instead of this attribute.
Notes:
Table elements should be used for tabular data within your document content, try and avoid using tables for layout purposes as they are not very accessible. If you are trying to achieve layouts look to use CSS combined with div elements.
Example:
<table cellspacing=”0″ cellpadding=”0″ summary=”Information about our latest cars and related prices.”>
<thead>
<tr>
<th>Car</th>
<th>Price</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Car</th>
<th>Price</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Dodge Viper</td>
<td>£37,000</td>
</tr>
<tr>
<td>Honda S2000</td>
<td>£24,499</td>
</tr>
</tbody>
</table>
tbody
Description:
Used to define the body content within a table.
Common Attributes:
align : Defines the alignment of cells within the tbody
valign : defines the vertical alignment of cells within the tbody
Notes:
The tbody element must have a tr inside it. If you use the thead, tfoot and tbody elements, you must use every element. They should appear in this order: thead, tfoot and tbody, so that browsers can render the foot before receiving all the data. You must use these tags within the table element.
Example:
<table cellspacing=”0″ cellpadding=”0″ summary=”Information about our latest cars and related prices.”>
<thead>
<tr>
<th>Car</th>
<th>Price</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Car</th>
<th>Price</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Dodge Viper</td>
<td>£37,000</td>
</tr>
<tr>
<td>Honda S2000</td>
<td>£24,499</td>
</tr>
</tbody>
</table>
td
Description:
Used to define a table cell.
Common Attributes:
align : Defines the alignment of cells within the tbody
valign : defines the vertical alignment of cells within the tbody
headers : A space-separated list of cell IDs that supply header information for the cell. This attribute allows text-only browsers to render the header information for a given cell. Used for Accessibility
Notes:
N/A
Example:
<table cellspacing=”0″ cellpadding=”0″ summary=”Information about our latest cars and related prices.”>
<thead>
<tr>
<th>Car</th>
<th>Price</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Car</th>
<th>Price</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Dodge Viper</td>
<td>£37,000</td>
</tr>
<tr>
<td>Honda S2000</td>
<td>£24,499</td>
</tr>
</tbody>
</table>
textarea
Description:
Used to define a text-area (a multi-line text input control). A user can write text in the text-area. In a text-area you can write an unlimited number of characters.
Common Attributes:
cols : defines the number of columns the text area should span
rows : defines the number of rows the tex area should span
id : defines an identifier for a label to link to, used for accessibility
Notes:
The text area is given a terminal style font by browsers as default. You will need to explicitly set the font face you intend to use with CSS.
Example:
<label for=”frm_textarea”>My Text Area:</label>
<textarea rows=”2″ cols=”20″ id=”frm_textarea”>This is an example of a text area</textarea>
tfoot
Description:
Used to define the foot content within a table.
Common Attributes:
align : Defines the alignment of cells within the tbody
valign : defines the vertical alignment of cells within the tbody
Notes:
If you use the thead, tfoot and tbody elements, you must use every element. They should appear in this order: thead, tfoot and tbody, so that browsers can render the foot before receiving all the data. You must use these tags within the table element.
Example:
<table cellspacing=”0″ cellpadding=”0″ summary=”Information about our latest cars and related prices.”>
<thead>
<tr>
<th>Car</th>
<th>Price</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Car</th>
<th>Price</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Dodge Viper</td>
<td>£37,000</td>
</tr>
<tr>
<td>Honda S2000</td>
<td>£24,499</td>
</tr>
</tbody>
</table>
th
Description:
Used to define a table heading.
Common Attributes:
scope : Specifies if this cell provides header information for the rest of the row that contains it (row), or for the rest of the column (col), or for the rest of the row group that contains it (rowgroup), or for the rest of the column group that contains it. Used for accessibility but not 100% supported.
Notes:
The text within the th element usually renders in bold.
Example:
<table cellspacing=”0″ cellpadding=”0″ summary=”Information about our latest cars and related prices.”>
<thead>
<tr>
<th>Car</th>
<th>Price</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope=”col”>Car</th>
<th scope=”col”>Price</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Dodge Viper</td>
<td>£37,000</td>
</tr>
<tr>
<td>Honda S2000</td>
<td>£24,499</td>
</tr>
</tbody>
</table>
thead
Description:
Used to define the head content within a table.
Common Attributes:
align : Defines the alignment of cells within the tbody
valign : defines the vertical alignment of cells within the tbody
Notes:
If you use the thead, tfoot and tbody elements, you must use every element. They should appear in this order: thead, tfoot and tbody, so that browsers can render the foot before receiving all the data. You must use these tags within the table element.
Example:
<table cellspacing=”0″ cellpadding=”0″ summary=”Information about our latest cars and related prices.”>
<thead>
<tr>
<th>Car</th>
<th>Price</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Car</th>
<th>Price</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Dodge Viper</td>
<td>£37,000</td>
</tr>
<tr>
<td>Honda S2000</td>
<td>£24,499</td>
</tr>
</tbody>
</table>
title
Description:
Used to define the title of a document.
Notes:
This tag must be contained within the head element. Search engines use this so try to use descriptive page titles. By creating meaningful page titles you will also help people with disabilities navigate your site.
Example:
<head>
<title>Contact us page - all of our contact information including email address and phone numbers</title>
</head>
tr
Description:
Used to define the table row within a table.
Common Attributes:
align : Defines the alignment of cells within the tbody
valign : defines the vertical alignment of cells within the tbody
Example:
<table cellspacing=”0″ cellpadding=”0″ summary=”Information about our latest cars and related prices.”>
<thead>
<tr>
<th>Car</th>
<th>Price</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Car</th>
<th>Price</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Dodge Viper</td>
<td>£37,000</td>
</tr>
<tr>
<td>Honda S2000</td>
<td>£24,499</td>
</tr>
</tbody>
</table>
tt
Description:
Used to render Teletype text.
Notes:
This element is not deprecated but its better to use CSS to achieve this affect as CSS allows for a richer interpretation of the font style.
Example:
<tt>Teletype text</tt>
u
Description:
Used to render underlined text.
Notes:
This element is not deprecated but its better to use CSS to achieve this affect as CSS allows for a richer interpretation of the font style. Thistag should be avoided for accessibility. By default browsers only render links as underlined. If you have used the U tag then users may think your text is a link and get frustrated when nothing happens.
Example:
<u>Underlined text</u>
ul
Description:
Used to define an unordered list.
Notes:
Unordered lists allow you to markup XHTML semantically, next time you go to use a table, think about the content and if its actually a list of information, if so use the UL element. Use CSS to change the visual appearance of this XHTML element.
Example:
<ul>
<li>List item here</li>
<li>List item here</li>
<li>List item here</li>
</ul>
var
Description:
Used to render/define a variable to the screen.
Notes:
This element is not deprecated but its better to use CSS to achieve this affect as CSS allows for a richer interpretation of the font style.
Example:
<var>Variable</var>