HTML5 brings with it many new upgrades that expand the scope of our abilities with HTML4+. Some of the new additions will be easily welcomed into our upcoming development projects, and others we’ll find we don’t need to use quite as often. Regardless, it’s important to familiarize yourself with these new tags for future projects to ensure that you will always be coding semantically and in accordance with best practices.
<article>
|
Defines an article. An article should be able to sit independently on its own. Examples might include a blog or forum post, comments or news articles. |
<aside>
|
Defines content aside from the page content. Examples may include pull quotes or captions – any kind of text that supplements the page content. |
<audio>
|
Defines audio/sound content. Using src=”filename” you can define the file source for the audio. |
Supported attributes:
|
| attribute |
value |
description |
| autoplay |
autoplay |
specifies whether or not the audio should play as soon as it’s ready |
| controls |
controls |
specifies that playback controls should be visible |
| loop |
loop |
specifies whether or not the audio should play continuously |
| preload |
auto
metadata
none |
specifies whether or not the file should be loaded on page load |
| src |
url |
specifies the file url of audio content |
|
<canvas>
|
Defines graphics. The canvas tag is only used as a container for graphics, however. You must use a script to actually paint them. |
Supported attributes:
|
| attribute |
value |
description |
| height |
px |
specifies the height of the canvas |
| width |
px |
specifies the width of the canvas |
|
|
<command>
|
Defines a command button (radio button, checkbox, etc.) The command element must be inside a menu element in order to be visible. If it is not in a menu element, it can only be used to create a keyboard shortcut. |
Supported attributes:
|
| attribute |
value |
description |
| checked |
checked |
specifies if the command is checked or not (only for checkboxes/radio buttons) |
| disabled |
disabled |
specifies if the command is available or not |
| icon |
url |
defines the url of an image to display as the command |
| label |
text name |
defines the name for the command |
| radio group |
radiogroup name |
gives a name to a radio group |
| type |
checkbox
command
radio |
defines the type of command (default: command) |
|
|
<datalist>
|
Defines a dropdown list with specific options. When used with the input element, you can define possible values for the input. |
<details>
|
Defines details of an element. These details can be shown or hidden depending on whether or not you set the ‘open’ attribute. |
Supported attributes:
|
| attribute |
value |
description |
| open |
open |
determines whether or not the details should be displayed |
|
<embed>
|
Defines external interactive content or plugin. |
Supported attributes:
|
| attribute |
value |
description |
| height |
px |
specifies the height of the embedded element |
| src |
url |
specifies the file url of the embedded element |
| type |
MIME type |
specifies the MIME type of the embedded element |
| width |
px |
specifies the width of the embedded element |
|
|
<footer>
|
Defines a footer of a section of content or page. |
<header>
|
Defines a header of a section of content or page |
<mark>
|
Defines marked or highlighted text. Use this tag if you’d like to emphasize specific text with a highlight background color. |
<meter>
|
Defines a measurement. The tag is only used when there is a predetermined min and max value – also known as a gauge. |
Supported attributes:
|
| attribute |
value |
description |
| form |
number |
specifies which form this meter belongs to |
| high |
number |
specifies at which value the measurement is considered high |
| low |
number |
specifies at which value the measurement is considered low |
| max |
number |
specifies the maximum value (default: 1) |
| min |
number |
specifies the minimum value (default: 0) |
| optimum |
number |
specifies the best value for the measurement |
| value |
number |
specifies the measure’s current value (required) |
|
<nav>
|
Defines a section of navigation links. |
<output>
|
Defines the result of a calculation. |
Supported attributes:
|
| attribute |
value |
description |
| for |
id |
specifies the elements the output field relates to |
| form |
form id |
specifies the forms the output field relates to |
| name |
text name |
specifies the name of the object for when a form is submitted |
|
<progress>
|
Defines progress of a task of any kind. Can often be used for progress or download bars and JavaScript. |
Supported attributes:
|
| attribute |
value |
description |
| max |
number |
defines the value of completion (ex. 100% of download) |
| value |
number |
specifies the current value of progress (ex. 75% of 100%) |
|
<section>
|
Defines a section of content. Can be used to organize chapters, headers, footers, etc.
|
|
<source>
|
Defines media resources for elements such as audio and video. |
Supported attributes:
|
| attribute |
value |
description |
| media |
media query |
specifies what media/device the resource is optimized for. default: all |
| src |
url |
specifies the url of the media source |
| type |
MIME type |
specifies the MIME type of the media resource |
|
|
<time>
|
Defines a date and/or time. |
Supported attributes:
|
| attribute |
value |
description |
| datetime |
datetime |
specifies the date or time for the time element. This is used if no date or time is specified in the element’s content. |
| pubdate |
pubdate |
specifies that date and time in the time element is the publication date and time of of the document, or the nearest ancestor article element |
|
<video>
|
Defines a video or movie clip. |
Supported attributes:
|
| attribute |
value |
description |
| audio |
muted |
specifies the default state of the audio (ex. muted) |
| autoplay |
autoplay |
specifies whether the video should play as soon as it’s ready or not |
| controls |
controls |
specifies if controls such as play buttons should be displayed |
| height |
px |
specifies the video height |
| loop |
loop |
specifies whether the video should play continuously or stop after the first completion |
| poster |
url |
specifies the url of a thumbnail image to represent the video |
| preload |
preload |
specifies if the video should be loaded on page load |
| src |
url |
specifies the url of the video |
| width |
px |
specifies the video width |
|
Despite all of the new tags we are trying to learn, there are also a few we need to drop from our HTML vocabulary. It seems most of these tags were rather unpopular in the first place, but in case you have been clinging to them in your code, here are the tags that need to go:
<acronym>
|
Defined an acronym |
<applet>
|
Defined an applet |
<basefont> and <font>
|
Used to define font size, color, text, etc., but this should be done with CSS instead. |
<big>
|
Defined big text. Completely unnecessary, no? |
<center>
|
Defined centered text. This should be done in CSS with the text-align property set to center. |
<dir>
|
Defined a directory list. If you had been using this tag frequently, you should replace it with the <ul> tag. |
<frame> and <frameset>
|
These defined frames or sets of frames. They are no longer supported in HTML5 because using frames has a negative impact on the usability of a website. |
<noframes>
|
This tag was originally used to display text for browsers that didn’t support frames. The tag is no longer supported in HTML5. |
<s> or <stroke>
|
Defined strikethrough text. This can be done using text-decoration: line-through in your CSS. |
<tt>
|
Defined teletype or monospaced text. |
<u>
|
Defined underlined text. This can instead be accomplished with CSS, using text-decoration: underline. |
<xmp>
|
Defined pre-formatted text. We should now be using the <pre> tag for this. |
So if any of these tags have been a regular part of your HTML vocabulary, make sure you get into the habit of using new methods to achieve the same effect.
great summary of the major commands, good article, thanks
Nice tutorial.. thanks for sharing..
Hi,
Great way of explanation,great tutorial.
thanks for sharing!
Thanks for this quick guide to the new tags and which ones to omit.