HTML Specification: HTML Attributes:: What Are The W3C and Web Standards?
HTML Specification: HTML Attributes:: What Are The W3C and Web Standards?
HTML Specification: HTML Attributes:: What Are The W3C and Web Standards?
W3C stands for World Wide Web consortium and the W3C was formed in October 1994
by Tim Berners-lee the inventor of the World Wide Web. The W3C oversees internet
development and tries to bring standards and best practices when designing for the
internet.
They govern standards for many things including HTML, CSS and XML.
HTML SPECIFICATION:
HTML Attributes:
Standard Attributes
Core Attributes
Not valid in base, head, html, meta, param, script, style, and title elements.
Language Attributes
Not valid in base, br, frame, frameset, hr, iframe, param, and script elements.
HTML 4 added the ability to let events trigger actions in a browser, like starting a
JavaScript when a user clicks on an element.
To learn more about programming events, please visit our JavaScript tutorial and our
DHTML tutorial.
Below is the standard event attributes that can be inserted into HTML / XHTML
elements to define event actions.
Form Events
Keyboard Events
Valid in all elements except base, bdo, br, frame, frameset, head, html, iframe, meta,
param, script, style, and title.
Mouse Events
Valid in all elements except base, bdo, br, frame, frameset, head, html, iframe, meta,
param, script, style, and title.
<!-->
<!DOCTYPE>
<a>
<b>
<base>
<body>
<br>
<button>
<caption>
<center>
<cite>
<code>
<col>
<colgroup>
<dd>
<dir>
<div>
<dl>
<dt>
<em>
<fieldset>
<font>
<form>
<frame>
<frameset>
<head>
<h1> - <h6>
<hr>
<html>
<iframe>
<img>
<input>
<label>
<li>
<link>
<map>
<menu>
<meta>
<ol>
<optgroup>
<option>
<p>
<param>
<pre>
<script>
<select>
<small>
<span>
<style>
<table>
<tbody>
<td>
<textarea>
<tfoot>
<th>
<thead>
<title>
<tr>
<tt>
<u>
<ul>
Definition: The doctype declaration should be the very first thing in an HTML
document, before the <html> tag.
Types of doctype:
DTD The purpose of a DTD (Document Type Definition) is to define the legal
building blocks of an HTML document.
A DTD defines the document structure with a list of legal elements and attributes.
HTML <!--...--> Tag
Definition: The comment tag is used to insert a comment in the source code. A comment
will be ignored by the browser. One can use comments to explain code, which can help
while editing the source code at a later date.
Valid Syntax: <!--This is a comment. Comments are not displayed in the browser-->
Standard Attributes: The comment tag does not support any standard attributes.
Definition: The root element that specifies that the content of the document is HTML.
The opening tag immediately follows the DOCTYPE declaration and the closing tag is the
last thing in the document. The html element must contain the head and the body
elements.
Standard Attributes
None.
Standard Attributes
None.
Attributes:
Core attributes
I18n (internationalization) attributes
Event attributes.
Definition
Valid Syntax:
The <link> tag defines the relationship between a document and an external
resource.
The <link> tag is most used to link to style sheets.
Valid Syntax:
<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
</head>
Definition
Metadata is information about data.
The <meta> tag provides metadata about the HTML document. Metadata will not
be displayed on the page, but will be machine parsable.
Meta elements are typically used to specify page description, keywords, author of
the document, last modified, and other metadata.
The <meta> tag always goes inside the head element.
The metadata can be used by browsers (how to display content or reload page),
search engines (keywords), or other web services.
Valid Syntax:
Event Attributes:
The <style> tag is used to define style information for an HTML document.
Inside the style element you specify how HTML elements should render in a
browser.
The required type attribute defines the content of the style element. The only
possible value is "text/css".
Valid syntax:
<style type="text/css">
h1 {color:red}
p {color:blue}
</style>
Attribute:
Event Attributes The <style> tag does not support any event attributes.
Heading 1 to Heading 6 (1 being the highest level, 6 being the lowest). Headings
should be used in order and h1 used just once.
The <h1> to <h6> tags are used to define HTML headings.
<h1> defines the largest heading and <h6> defines the smallest heading.
Valid syntax:
Strong emphasis.
The <em>, <strong>, <dfn>, <code>, <samp>, <kbd>, <var>, and <cite> tags are
all phrase tags. They are not deprecated, but it is possible to achieve richer effect
with CSS.
Valid syntax:
Tag Description
<em> Renders as emphasized text
<strong> Renders as strong (highlighted) text
<dfn> Defines a definition term
<code> Defines computer code text
<samp> Defines sample computer code
<kbd> Defines keyboard text
<var> Defines a variable part of a text
<cite> Defines a citation
The <a> tag defines an anchor. An anchor can be used in two ways:
The most important attribute of the a element is the href attribute, which indicates the
link’s destination.
Valid syntax:
The <base> tag specifies a default address or a default target for all links on a
page.
The <base> tag goes inside the head element.
Valid syntax:
<head>
<base href="http://www.w3schools.com/images/" />
<base target="_blank" />
</head>
Attributes
href
target
Standard Attributes
Definition
The <img> tag has two required attributes: src and alt.
The alt attribute is meant to be used as an alternative text if the image is not
available, not as a mouse-over text. To show a mouse-over text on images or
image-maps, use the title attribute, like this: <img src="angry.gif" alt="Angry
face" title="Angry face" />
When a web page is loaded, it is the browser, at that moment, that actually gets
the image from a web server and inserts it into the page. Therefore, make sure that
the images actually stay in the same spot in relation to the web page, otherwise
your visitors will get a broken link icon. The broken link icon is shown if the
browser cannot find the image.
Valid syntax:
Required Attributes
src
alt
Optional Attributes
longdesc
height
width
Note: The usemap attribute in the <img> tag is associated with the map element's name
attribute, and creates a relationship between the image and the map.
Valid syntax:
The map element contains a number of area elements, that defines the clickable
areas in the image map.
Valid syntax:
Required Attributes
id is used to uniquely identify the element.
Optional Attributes
class can be used to reference the element with CSS.
title can be used to specify a title for the element.
The <object> tag is used to include objects such as images, audio, videos, Java
applets, ActiveX, PDF, and Flash.
The object element was intended to replace the img and applet elements.
However, because of bugs and a lack of browser support this has not happened.
The object support in browsers depend on the object type. Unfortunately, the
major browsers use different codes to load the same object type.
Luckily, the object element provides a solution. If the object element is not
displayed, the code between the <object> and </object> tags will be executed.
This way we can have several nested object elements (one for each browser).
Note: The <param> tag define run-time settings for the object
.Important: Do not use the <object> tag for images, use the <img> tag instead!
Valid syntax:
Required Attributes
None.
Optional Attributes
classid can be used to specify the location of the object in the form of a URL or
Windows Registry location.
data can be used to specify the location of the data for the object in the form of a
URL.
codebase can be used to specify the base location from which relative URLs
specified in the classid, data and archive attributes should be taken.
declare can be used to specify that the object is a declaration only. It must be
used in the format declare="declare".
type can be used to specify the content type of the data specified by the data
attribute.
codetype can be used to specify the content type of the object.
archive can be used to specify resources relevant to the object. The value should
be a URL or a number of URLs separated by spaces.
standby can be used to specify text that will be displayed while the object is
loading.
width can be used to specify the width of the object (in pixels). This can also be
done with CSS.
height can be used to specify the height of the object (in pixels). This can also be
done with CSS.
name can be used to specify a name by which the object can be referenced.
tabindex can be used to specify where the element appears in the tab order of the
page.
The <param> tag is used to define parameters or variables for an object or applet
element.
Valid syntax:
<object id="Slider1" width="100" height="50">
<param name="BorderStyle" value="1" />
<param name="MousePointer" value="0" />
<param name="Enabled" value="1" />
<param name="Min" value="0" />
<param name="Max" value="10" />
</object>
Required Attributes
name is used so that the element can be referenced and processed by the object.
Optional Attributes
value can be used to specify the value of the parameter.
id can be used to uniquely identify the element.
type can be used to specify the content type.
valuetype can be used to specify the content type of the value attribute. Values
can be data, ref or obj
Lists
HTML <ul> Tag
Valid syntax:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Ordered list. Used to define a list that has a logical sequence. Used in conjunction
with li to define the list items.
The list can be numerical or alphabetical.
Valid syntax:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Valid syntax:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Required Attributes
None.
Optional Attributes
Common attributes
The <dl> tag is used in conjunction with <dt> (defines the item in the list) and
<dd> (describes the item in the list).
Valid syntax:
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Standard Attributes
Core and language
Event Attributes
Keyboard event
Mouse event
Valid syntax:
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Standard Attributes
Core and language
Event Attributes
Keyboard event
Mouse event
Inside a <dd> tag you can put paragraphs, line breaks, images, links, lists, etc.
Valid syntax:
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Standard Attributes
Core and language
Event Attributes
Keyboard event
Mouse event
Tables
HTML <table> Tag
A simple HTML table consists of the table element and one or more tr, th, and td
elements.
The tr element defines a table row, the th element defines a table header, and the td
element defines a table cell.
A more complex HTML table may also include caption, col, colgroup, thead, tfoot, and
tbody elements.
Valid syntax:
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
Optional Attributes:
DTD indicates in which HTML 4.01/XHTML 1.0 DTD the attribute is allowed. S=Strict,
T=Transitional, and F=Frameset.
Standard Attributes
Core and language
Event Attributes
Keyboard event
Mouse event
HTML <tr> Tag
Valid syntax:
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
Optional Attributes
DTD indicates in which HTML 4.01/XHTML 1.0 DTD the attribute is allowed. S=Strict,
T=Transitional, and F=Frameset.
Event Attributes
Keyboard event
Mouse event
Use the colspan and rowspan attributes to let the content span over multiple
columns or rows!
Valid syntax:
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
Optional Attributes
DTD indicates in which HTML 4.01/XHTML 1.0 DTD the attribute is allowed. S=Strict,
T=Transitional, and F=Frameset.
Standard Attributes
Core and language
Event Attributes
Keyboard event
Mouse event
HTML <th> Tag
Use the colspan and rowspan attributes to let the content span over multiple
columns or rows!
Valid syntax:
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
Optional Attributes
DTD indicates in which HTML 4.01/XHTML 1.0 DTD the attribute is allowed. S=Strict,
T=Transitional, and F=Frameset.
Standard Attributes
Core and language
Event Attributes
Keyboard event
Mouse event
The <tbody> tag is used to group the body content in an HTML table.
The tbody element should be used in conjunction with the thead and tfoot elements.
The thead element is used to group the header content in an HTML table and the tfoot
element is used to group the footer content in an HTML table.
<tfoot> must appear before <tbody> within a table, so that a browser can render the foot
before receiving all the rows of data.
Notice that these elements will not affect the layout of the table by default. However, you
can use CSS to let these elements affect the table's layout.
Valid syntax:
<table border="1">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
Optional Attributes
DTD indicates in which HTML 4.01/XHTML 1.0 DTD the attribute is allowed. S=Strict,
T=Transitional, and F=Frameset.
Standard Attributes
Core and language
Event Attributes
Keyboard event
Mouse event
The <thead> tag is used to group the header content in an HTML table.
The thead element should be used in conjunction with the tbody and tfoot
elements.
The tbody element is used to group the body content in an HTML table and the
tfoot element is used to group the footer content in an HTML table.
<tfoot> must appear before <tbody> within a table, so that a browser can render
the foot before receiving all the rows of data.
Notice that these elements will not affect the layout of the table by default.
However, you can use CSS to let these elements affect the table's layout.
Optional Attributes
DTD indicates in which HTML 4.01/XHTML 1.0 DTD the attribute is allowed. S=Strict,
T=Transitional, and F=Frameset.
Standard Attributes
Core and language
Event Attributes
Keyboard event
Mouse event
The <tfoot> tag is used to group the footer content in an HTML table.
The tfoot element should be used in conjunction with the thead and tbody elements.
The thead element is used to group the header content in an HTML table and the tbody
element is used to group the body content in an HTML table.
Note: <tfoot> must appear before <tbody> within a table, so that a browser can render
the foot before receiving all the rows of data.
Notice that these elements will not affect the layout of the table by default. However, you
can use CSS to let these elements affect the table's layout.
Optional Attributes
DTD indicates in which HTML 4.01/XHTML 1.0 DTD the attribute is allowed. S=Strict,
T=Transitional, and F=Frameset.
Attribute Value Description DTD
right
left
align center Aligns the content inside the tfoot element STF
justify
char
Aligns the content inside the tfoot element to a
char character STF
character
Sets the number of characters the content inside
charoff number the tfoot element will be aligned from the STF
character specified by the char attribute
top
middle Vertical aligns the content inside the tfoot
valign STF
bottom element
baseline
Standard Attributes
Core and language
Event Attributes
Keyboard event
Mouse event
The <col> tag defines attribute values for one or more columns in a table.
The <col> tag is useful for applying styles to entire columns, instead of repeating
the styles for each cell, for each row.
The <col> tag can only be used inside a table or a colgroup element
Tip: Add the style attribute to the <col> tag, and let CSS take care of
backgrounds, width and borders. These are the ONLY CSS properties that work
with the <col> tag.
Valid syntax:
<table width="100%" border="1">
<col align="left" />
<col align="left" />
<col align="right" />
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
</table>
Optional Attributes
DTD indicates in which HTML 4.01/XHTML 1.0 DTD the attribute is allowed. S=Strict,
T=Transitional, and F=Frameset.
Standard Attributes
Core and language
Event Attributes
Keyboard event
Mouse event
Tip: Add the style attribute to the <colgroup> tag, and let CSS take care of
backgrounds, width and borders. These are the ONLY CSS properties that work
with the <colgroup> tag.
Optional Attributes
Same as <col>
Standard Attributes
Core and language
Event Attributes
Keyboard event
Mouse event
Valid syntax:
<table border="1">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
Optional Attributes
Align
Standard Attributes
Core and language
Event Attributes
Keyboard event
Mouse event
The <form> tag is used to create an HTML form for user input.
A form can contain input elements like text fields, checkboxes, radio-buttons,
submit buttons and more. A form can also contain select menus, textarea, fieldset,
legend, and label elements.
Note: The form element is a block-level element, and creates a line break before
and after itself.
Valid syntax:
<form action="form_action.asp" method="get">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="Submit" />
</form>
Required Attributes
Action
Optional Attributes
Attribute Value Description DTD
Specifies the types of files that
accept MIME_type can be submitted through a file STF
upload
Specifies the character-sets the
accept-charset charset STF
server can handle for form-data
application/x-www-form-
Specifies how form-data should
urlencoded
enctype be encoded before sending it to STF
multipart/form-data
a server
text/plain
get
method Specifies how to send form-data STF
post
name name Specifies the name for a form TF
_blank
_self
Deprecated. Specifies where to
target _parent
open the action UR
_top
framename
Standard Attributes
Core and language
Event Attributes
Keyboard event
Mouse event
Valid syntax:
Standard Attributes
Core and language
Event Attributes
Keyboard event
Mouse event
The size of a textarea can be specified by the cols and rows attributes, or even
better; through CSS' height and width properties.
Valid syntax:
Required Attributes
Col,
Rows
Optional Attributes
disabled
name
readonly
Standard Attributes
Core and language
Event Attributes
Keyboard event
Mouse event
Tip: The select element is a form control and can be used in a form to collect user
input.
Optional Attributes
disabled
name
multiple
size
Standard Attributes
Core and language
Event Attributes
Keyboard event
Mouse event
Tip: If you have a long list of options, you can group together related options
with the <optgroup> tag.
Valid syntax:
<select>
<option>Volvo</option>
<option>Saab</option>
<option>Mercedes</option>
<option>Audi</option>
</select>
Optional Attributes
disabled
label
selected
value
Standard Attributes
Core and language
Event Attributes
Keyboard event
Mouse event
The <optgroup> tag is used to group together related options in a select list.
If you have a long list of options, groups of related options are easier to handle for the
user.
Required attributed:
label
Optional Attributes
disabled
Standard Attributes
Core and language
Event Attributes
Keyboard event
Mouse event
Always specify the type attribute for the button. The default type for Internet
Explorer is "button", while in other browsers (and in the W3C specification) it is
"submit".
Valid syntax:
Optional Attributes
disabled
label
name
value
Standard Attributes
Core and language
Event Attributes
Keyboard event
Mouse event
The for attribute of the <label> tag should be equal to the id attribute of the
related element to bind them together.
Valid syntax:
<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>
Optional Attributes
for
Standard Attributes
Core and language
Event Attributes
Keyboard event
Mouse event
Valid syntax:
<form>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text" size="30" /><br />
Email: <input type="text" size="30" /><br />
Date of birth: <input type="text" size="10" />
</fieldset>
</form>
Standard Attributes
Core and language
Event Attributes
Keyboard event
Mouse event
The <frame> tag defines one particular window (frame) within a frameset.
Each frame in a frameset can have different attributes, such as border, scrolling,
the ability to resize, etc.
Valid syntax:
<html>
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
<frame src="frame_c.htm" />
</frameset>
</html>
Optional Attributes
DTD indicates in which HTML 4.01/XHTML 1.0 DTD the attribute is allowed. S=Strict,
T=Transitional, and F=Frameset.
Standard Attributes
Event Attributes
According to the W3C, the <frame> tag does not support any event attributes.
The frameset element states only how many columns or rows there will be in the
frameset.
Note: If you want to validate a page containing frames, be sure the doctype is set
to "Frameset DTD". Read more about doctypes.
Important: You cannot use the body element together with the frameset element.
However, if you add a <noframes> tag containing some text for browsers that do
not support frames, you will have to enclose the text in a body element.
Valid syntax:
<html>
<frameset cols="25%,*,25%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
<frame src="frame_c.htm" />
</frameset>
</html>
Optional Attributes
Attribute Value Description DTD
pixels
cols % Specifies the number and size of columns in a frameset F
*
pixels
rows % Specifies the number and size of rows in a frameset F
*
Event Attributes
According to the W3C, the <frame> tag does not support any event attributes.