HTML5 tips

HTML5

1.  <!doctype html> (simple and clean)

      in HTML4 it would be:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>

2. data-

<img id=”img1″ src=”eiffelTower.jpg” alt=”Eiffel Tower”
data-country=”fr”
data-imageType=”thumb”
data-fullURL=”/photos/large/eiffelTower.jpg”>

<img id=”img2″ src=”coliseum.jpg” alt=”Coliseum”
data-country=”it”
data-imageType=”thumb”
data-fullURL=”/photos/large/coliseum.jpg”>

access the values of data- attributes using the DOM methods such as element.getAttribute()

// Displays "/photos/large/eiffelTower.jpg": 
  alert( document.getElementById('img1').dataset.fullurl );

Morten Barklund has created a nice jQuery plugin that adds datasetsupport to all browsers.

3.  <figure> avoid the plague of divitis by replacing non-semantic div and span elements with more meaningful element types

header and footer for page and article headers and footers respectively

article for encapsulating an article or blog post

nav for representing the site navigation

figure and figcaption for including figures and figure captions

time for representing dates and times
<!doctype html>
<html lang=”en”>
<head>
<title>New WonderWidget Released</title>
</head>
<body>

<nav>
<ul>
<li><a href=”/”>Home</a></li>
<li><a href=”/archive/”>Archive</a></li>
<li><a href=”/about/”>About</a></li>
</ul>
</nav>

<article>

<header>
<h1>New WonderWidget Released</h1>
<p><time pubdate datetime=”2011-07-11″></time></p>
</header>

<p>Curabitur tortor. Pellentesque nibh. Aenean quam.
In scelerisque sem at dolor. Maecenas mattis. Sed
convallis tristique sem. Proin ut ligula vel nunc
egestas porttitor.</p>

<figure>
<img src=”eiffelTower.jpg” alt=”Eiffel Tower”>
<figcaption>The Eiffel Tower, earlier today</figcaption>
</figure>

<footer>
<p>Posted by: Matt Doyle</p>
<p><a href=”comments/”>Comments</a></p>
</footer>
</article>

</body>
</html>
Internet Explorer 8 and earlier don’t understand these new element types, which means that you can’t style them with CSS or access them in the DOM via JavaScript. To work around this, check out Remy Sharp’s HTML5 Shiv script.

 

4. New attributes

contenteditable is now officially part of the HTML standard, making it easier to create rich-text web editors.

spellcheck allows you to toggle spell checking for a text field or editable element.

reversed lets you create an ordered list in reverse (descending) order.

draggable and dropzone let you add browser-native drag-and-drop functionality to any element (here’s a great tutorial on HTML5 drag-and-drop).

target attribute, which lets you target iframes, open links in new windows has been  reinstated with HTML5

 

5. Wrap a link

  • links can contain flow content, which is an HTML5 term roughly equivalent to HTML4’s “block-level”

<a href=”mypage.html”>
<div>
<h2>Linked div</h2>
<p>Here’s an entire linked div containing an h2 heading,
a paragraph, and an image!</p>
<img src=”eiffelTower.jpg” alt=”Eiffel Tower”>
</div>
</a>

  • The RULE is that the content inside the link must not itself be interactive — this rules out other a elements, as well as buttons, iframes, select menus,

6. commonly-used snippets

  • <!– HTML4 –>
  • <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
  • <!– HTML5 –>
  • <meta charset=”utf-8″>
  •  ———————————————–
  • <!– HTML4 –>
  • <script type=”text/javascript”> … </script>
  • <!– HTML5 –>
  • <script> … </script>
  •  ———————————————–
  • <!– HTML4 –>
  • <style type=”text/css”> … </style>
  • <!– HTML5 –>
  • <style> … </style>

7. Enhanced forms

  • email, url, tel, number, range, date, datetime, search, and more. These serve 2 main purposes:

i.      Browsers can automatically validate the fields

ii.      Some browsers, such as Mobile Safari, can display context-aware keyboards based on the field type. For example, if the user is entering a telephone number into an <input type="tel"> field then the browser displays a telephone keypad.

  • autofocus attribute that automatically focuses a form field of your choosing when the form first loads.
  • placeholder attribute that lets you display placeholder text inside a field to guide the user.
  • required attribute for making form fields required. As with the input types, this triggers automatic browser validation — the user can’t submit the form until they’ve filled in all required fields.

 

http://www.elated.com/articles/7-lovely-things-about-html5-markup/
http://www.w3.org/TR/html5-diff/
http://diveintohtml5.org/peeks-pokes-and-pointers.html
http://firefogg.org/index.html
http://handbrake.fr/
http://flowplayer.org/

Leave a Reply

Your email address will not be published. Required fields are marked *