HTML5: new tag attributes

HTML5 Logo

In previous articles I have tried to explain which new tags HTML5 allows us to use, but there are also lots of new tag attributes that are available, it is at least as important to know those new attributes as it is to know the new HTML5 tags.

data attribute

In HTML5 users can create custom attributes that will be valid HTML5 code, the only rule is that the attribute must be prefixed with data-, for example data-foo="bar".

Can i use it today?

Yes but it's recommended that you use a specific prefix after the data prefix for your app to avoid conflicts with other libraries you use that also use the data attribute but may not have an own prefix. The attribute name should not contain any uppercase letters, it must be at least one character long and the value can contain any string, so a stringified json string will be ok, too.

Example


<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>html5 data attribute</title>
		<script>
			function initialize() {
			
				var example = document.querySelector('#example');

				// Add new data attributes via JS.
				example.dataset.myprefixFoo = 'bar';
				// or
				// example.setAttribute('data-myprefix-foo', 'bar');
				
				// var fooAttribute = example.getAttribute('data-myprefix-foo');
				
				for (var key in example.dataset) {
					console.log(key, ': ', example.dataset[key]);
				}
			
			}
		</script>
	</head>
	<body onload="initialize();">
		<p id="example" data-myprefix-hello="world">Example</p>
	</body>
</html>

John Resig wrote an excellent article about the data attribute you should read.

async attribute

A useful new attribute for script tags is the async attribute. It ensures you scripts get loaded asynchronously and don't block you page rendering. Async is useful for all javascript files that have code that you page needs at rendering time, but only later to progressively enhance your page.


<script src="example.js" async></script>

new input field types

  • tel
  • search
  • url
  • email
  • datetime
  • date
  • month
  • week
  • time
  • datetime-local
  • number
  • range
  • color

An howto for using yepnope and modernizr to detect the new native form input types or use a fallback can be found on css-tricks.com.

Can i use it today?

I don't think those new input field types should be used today, at least you should check for their support using a library like modernizr and if your browser doesn't support them you should use a javascript library like jQuery UI or DojoToolkit form widgets.


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>html5 form input types</title>
    </head>
    <body>
        <form>
            <ul>
                <li><input type="tel" placeholder="tel" required="required"></li>
                <li><input type="search" placeholder="search" autofocus="autofocus"></li>
                <li><input type="url" placeholder="url"></li>
                <li><input type="email" placeholder="email"></li>
                <li><input type="datetime" placeholder="datetime"></li>
                <li><input type="date" placeholder="date"></li>
                <li><input type="month" placeholder="month"></li>
                <li><input type="week" placeholder="week"></li>
                <li><input type="time" placeholder="time"></li>
                <li><input type="datetime-local" placeholder="datetime-local"></li>
                <li><input type="number" placeholder="number"></li>
                <li><input type="range" placeholder="range"></li>
                <li><input type="color" placeholder="color" required></li>
                <li><input type="text" placeholder="pattern attribute" id="part" name="part" required pattern="[A-Z]{3}[0-9]{4}" title="Part numbers consist of 3 uppercase letters followed by 4 digits." /></li>
                <li><input type="submit" value="go4it"></li>
            </ul>
        </form>
    </body>
</html>

html speech input field type

Side note not related to HTML5: Since google chrome 11, there is also a new input field attribute x-webkit-speech (not a standard from w3c and therefore not part of HTML5 / for chrome only)

For more information regarding this new input type check out the Speech Input API Specification.


<input type="text" x-webkit-speech>

placeholder attribute

There is a new attribute called the placeholder attribute for forms input fields. It will create a semi transparent text inside input fields indented to eventually replace the label, or to show an example of valid input for a given field.


<input type="text" placeholder="enter your first name into this field, e.g. Tom" >

autofocus attribute

Use the autofocus attribute as attribute of the input field of your form if you want that field to be selected open opening the page.


<input type="text" type="searchbox" autofocus>

required attribute

Form fields can now have the attribute required, browsers like chrome will show a tooltip message near the field if the user tries to submit the form but the field is still empty and will prevent the submit event until the required field is not empty anymore.

You can use it like this <input required /> or <input required="required" /> both are OK, depends what you prefer.


<input type="text" required>

pattern attribute

Using the pattern attribute you can define a regular expression that your field content is validated against. You should also use the title attribute and explain what you expect from the user.


