HTML5 is a markup language used for structuring and presenting content on the World Wide Web. It was finalized, and published, on 28 October 2014 by the World Wide Web Consortium (W3C). This is the fifth revision of the HTML standard since the inception of the World Wide Web.
More Explanation on HTML 5
HTML5 was developed to solve compatibility problems that affect the current standard, HTML 4. This is One of the biggest differences between HTML5 and previous versions of the standard is that older versions of HTML require proprietary plugins and APIs. (This is why a Web page that was built and tested in one browser may not load correctly in another browser.) HTML5 provides one common interface to make loading elements easier. For example, there is no need to install a Flash plugin in HTML5 because the element will run by itself.
One of the design goals for HTML5 is to support for multimedia on mobile devices. New syntactic features were introduced to support this, such as video, audio and canvas tags. HTML5 also introduces new features which can really change the way users interact with documents including:
As of now, HTML5 is in the "Call for Review" state, and the W3C expects that it will reach its final state by the end of 2014.
-We can also say HTML5 is a W3C specification that defines the fifth major revision of the Hypertext Mark-up Language in short HTML. One of the major changes in HTML5 is in respect to how HTML addresses Web applications.
Other new features in HTML5 include specific functions for embedding graphics, audio, video, and interactive documents.
New elements also allow you to define sections of your Web page using new tags such as < article > which defines an article.
< nav > which defines navigation links.
< source > which defines media resources, and many others.
For example, the navigation section of your page would be enclosed in the < nav > tags.
What is new Elements in HTML 5
Here are the some list of the new HTML5 elements with description of what they are used for based on W3CMessages for HTML lovers If you're not careful, you'll be left in it's dust. So, if you're feeling a bit overwhelmed with the coming changes/updates in HTML5 then use this as a primer of the things you must know.
Starting from beginning:
New Doctype.
<!DOCTYPE html>
No More Types for Scripts and Links.
<link rel="stylesheet" href="path/to/stylesheet.css" />
<script src="path/to/script.js"></script>
The Figure Element.
<figure>
<img src="path/to/image" alt="About image" />
<figcaption>
<p>This is an image of something interesting. </p>
</figcaption>
</figure>
<small> Redefined.
<small> element to create subheadings that are closely related to the logo. It's a useful presentational element; however, now, that would be an incorrect usage. The <small> element has been redefined, more appropriately, to refer to small print. Imagine a copyright statement in the footer of your site; according to the new HTML5 definition of this element; the <small> would be the correct wrapper for this information.
To Quote or Not to Quote.
<pclass=myClassid=someId> Start the reactor.
You can Make your Content EditableThe new browsers have a nifty new attribute that can be applied to elements, calledcontenteditable. As the name implies, this allows the user to edit any of the text contained within the element, including its children. There are a variety of uses for something like this, including an app as simple as a to-do list, which also takes advantage of local storage.
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="utf-8">
<title>untitled</title>
</head>
<body>
<h2> To-Do List </h2>
<ulcontenteditable="true">
<li> Break mechanical cab driver. </li>
<li> Drive to abandoned factory
<li> Watch video of self </li>
</ul>
</body>
</html>
Email InputsIf we apply a type of "email" to form inputs, we can instruct the browser to onlyallow strings that conform to a valid email address structure.
PlaceholdersBefore HTML5, we had to utilize a bit of JavaScript to create placeholders for textboxes. Sure, you can initially set the value attribute how you see fit, but, as soon as the user deletes that text and clicks away, the input will be left blank again. Theplaceholder attribute remedies this.
Ex:- <inputname="email"type="email"placeholder="[email protected]"/>
But problem is Firefox and Opera, don't currently support the placeholder attribute.
Local StorageNow we can make advanced browsers "remember" what we type, even after the browser is closed or is refreshed.
Before we use
<div id="header">
...
</div>
<div id="footer">
...
</div>
Now no need to write header and footer inside div.
The Semantic <Header> and <Footer>Divs have no semantic structure even after an id is applied. Now, with HTML5, we have access to the <header> and <Footer> elements.
<header>
...
</header>
<footer>
...
</footer>
Required Attribute
Forms allow for a new required attribute, which specifies, naturally, whether a particular input is required. Dependent upon your coding preference, you can declare this attribute like:
<input type="text" name="someInput" required="required">
Autofocus Attribute
HTML5 removes the need for JavaScript solutions. If a particular input should be "selected," or focused, by default, we can now utilize the autofocus attribute.
Like:- <inputtype="text"name="MyName"placeholder="I am Osingh"required autofocus>
Audio Support
<audio autoplay="autoplay"controls="controls">
<sourcesrc="Myfile.ogg"/>
<sourcesrc="Myfile.mp3"/>
<a>Download this file.</a>
</audio>
Video Support
<video controls preload>
<sourcesrc="DhoomRingtone.ogv"type="video/ogg; codecs='doom, dhoom'"/>
<sourcesrc="DhoomRingtone.mp4"type="video/mp4; 'codecs='avc1.414TY1E, mp4a.40.2'"/>
<p> Your browser is old please upgrade. <ahref="cohagenPhoneCall.mp4">Download this video instead.</a> </p>
</video>
Display Controls
<video preload controls>
Regular Expressions
This is cool new pattern attribute, we can insert a regular expression directly into our markup.
<form action="" method="post">
<label for="username">Create a User: </label>
<input type="text"
name="username"
id="username"
placeholder="3 <> 8"
pattern="[A-Za-z]{3,8}"
autofocus
required>
<button type="submit">Submit</button>
</form>
Mark Element
<mark> element is a highlighter. A string wrapped within this tag should be relevant to the current actions of the user.
Link :-
<p> Hey guys I ma checking new marker element would you like it <mark> "Check your browsers"</mark>. </p>
The Data Attribute
<h1 id=someId customAttribute=value> Thank's, Human. </h1>
HTML Snippet and Retrieve Value of the Custom AttributeHTML Snippet-
<div id="myDiv" data-custom-attr="My Value"> your stuff goes here... </div>
Retrieve Value of the Custom Attribute--
var the Div = document.getElementById('myDiv');
var attr = theDiv.getAttribute('data-custom-attr');
alert(attr); // My Value
It can also be used in your CSS, like for this silly and lame CSS text changing example.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sort of Lame CSS Text Changing</title>
<style>
h1 { position: relative; }
h1:hover { color: transparent; }
h1:hover:after {
content: attr(data-hover-response);
color: black;
position: absolute;
left: 0;
}
</style>
</head>
<body>
<h1 data-hover-response="I Said Don't Touch Me!"> Don't Touch Me </h1>
</body>
</html>
The Output ElementI am using a simple example to insert sum of two numbers into an empty OUTPUT with JS, When hit submit button.
<formaction=""method="get">
<p>
10 + 5 = <outputname="sum"></output>
</p>
<buttontype="submit"> Calculate </button>
</form>
<script>
(function() {
var f = document.forms[0];
if ( typeof f['sum'] !== 'undefined' ) {
f.addEventListener('submit', function(e) {
f['sum'].value = 15;
e.preventDefault();
}, false);
}
else { alert('Your browser is not ready for results.'); }
})();
</script>
OUTPUT: 10+5= 15
And this element can also receive a for attribute.
Create Sliders with Range Input
<input type="range">
Extra HTML5 Form Features
<form></form>
When we should Use a <div> tag
Lots of people has some doubts when we should use <div> tag. Because now we have access of <header>, <articles>, <nav>, <section>, <footer> etc. and is there any place to use DIV.
Yes we can use DIVs, because div should be utilized when there is no better element for the jobs.
Suppose, if we find that we need to wrap a block of code within a wrapper class/element specifically for the purpose of positioning the content, that time a <div> makes perfect sense for us. However, if you're instead wrapping a new blog post and a list of links in your footer, consider using the <article> and <nav> elements for this.
HTML5 Body Structure
<!DOCTYPE html>
<html lang="en">
<head>
<title>A tiny document</title>
</head>
<body>
<h1>Main heading in my document</h1>
<!-- Note that it is "h" + "1", not "h" + the letters "one" -->
<p>Look Ma, I am coding <abbr title="Hyper Text Markup Language">HTML</abbr>.</p>
</body>
</html>
More Explanation on HTML 5
HTML5 was developed to solve compatibility problems that affect the current standard, HTML 4. This is One of the biggest differences between HTML5 and previous versions of the standard is that older versions of HTML require proprietary plugins and APIs. (This is why a Web page that was built and tested in one browser may not load correctly in another browser.) HTML5 provides one common interface to make loading elements easier. For example, there is no need to install a Flash plugin in HTML5 because the element will run by itself.
One of the design goals for HTML5 is to support for multimedia on mobile devices. New syntactic features were introduced to support this, such as video, audio and canvas tags. HTML5 also introduces new features which can really change the way users interact with documents including:
- New parsing rules for enhanced flexibility
- New attributes.
- Elimination of outmoded or redundant attributes
- Drag and drop capabilities from one HTML5 document to another
- Offline editing
- Messaging enhancements
- Detailed rules for parsing and DOM
- MIME and protocol handler registration
- A common standard for storing data in SQL databases (Like:- Web SQL)
As of now, HTML5 is in the "Call for Review" state, and the W3C expects that it will reach its final state by the end of 2014.
-We can also say HTML5 is a W3C specification that defines the fifth major revision of the Hypertext Mark-up Language in short HTML. One of the major changes in HTML5 is in respect to how HTML addresses Web applications.
Other new features in HTML5 include specific functions for embedding graphics, audio, video, and interactive documents.
New elements also allow you to define sections of your Web page using new tags such as < article > which defines an article.
< nav > which defines navigation links.
< source > which defines media resources, and many others.
For example, the navigation section of your page would be enclosed in the < nav > tags.
What is new Elements in HTML 5
Here are the some list of the new HTML5 elements with description of what they are used for based on W3CMessages for HTML lovers If you're not careful, you'll be left in it's dust. So, if you're feeling a bit overwhelmed with the coming changes/updates in HTML5 then use this as a primer of the things you must know.
Starting from beginning:
New Doctype.
<!DOCTYPE html>
No More Types for Scripts and Links.
<link rel="stylesheet" href="path/to/stylesheet.css" />
<script src="path/to/script.js"></script>
The Figure Element.
<figure>
<img src="path/to/image" alt="About image" />
<figcaption>
<p>This is an image of something interesting. </p>
</figcaption>
</figure>
<small> Redefined.
<small> element to create subheadings that are closely related to the logo. It's a useful presentational element; however, now, that would be an incorrect usage. The <small> element has been redefined, more appropriately, to refer to small print. Imagine a copyright statement in the footer of your site; according to the new HTML5 definition of this element; the <small> would be the correct wrapper for this information.
To Quote or Not to Quote.
<pclass=myClassid=someId> Start the reactor.
You can Make your Content EditableThe new browsers have a nifty new attribute that can be applied to elements, calledcontenteditable. As the name implies, this allows the user to edit any of the text contained within the element, including its children. There are a variety of uses for something like this, including an app as simple as a to-do list, which also takes advantage of local storage.
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="utf-8">
<title>untitled</title>
</head>
<body>
<h2> To-Do List </h2>
<ulcontenteditable="true">
<li> Break mechanical cab driver. </li>
<li> Drive to abandoned factory
<li> Watch video of self </li>
</ul>
</body>
</html>
Email InputsIf we apply a type of "email" to form inputs, we can instruct the browser to onlyallow strings that conform to a valid email address structure.
PlaceholdersBefore HTML5, we had to utilize a bit of JavaScript to create placeholders for textboxes. Sure, you can initially set the value attribute how you see fit, but, as soon as the user deletes that text and clicks away, the input will be left blank again. Theplaceholder attribute remedies this.
Ex:- <inputname="email"type="email"placeholder="[email protected]"/>
But problem is Firefox and Opera, don't currently support the placeholder attribute.
Local StorageNow we can make advanced browsers "remember" what we type, even after the browser is closed or is refreshed.
Before we use
<div id="header">
...
</div>
<div id="footer">
...
</div>
Now no need to write header and footer inside div.
The Semantic <Header> and <Footer>Divs have no semantic structure even after an id is applied. Now, with HTML5, we have access to the <header> and <Footer> elements.
<header>
...
</header>
<footer>
...
</footer>
Required Attribute
Forms allow for a new required attribute, which specifies, naturally, whether a particular input is required. Dependent upon your coding preference, you can declare this attribute like:
<input type="text" name="someInput" required="required">
Autofocus Attribute
HTML5 removes the need for JavaScript solutions. If a particular input should be "selected," or focused, by default, we can now utilize the autofocus attribute.
Like:- <inputtype="text"name="MyName"placeholder="I am Osingh"required autofocus>
Audio Support
<audio autoplay="autoplay"controls="controls">
<sourcesrc="Myfile.ogg"/>
<sourcesrc="Myfile.mp3"/>
<a>Download this file.</a>
</audio>
Video Support
<video controls preload>
<sourcesrc="DhoomRingtone.ogv"type="video/ogg; codecs='doom, dhoom'"/>
<sourcesrc="DhoomRingtone.mp4"type="video/mp4; 'codecs='avc1.414TY1E, mp4a.40.2'"/>
<p> Your browser is old please upgrade. <ahref="cohagenPhoneCall.mp4">Download this video instead.</a> </p>
</video>
Display Controls
<video preload controls>
Regular Expressions
This is cool new pattern attribute, we can insert a regular expression directly into our markup.
<form action="" method="post">
<label for="username">Create a User: </label>
<input type="text"
name="username"
id="username"
placeholder="3 <> 8"
pattern="[A-Za-z]{3,8}"
autofocus
required>
<button type="submit">Submit</button>
</form>
Mark Element
<mark> element is a highlighter. A string wrapped within this tag should be relevant to the current actions of the user.
Link :-
<p> Hey guys I ma checking new marker element would you like it <mark> "Check your browsers"</mark>. </p>
The Data Attribute
<h1 id=someId customAttribute=value> Thank's, Human. </h1>
HTML Snippet and Retrieve Value of the Custom AttributeHTML Snippet-
<div id="myDiv" data-custom-attr="My Value"> your stuff goes here... </div>
Retrieve Value of the Custom Attribute--
var the Div = document.getElementById('myDiv');
var attr = theDiv.getAttribute('data-custom-attr');
alert(attr); // My Value
It can also be used in your CSS, like for this silly and lame CSS text changing example.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sort of Lame CSS Text Changing</title>
<style>
h1 { position: relative; }
h1:hover { color: transparent; }
h1:hover:after {
content: attr(data-hover-response);
color: black;
position: absolute;
left: 0;
}
</style>
</head>
<body>
<h1 data-hover-response="I Said Don't Touch Me!"> Don't Touch Me </h1>
</body>
</html>
The Output ElementI am using a simple example to insert sum of two numbers into an empty OUTPUT with JS, When hit submit button.
<formaction=""method="get">
<p>
10 + 5 = <outputname="sum"></output>
</p>
<buttontype="submit"> Calculate </button>
</form>
<script>
(function() {
var f = document.forms[0];
if ( typeof f['sum'] !== 'undefined' ) {
f.addEventListener('submit', function(e) {
f['sum'].value = 15;
e.preventDefault();
}, false);
}
else { alert('Your browser is not ready for results.'); }
})();
</script>
OUTPUT: 10+5= 15
And this element can also receive a for attribute.
Create Sliders with Range Input
<input type="range">
Extra HTML5 Form Features
<form></form>
When we should Use a <div> tag
Lots of people has some doubts when we should use <div> tag. Because now we have access of <header>, <articles>, <nav>, <section>, <footer> etc. and is there any place to use DIV.
Yes we can use DIVs, because div should be utilized when there is no better element for the jobs.
Suppose, if we find that we need to wrap a block of code within a wrapper class/element specifically for the purpose of positioning the content, that time a <div> makes perfect sense for us. However, if you're instead wrapping a new blog post and a list of links in your footer, consider using the <article> and <nav> elements for this.
HTML5 Body Structure
<!DOCTYPE html>
<html lang="en">
<head>
<title>A tiny document</title>
</head>
<body>
<h1>Main heading in my document</h1>
<!-- Note that it is "h" + "1", not "h" + the letters "one" -->
<p>Look Ma, I am coding <abbr title="Hyper Text Markup Language">HTML</abbr>.</p>
</body>
</html>