HTML5 brings you 30 new elements to mark up documents and applications, and some tags are obsolete.
There was a concerted effort to separate the idea of what the element tag was for from its presentation. Some elements were removed, some had their meaning redefined, and some are new.
This post shows you what tags you can use and best practices in their use.
The first time you look at an HTML document, you will note a new DocType. The HTML5 specification removed the older, lengthier (and confusing to me anyway) Doctypes.
The doctype declaration for the HTML syntax is
<!DOCTYPE html> and is case-insensitive.
In the XML syntax, any doctype declaration may be used, or it may be omitted altogether. Documents with an XML media type are always handled in standards mode.
When using the HTML Doctype, you no longer need to close certain elements. For example,
Documents using the HTML syntax are served with the
text/html media type.
XML is OK Still
The other syntax that can be used for HTML is XML. This syntax is compatible with XHTML1 documents and implementations. Documents using this syntax need to be served with an XML media type (such as
application/xml) and elements need to be put in the
http://www.w3.org/1999/xhtml namespace. For example:
Elements That Are Gone
Many elements are no longer part of HTML5.
Purely presentational elements such as
big are now obsolete. You can use Cascading Style Sheets to provide those presentations. Gone are:
Presentational attributes have been removed from current elements; for example,
frame element is absent in HTML5. Frames caused usability and accessibility issues. So gone are:
Some gone because they were not used, created confusion, or their function can be handled by other elements:
acronymis not included because it has created a lot of confusion. Web developers are to use
applethas been obsoleted in favor of
isindexusage can be replaced by usage of form controls.
dirhas been obsoleted in favor of
This section lists the elements that are added to HTML5. These are supported in all modern browsers. Check CanIUse.com semantic elements.
In HTML5 Tutorial – Getting Started With Semantic Tags, you learned about several of the new elements. In particular:
sectionrepresents a generic document or application section. It can be used together with the
h6elements to indicate the document structure.
articlerepresents an independent piece of content of a document, such as a blog entry or newspaper article.
maincan be used as a container for the dominant contents of another element, such as the main content of the page. In W3C HTML5 and W3C HTML 5.1, only one such element is allowed in a document. (Not supported in IE)
asiderepresents a piece of content that is only slightly related to the rest of the page.
hgrouprepresents the header of a section, and allows you to group together a set of headers.
headerrepresents a group of introductory or navigational aids.
footerrepresents a footer for a section and can contain information about the author, copyright information, etc.
navrepresents a section of the document intended for navigation.
The following elements have been introduced for better structure:
figurerepresents a piece of self-contained flow content, typically referenced as a single unit from the main flow of the document.
figcaptioncan be used as caption (it is optional).
Then there are several other new elements:
audiofor multimedia content. You can learn more about these elements in a later posts.
trackprovides text tracks for the
embedis used for plugin content.
markrepresents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context.
progressrepresents a completion of a task, such as downloading or when performing a series of expensive operations.
meterrepresents a measurement, such as disk usage.
timerepresents a date and/or time.
- WHATWG HTML and W3C HTML5.1 has
data, which allows content to be annotated with a machine-readable value.
dialogfor showing a dialog.
rpallow for marking up ruby annotations.
bdirepresents a span of text that is to be isolated from its surroundings for the purposes of bidirectional text formatting.
wbrrepresents a line break opportunity.
canvasis used for rendering dynamic bitmap graphics on the fly, such as graphs or games.
menuitemrepresents a command the user can invoke from a popup menu.
detailsrepresents additional information or controls which the user can obtain on demand. The
summaryelement provides its summary, legend, or caption.
datalisttogether with the a new
inputcan be used to make combo boxes (not yet supported in IE nor Safari):
<input list="browsers"> <datalist id="browsers"> <option value="Safari"> <option value="Internet Explorer"> <option value="Opera"> <option value="Firefox"> </datalist>
keygenrepresents control for key pair generation.
outputrepresents some type of output, such as from a calculation done through scripting.
New Input Types
The idea of these new types is that the user agent can provide the user interface, such as a calendar date picker or integration with the user’s address book, and submit a defined format to the server. It gives the user a better experience as his input is checked before sending it to the server meaning there is less time to wait for feedback.
SVG and MathML
In later posts we’ll talk a lot about SVG and MathML. But in this post, we should explain that MathML and SVG elements can be used inside a document. An
svg start tag causes the HTML parser to switch.
You can finally use an ampersand without escaping. In HTML4 you had to write
& In HTML5 you can write
Attributes have to be separated by at least one whitespace character.
You no longer are required to have quote marks for as many attributes.
There are many more changes.