This industry moves
fast—really fast! If you're not careful, you'll be left in its dust. So, if
you're feeling a bit overwhelmed with the coming changes/updates in HTML5, use
this as a primer of the things you must know.
The variety of new HTML5 tags allows the
developers to write their code quicker and make it more dynamic. Some old HTML5
features were renewed into new ones, some were removed at all, and others were
freshly made to help people create their websites in an easier manner.
New features
of HTML5
1. Video and Audio
Video and audio are the new tags which allow to embed a
video in the website. YouTube also declare video embed by giving the code to
embed for their videos. It helps the web to be more involved with multimedia. A
new tag is also available in HTML5 and that is audio tag. Which is used to
embed any audion in the web?
Example of using Video tag
<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'" />
<p>
Your browser is old. <a href="cohagenPhoneCall.mp4">Download
this video instead.</a> </p>
</video>
Example of using Audio tag
<audio autoplay="autoplay" controls="controls">
<source src="file.ogg" />
<source src="file.mp3" />
<a>Download this file.</a>
</audio>
2. nav
The nav element is used for the part of
a internet site that links to different pages at the website. The hyperlinks
can be organized a number of approaches. below, the hyperlinks are displayed
inside paragraph factors. An unordered list can also be used.
<nav>
<a href="/html/">HTML</a>
<a href="/css/">CSS</a>
<a href="/js/">JavaScript</a>
<a href="/jquery/">jQuery</a>
</nav>
3. Header
The header element can be used to
institution collectively introductory factors on a website, such as a business
enterprise brand, navigation objects, and occasionally, a search form.
<header>
<img src="company-logo.png">
<nav>
<p><a href="login.html">Log In</a></p>
<p><a href="signup.html">Sign Up</a></p>
<p><a href="contact.html">Contact Us</a></p>
</nav>
</header>
4. Canvas
canvas is a
tag of HTML which is newly introduced in HTML5. It is used to draw the images
on the fly. It can be used for visual images, rendering graphs, game graphics.
Example of canvas
<canvas id="myCanvas"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>
5. Footer
Footer is a
tag, used to define the footer of a document or a section. Usually it contains
the information about author and copyright etc. Address tag may be used to mark
up the contact information in the footer.
A document or section can have more than one
footer.
<footer>
<p>Posted by: Hege Refsnes</p>
<p>Contact information: <a href="mailto:someone@example.com">
someone@example.com</a>.</p>
</footer>
6. New types for input tags
input is an attribute which is an old attribute but in
HTML, it is reintroduced with new values like email, month, number, range,
search, tel, color, week, url, time, date, datetime-local etc.These are the new
values which can be contain by the input tag.
·
ContentEditable
It is an attribute which is used to permit the user to
edit the content. It creates What You See What You Get so easy. Content will be
editable by clicking on it.
·
Progress
This tag is used to check the progress of a task during
execution of that. Progress tag can used with the conjuction of JavaScript. It
is like progress bar.
<progress value="22" max="100"></progress>
·
section
Section tag is used to divide a document or in parts or
sections. For example: An article can have many sections like header, footer,
latest news and section for main content etc.
·
main
main is a tag which is used to contain the main content
of the page. More than one main tag is not accepted in the document and this
tag can not be inside in article, aside, footer, header tags. It does not
include the navigation bar, header and footer.
7. Email Inputs
If
we apply a type of "email" to form inputs, we can instruct the
browser to only allow strings that conform to a valid email address structure.
That's right; built-in form validation will soon be here! We can't 100% rely on
this just yet, for obvious reasons. In older browsers that do not understand
this "email" type, they'll simply fall back to a regular textbox.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>untitled</title>
</head>
<body>
<form action="" method="get">
<label for="email">Email:</label>
<input id="email" name="email" type="email" />
<button type="submit"> Submit Form </button>
</form>
</body>
</html>
How often have you found yourself writing some quickie
regular expression to verify a particular textbox. Thanks to the new pattern
attribute, we can insert a regular expression directly into our markup.
<form action="" method="post">
<label for="username">Create a Username: </label>
<input type="text"
name="username"
id="username"
placeholder="4 <> 10"
pattern="[A-Za-z]{4,10}"
autofocus
required>
<button type="submit">Go </button>
</form>
If you're moderately familiar with regular expressions,
you'll be aware that this pattern: [A-Za-z]{4,10}accepts only upper
and lowercase letters. This string must also have a minimum of four characters,
and a maximum of ten.
9.
The Output Element
As you probably have guessed, the output element
is used to display some sort of calculation. For example, if you'd like to
display the coordinates of a mouse position, or the sum of a series of numbers,
this data should be inserted into the output element.
As a simple example, let's insert the sum of two numbers
into an empty output with JavaScript, when a submit button
is pressed.
<form action="" method="get">
<p>
10 + 5 = <output name="sum"></output>
</p>
<button type="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 yet.'); }
})();
</script>
10.
The Data Attribute
We now officially have support for custom attributes
within all HTML elements. While, before, we could still get away with things
like:
<h1 id=someId customAttribute=value> Thank you, Tony. </h1>
The validations would kick up a fuss! But now, as long
as we preface our custom attribute with "data," we can officially use
this method. If you've ever found yourself attaching important data to
something like a class attribute, probably for JavaScript usage, this will come
as a big help!
These are some of the new features which are introduced
in the HTML5 version. There are many more features of HTML5 which are newly
introduced. Features of HTML5 are supported by the latest versions of browsers.
Thanks for reading! We've covered a lot, but have still only scratched the
surface of what's possible with HTML5. I hope this served as a helpful primer!
