html 5 tag reference

*I have copied and pasted notes from various web sites. I don't represent these notes to be my own insights and findings. In fact, the implementation and support of these methods will be constantly changing. Although the W3C is the ultimate authority on the specifications for HTML 5, it has long been established that browsers vary in their interpretation and implementation of these standards. These notes represent my evolving knowledge of an evolving standard.

Most tags support these (mostly) new attributes: standard attributes | standard event attributes

<!--...-->unchanged (Used to make comments and disable code.)
<!doctype>In HTML5 this is the first line and only can be one value: <!doctype html>
<a>The anchor tag supports these new attributes:
media -- Specifies the mediatype of the target URL. Default value: all.
ping -- Space separated list of URL's that gets notified when a user follows the hyperlink. You can therefore set up a "listener" at said URL to provide tracking.
type -- Specifies the MIME (Multipurpose Internet Mail Extensions) type of the target URL.
<abbr>unchanged (An uncommon tag used to define an abbreviation.)
<acronym>unsupported (Use <abbr>)
<address>unchanged (An uncommon tag used to define an address.)
<applet>unsupported (Use <object>)
<area>Defines an area inside an image map. Used for making specific parts of an image clickable like the states in a map of the U.S. for example. Supports same new attributes as <a>
<article>*New in HTML 5* Defines content from an external source and supports these attributes:
cite -- URL of the article, if it is taken from the web.
pubdate -- Defines the time and date that the article was first published.
(I suspect this will not be commonly used. -WC)
<aside>*New in HTML 5* Defines some content aside from the content it is placed in. This might be used for the sidebar in an article. Does not seems to have any effect on the appearance of content.
(I suspect this will not be commonly used. -WC)
<audio>*New in HTML 5* Defines a sound or music file. Plays files natively in the browser rather than opening a 3rd party application. Attributes:
autoplay -- If present, the audio will start playing as soon as it is ready.
controls -- If present, controls will be displayed, such as a play button.
preload -- If present, the audio will be loaded at page load, and ready to run. Ignored if autoplay is present.
src -- Defines the URL of the audio to play.
demo <audio> page
(This is a key new addition in just the same way as the new <video> tag. Write text in between the tags to warn viewers that their browser does not support this method.)
<b>unchanged (Bold text. I use <strong> in favor of <b>. -WC)
<base>unchanged (Specify the root directory for all elements on the page inside the <head> tags. This would help avoid long file paths on a subpage in a web site. More useful on a large site.)
<basefont>unsupported (Use CSS.)
<bdo>unchanged (Bidirectional text. Would use for a right-to-left reading language. -WC)
<big>unsupported (Use CSS.)
<blockquote>unchanged (Has the effect of a <p> tag - not much benefit that I can tell... -WC)
<body>Defines the body of the page. With HTML 5 this tag can no longer have attributes assigned within it (like bgcolor).
<br />unchanged (Line break. XHTML requires closing tag, therefore I try to stay in the habit of using the closing slash -WC)
<button>Defines a button on the page. New HTML 5 attributes:
autofocus, form, formaction, formenctype, formmethod, formnovalidate, formtarget
<canvas>*New in HTML 5* Defines an area on the page to show graphics. Scripting is used to paint the graphics. Write text in between the tags to warn viewers that their browser does not support this method. Uses only two attributes: height and width.
canvas examples
<caption>unchanged (A caption for the top of a table.)
<center>unsupported (Use CSS. I suspect browsers will continue to support the tag, though coders must break the habit of using this in html for centering!)
<cite>Defines a citation.
Part of a group of tags used for formatting text: <cite> <code> <dfn> <em> <kbd> <samp> <strong> <var>
<code>Defines computer code text.
Part of a group of tags used for formatting text: <cite> <code> <dfn> <em> <kbd> <samp> <strong> <var>
<col>*New in HTML 5* Use this tag to apply CSS styles to an entire column in a table. Self-closing tag.
<colgroup>*New in HTML 5* Use this tag to apply CSS styles to an entire column in a table. (Not clear on difference between this and <col>. Perhaps <colgroup> is used as an outer container for multiple <col> tags? -WC)
<command>*New in HTML 5* Defines a button, radio button or checkbox. Must be enclosed by <menu> tags. (This not yet supported in any broswers 5/27/10 -WC.)
<datalist>*New in HTML 5* Provide acceptable values for a user input. (Not clear on this one. Used for validation? -WC)
<dd>unchanged (<dl> <dt> <dd> tags are used for a definition list.)
<del>unchanged (Use <del> and <ins> to show copy edits Microsoft Word style.)
<details>*New in HTML 5* <details> and <summary> tags are used together to provide further information about a section of your web page. <summary> tag should be first nested element after <details>. May be set invisible.
<dfn>Defines a definition. (Seems pointless... -WC)
Part of a group of tags used for formatting text: <cite> <code> <dfn> <em> <kbd> <samp> <strong> <var>
<dir>unsupported (Was used to define directory list. Never used this anyway. -WC)
<div>unchanged (Most commonly used tag.)
<dl>unchanged (<dl> <dt> <dd> tags are used for a definition list. I don't really see the point of these tags. The argument I read is that it allows for other tools to identify what the data is and extend the use of the definitions themselves. Show me a "cool" function resulting in using these tags and I will follow suggested methodology. Could easily convert to this method if a disadvantage was shown in more basic markup. -WC)
<dt>unchanged (<dl> <dt> <dd> tags are used for a definition list.)
<em>Defines important text. (Seems like a pointless tag. Many tags which all simply render as bold. -WC)
Part of a group of tags used for formatting text: <cite> <code> <dfn> <em> <kbd> <samp> <strong> <var>
<embed>*New in HTML 5* Embed content such as a plugin on the page such as a Flash video.
<fieldset>Draws a box around fields in a form. Use with the <legend> tag to label the set of fields.
<figcaption>*New in HTML 5* Mark the caption of a figure in the page. Used with the <figure> tag.
<figure>*New in HTML 5* Mark a section as a figure in the page. Used with the <figcaption> tag.
<font>unsupported (Was used to define font styles. Use CSS.)
<footer>*New in HTML 5* Can be used in the bottom of a page to define the name of the author, the date the document was written and/or contact information. Similar to <header>
<form>Defines a web form. Mostly unchanged. Supports new attributes autocomplete and novalidate
<frame>unsupported (Was used to define framed areas of the page.)
<frameset>unsupported (Was used to define framed areas of the page.)
<h1> - <h6>unchanged (Commonly used tags.)
<head>unchanged (The HTML header.)
<header>*New in HTML 5* Can be used in the top of a page to define information about the page. Similar to <footer>
<hgroup>*New in HTML 5* Used to group a section of headers such as when there is a main header followed by a subheader. (I don't yet see why this would be used. -WC)
<hr />unchanged (Horizontal rule. XHTML requires closing tag, therefore I try to stay in the habit of using the closing slash -WC)
<html>unchanged (Outermost element of page. Preceded by <!DOCTYPE HTML> in HTML 5)
<i>unchanged (Italics. As a habit CSS should be used to format text. Pure web design dictates HTML describing what is contained in a page and CSS describing everything how to display of the elements. In my experience, this rule should be bent for simple formatting like bold and italics. -WC)
<iframe>Show another page's content inside a frame. This supports some new attributes: sandbox, seamless, srcdoc
<img>The image tag. Should use CSS to control formatting. Normally only height and/or width attributes would be used. I often specify width only since aspect ratio is maintained.
<input>This is not a new tag, but it does have many new attributes. Use the <label> tag to label the field.
This W3 Schools page gives a detailed summary.
This demo page shows how the tag can be used.



willcooper.net