Let us take this moment and revisit! Why HTML5?
Let us refresh the features provided by HTML5 and how they are helpful in today’s world of web development.
Thanks to the rise of new gadgets, such as smartphones, tablets, mobile watches, IoT, and many more, accessing the internet has become way easy! This has increased the need for similar user experience across all devices.
There was a need to have a seamless experience across all devices
HTML5 has lots of new features including support to multimedia, new tags, minimal usage of external plugins, etc
The HTML markup language has very much evolved with time and HTML5 is the latest version that comes with a plethora of new features and efficiency in the web development galaxy. The latest version is better integration of CSS, Java, and HTML components that are focused to make it easy for developers to create better apps and make the whole technology better accessible for mobile devices.
So let us go through the features and how to use them, in easy steps.
Feature 1: Doctype declaration is quite simple and easy.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
Feature 2: Supports audio and video controls
For Audio: Just need to add audio controls tag
<audio controls>
<source src=<YourMP3AudioFile.mp3> type="audio/mpeg”>
Your browser does not support audio
</audio>
For Video: Just need to add video controls tag
<video controls>
<source src="YourMP4VideoFile.mp4" type="video/mp4">
Your browser does not support video.
</video>
Feature 3: Support for graphics
- Vector graphics is additionally an integral part of HTML5 like SVG and canvas.
- HTML5 allows the drawing of shapes like circle, rectangle, triangle, etc.
- It is supported by all-new browsers like Firefox, Mozilla, Chrome, Safari, etc.
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="yellow" />
</svg>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>
Feature 4: Introduced semantic attributes
New elements for web structure like nav, header, footer, article, section, nav, aside, figure are introduced. The below example shows the usage of some semantic attributes.
<article>
<header>
<h1>A heading here</h1>
<p>Some subtitles here</p>
<p>Some additional information here</p>
</header>
<p>Lorem Ipsum dolor set amet....</p>
<section>
<h2>Topic 1</h2>
<p>Topic 1 details and more and more information</p>
</section>
<footer>
<p>Developed and Published</p>
<p>
<a href="mailto:support@website.com">support@website.com
</a>
</p>
</footer>
</article>
Feature 5: Character encoding is simple and easy
Simply add one line and you are set.
<meta charset=“UTF-8”>
Feature 6: Track GeoLocation
One can track the GeoLocation of a user easily by using JS GeoLocation API.
<!DOCTYPE html>
<html>
<body>
<p>Click the button to get your coordinates.</p>
<button onclick="getLocation()">Try It</button>
<p id="demo"></p>
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
} function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude;
}
</script>
</body>
</html>
Feature 7: Uses application cache to store offline data.
<!DOCTYPE html>
<html>
<body>
<div id="result"></div>
<script>
// Check browser support
if (typeof(Storage) !== "undefined") {
// Store
localStorage.setItem("lastname", "shah");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
}
</script>
</body>
</html>
Feature 8: Supports calendar operations
Modern form elements like date, time, week, email, and many more are launched.
<input type="week" name="week" id="my-week" min="2020-W18" max="2020-W26" required>
</input>
Miscellaneous features
- Allows JavaScript to run in the background. This is possible due to the JS web worker API in HTML5. JS worker API is integrated into HTML5, and that’s the reason it can now run JavaScript within the web browser, instead of the browser interface thread
- More mobile-friendly.
- Capable of handling inaccurate syntax.
- Supports async and ping attributes
- Supports drag and drop effects.
I think the feature list can go on and on. But I hope with this article you can at least get some basic understanding of what’s new and supported with new evolving HTML5 language!
Top comments (0)