<input type="text" placeholder="pattern attribute" id="part" name="part" required pattern="[A-Z]{3}[0-9]{4}" title="Part numbers consist of 3 uppercase letters followed by 4 digits." />

If the input does not match the pattern, the CSS selector "invalid" will be added to the field and you can use it to style the field differently:


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>html5 form input types</title>

		<style>
			:invalid {
			  border: 1px solid red;
			}
		</style>

	</head>

	<body>

		<form action="" method="post">  
			<label for="username">Create a Username: </label>  
			<input type="text"  
			   name="username"  
			   id="username"  
			   placeholder="enter at least 4 characters"  
			   pattern="[A-Za-z]{4,10}"  
			   autofocus  
			   required>  
			<button type="submit">Go </button>  
		</form>

	</body>
</html>

Read on ...

You will find lots of information about new tag attributes on the w3c page.

link types

HTML5 defines some types of links using the rel attribute. One of the new values is prefetch with tells the browser that it can prefetch that link because it is likely this resource next. Or the values prev and next which are useful for pagination. Nofollow tells search engines that the link should not influence link targets rating (its useful to avoid hackers to spam your comments sections with posts full of links if you apply automatically nofollow to all links that are in comments).

W3.org has is a list and description of all rel values available in HTML5.

obsolete attributes

To get an overview of deprecated attributes i recommend reading this w3c document.

Microdata

Microdata are machine-readable labels that can enhance the semantic value of your documents for crawlers like google bot.


<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>html5 microdata</title>
	</head>
	<body>
		<section id="articles" itemscope itemtype="http://schema.org/Blog">
			<article class="article" itemscope itemtype="http://schema.org/BlogPosting">
				<header>
					<h1 itemprop="name">This is the article title</h1>
					<time itemprop="datePublished" datetime="2009-10-09">2 days ago</time>
					<p itemprop="description">This is the article description.</p>
					<a itemprop="url" href="http://www.example.com/articles/permalink">Permalink of this article</a>
					<div itemprop="author">
						<span itemscope itemtype="http://schema.org/Person">
							<p>Posted by <span itemprop="name">Donald Duck</span></p>
						</span>
					</div>
				</header>
				<div itemprop="articleBody">
					<p>This is the article body.</p>
				</div>
				<footer>
					<a href="http://www.example.com/tags/tagABC" rel="tag">
						<span itemprop="keywords">tagABC</span>
					</a>
					<a href="http://www.example.com/tags/tagXYZ" rel="tag">
						<span itemprop="keywords">tagXYZ</span>
					</a>
				</footer>
				<section id="comments">
					<h1>Comments</h1>
					<article class="comment" itemprop="comment" itemscope itemtype="http://schema.org/UserComments" id="c1">
						<header>
							<div itemprop="creator">
								<span itemscope itemtype="http://schema.org/Person">
									<p>Posted by <span itemprop="name">Mickey Mouse</span></p>
								</span>
							</div>
							<p><time itemprop="commentTime" datetime="2009-10-10">45 minutes ago</time></p>
						</header>
						<p>I think this article is very well written!</p>
					</article>
					<article class="comment" itemprop="comment" itemscope itemtype="http://schema.org/UserComments" id="c2">
						<header>
							<div itemprop="creator">
								<span itemscope itemtype="http://schema.org/Person">
									<p>Posted by <span itemprop="name">Mini Mouse</span></p>
								</span>
							</div>
							<p><time itemprop="commentTime" datetime="2009-10-10">15 minutes ago</time></p>
						</header>
						<p>I agree with you, Mickey.</p>
					</article>
				</section>
			</article>
		</section>
	</body>
</html>

The w3c microdata specification can be found on the w3.org website.

A definition of structures for microdata can be found on the schema.org website.

Google has a very useful page about microdata, at the end of the page there are examples of microdata that google recognizes today ,like people or reviews. But even if google recognizes you microdata efforts yet, it's good you already add them today, because google is not the only search engine, others may already use your microdata even if google doesn't and as soon as google starts to support them you will be the first one to who has a compliant website. Go for example to the page reviews and there you will find examples howto use microdata to ensure google uses your data to create rich snippets that will enhance the search results of your site in google results pages.

You can test your page to check if google recognizes your microdata using the google webmaster tools rich snippets tool.