New html5 tips and techniques for the latest evolution of the standard that defines HTML is HTML5.
It represents two different concepts: Latest version of the language HTML, with new elements, attributes, and behaviors.
HTML tips & Techniques:
New Doctype
Still using XHTML doctype? Its time to remove.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Switch to the new HTML5 doctype.
<!DOCTYPE html>
Not to Quote
Not necessary to wrap your attributes in quotation marks if you don’t want to. You don’t have to close your elements also.
<p class=myClass id=someId>
Header and Footer
Old ways:
<div id="header"> ... </div>
<div id="footer"> ... </div>
New ways:
<header> ... </header>
<footer> ... </footer>
Placeholders
Initially set the value attribute, but, when user deletes that text and clicks away, the input is left blank again.
<input name="email" type="email" placeholder="yourname@example.com" />
Email Inputs
If we use a type of “email” to form inputs, we can tell the browser to only allow strings that conform to a valid email address format.
<input id="email" name="email" type="email" />
The Figure Element
Previous mark-up for an image
<img src="images/image.jpg" /> <p>Image sample. </p>
Now combine <figure> with <figcaption> element.
<figure> <img src="images/image.jpg" /> <figcaption> <p>Image sample. </p> </figcaption> </figure>
<small> Redefined
According to the new HTML5 the <small> is the correct wrapper for information.
No More Types for Scripts and Links
Old way:
<link rel="stylesheet" href="style.css" type="text/css" /> <script type="text/javascript" src="script.js"></script>
New way:
<link rel="stylesheet" href="style.css" /> <script src="script.js"></script>
Your content can be editable
As the name implies, it allows to edit any of the text within the element, including its children.
<div contenteditable=true>
Autofocus Attribute
By autofocus attribute particular input should be “selected,” or focused, by default.
<input type="text" name="name" placeholder="Your name here" required autofocus>
Required Attribute
Required attribute specifies whether a particular input is required or not.
<input type="text" name="name" required> <input type="text" name="name" required="required">
Audio Support
HTML5 now offers the <audio> element.
<audio autoplay="autoplay" controls="controls">
<source src="audiofile.ogg" />
<source src="audiofile.mp3" />
</audio>Video Support
HTML5 now offers the <video> element. HTML5 doesn’t specify a specific codec for video, it’s up to the browsers to decide.
<video controls preload>
<source src="videofile.ogv" type="video/ogg; codecs='vorbis, theora'" />
<source src="videofile.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.23'" />
</video>Regular Expressions
A quickie regular expression validates the user input.
<input type="text" name="name" id="name" pattern="[A-Za-z]{4,10}" autofocus required>The Data Attribute
<div id="myDiv" data-myvalue="My Value"> This value </div>
Create Sliders with the Range Input
It introduces the new range type of input.
<input type="range" name="range" min="0" max="5" value="">
Mark Element
The <mark> element as a highlighter.
<p> Html5 uses, <mark>"mark tag"</mark> as a highlighter. </p>