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.
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 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>
Old ways:
<div id="header"> ... </div>
<div id="footer"> ... </div>
New ways:
<header> ... </header>
<footer> ... </footer>
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" />
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" />
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>
According to the new HTML5 the <small> is the correct wrapper for information.
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>
As the name implies, it allows to edit any of the text within the element, including its children.
<div >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 tips: Html5 uses, <mark>"mark tag"</mark> as a highlighter. </p>
There are a number of steps that need to be taken in order to fit…
Cryptocurrency has transformed from a digital experiment into a global financial force in just over…
Introduction Layoffs have always been a part of corporate life, but the way they’re happening…
Relocating is often an exciting milestone, whether you’re starting a new job, heading to college,…
When you select cheap domain names, it can have a significant impact on the success…
Shared hosting struggles to keep up the performance commitment. Therefore, low-cost VPS hosting is an…