22个HTML5的初级技巧

document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup");
document.createElement("nav");
document.createElement("menu");

<header>
<hgroup>
<h1> Recall Fan Page </h1>
<h2> Only for people who want the memory of a lifetime. </h2>
</hgroup>
</header>

<input type="text" name="someInput" required>
<input type="text" name="someInput" required="required">

<form method=post>
    <label for=someInput> your name: </label>
<input id=someInput type=text name=someInput placeholder="Douglas Quaid" required="required">
    <button type="submit">Go</button>
</form>

<input type="text" name="someInput" placeholder="douglas quaid" required="required" autofocus="autofocus">

<audio controls="controls" autoplay="autoplay">
    <source src="file.ogg" />
    <source src="file.mp3" />
    <a href="file.mp3">Download this file.</a>
</audio>

<video controls preload>
    <source src="cohagenPhoneCall.ogv" type="video/ogg"; codecs='vorbis, theora'" />
    <source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />
<div> your browser is old. <a href="cohagenPhoneCall.mp4">download this video instead.</a> </div>
</video>

<video preload="preload">
 ...
</video>

<video controls="controls" preload="preload">
...
</video>

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

alert( 'pattern' in document.createElement('input') ) // boolean;

<script>
 if (!'pattern' in document.createElement('input') ) {
    // do client/server side validation
 }
</script>

<h3> search results </h3>
<h6> They were interrupted, just after Quato said, <mark>"Open your Mind"</mark>. </h6>