Yeah yeah, I know. I know you know every hot web tech out there. Whether it's Angular, Ionic, Deno, Node, Django and what not! Really awesome.
But here's the thing, do you know HTML? Yes, that HyperText Markup Language? Oops! Again, I know you know HTML and you're a saint when coding a website with this language but...do you know how to add some extra batteries to power-up your HTML game?
Okay, what am I even talking about!? Just scroll down to know some of the really awesome HTML features (particularly HTML 5) offers to supercharge the markup game. ⚡
1️⃣ HTML 5 APIs 🔌
The HTML Geolocation API [Docs 📃]
If your website requires to retrieve a user's location information like in navigation or to use a map, the Geolocation API is here for you.
This is accessed by calling navigator.geolocation by which it adds a prompt to the user's browser asking them permission to access their location data.
Example:
function getLocation() {
// Check for the geolocation service
if (navigator.geolocation) {
navigator.geolocation.watchPosition(showPosition);
} else {
el.innerHTML = "Geolocation is not supported.";
}
}
function showPosition(position) {
el.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
The HTML Web Workers API [Docs 📃]
A web worker is an independent script running in the background without affecting the performance of the page while it's loading.
A worker can send messages to the JavaScript code that created it by posting messages to an event handler specified by that code. It uses the Worker() constructor to perform such an action.
Example:
// 1. CHECK FOR WEB WORKER SUPPORT
if (typeof(Worker) !== "undefined") {
// Supported!
} else {
// Not supported :(
}
// 2. CREATING A WEB WORKER OBJECT
if (typeof(w) == "undefined") {
w = new Worker("worker_file.js");
}
// 3. SEND A MESSAGE FROM WORKER
w.onmessage = function(event){
document.getElementById("workerdiv").innerHTML = event.data;
};
The HTML SSE API [Docs 📃]
SSE stands for Server-Sent Events. This event is triggered when a web page automatically gets updates from a server.
This API is contained in the EventSource interface.
Example:
// 1. CHECK SUPPORT
if(typeof(EventSource) !== "undefined") {
// Supported
} else {
// No server-sent events supported :(
}
// 2. RECIEVE EVENTS FROM SERVER
var source = new EventSource("myserver.php");
source.onmessage = function(event) {
document.getElementById("serverresult").innerHTML += event.data + "<hr>";
};
The HTML Web Storage API [Docs 📃]
With this API, web applications can store data locally within the user's browser. It includes both localStorage and sessionStorage.
The other option to go is to create cookies but web storage is better as it's more secure and you can store large amounts of data.
Example:
// 1. CHECK SUPPORT
if (typeof(Storage) !== "undefined") {
// supported!
} else {
// No Web Storage support :(
}
// 2. USING LOCALSTORAGE
// Store
localStorage.setItem("name", "Vaibhav");
// Retrieve
document.getElementById("namediv").innerHTML = localStorage.getItem("name");
// 2. USING SESSIONSTORAGE
sessionStorage.setItem('myName', 'Vaibhav');
2️⃣ HTML Event Attributes 🖱
Here are some of the attributes which you should start using in your DOM:
You can go to the MDN documentation of each of these attributes by clicking on them!
| Event no. | Attribute | Description | Example |
|---|---|---|---|
| 1. | onerror |
Script to be run when an error occurs | <img src="image.gif" onerror="error()"> |
| 2. | onload |
Fires after the page is finished loading | <body onload="load()"> |
| 3. | onresize |
Fires when the browser window is resized | <body onresize="resize()"> |
| 4. | onblur |
Fires the moment that the element loses focus | <input type="text" onblur="blur()"> |
| 5. | onsearch |
Fires when the user writes something in a search field | <input type="search" onsearch="search()"> |
| 6. | ondblclick |
Fires on a mouse double-click on the element | <button ondblclick="clicked()">Double-click</button> |
| 7. | onscroll |
Script to be run when an element's scrollbar is being scrolled | <div onscroll="scroll()"> |
| 8. | oncopy |
Fires when the user copies the content of an element | <input type="text" oncopy="copy()" value="Copy this tex"> |
| 9. | oncanplay |
Script to be run when a file is ready to start playing | <video oncanplay="canPlay()"> |
| 10. | ontoggle |
Fires when the user opens or closes the <details> element |
<details ontoggle="toggleDetail()"> |
3️⃣ Uncommon HTML Tags 🤪
Why not! Tell me, have you ever used them?
| Tag no. | Tag | Description | Example |
|---|---|---|---|
| 1. | <datalist> |
A datalist with pre-defined options (connected to an element) | MDN Example |
| 2. | <optgroup> |
Group related options with <optgroup> tags |
MDN Example |
| 3. | <ins> |
A text with a deleted part, and a new, inserted part | MDN Example |
| 4. | <wbr> |
A text with word break opportunities | MDN Example |
| 5. | <cite> |
Used to describe a reference to a cited creative work | MDN Example |
Read more absurd HTML tags here:
4️⃣ HTML 5 Attributes 😋
Check out the following cool attributes and make sure you visit their docs by clicking on them:
▶ accesskey: This is a global attribute which specifies a shortcut key to activate/focus an element.
Example:
<a href="https://mailchi.mp/f59beeac6b9b/devupdates" accesskey="d">
Subscribe to Dev Weekly newsletter</a>
▶ draggable: Another global attribute which specifies whether an element is draggable or not.
Example:
<p draggable="true">This is a draggable paragraph.</p>
▶ itemprop: This lets you add properties to an item. You can easily group items with this attribute.
Example:
<div itemscope itemtype="http://schema.org/Movie">
<h1 itemprop="name">Avatar</h1>
<span>Director:
<span itemprop="director">James Cameron</span>
(born August 16, 1954)</span>
<span itemprop="genre">Science fiction</span>
<a href="../movies/avatar-theatrical-trailer.html"
itemprop="trailer">Trailer</a>
</div>
▶ spellcheck: It specifies whether the element is to have its spelling and grammar checked or not.
Example:
<p spellcheck="true">This is a paragraph with spell check on.</p>
▶ hidden: A boolean attribute which specifies that an element is not yet, or is no longer, relevant.
Example:
<p hidden>This paragraph should be hidden.</p>
Where to next? 🤔
I recommend you to practise these tags/APIs/attributes in your projects or just test it on your next CodePen. Here are more links which you might like:
Thanks for reading, I appreciate it! Have a good day. (✿◕‿◕✿)
This bathroom's commit history is making us all look bad! Has yours been Git-ing greener as well? 😝
— Microsoft Developer UK (@msdevUK) September 1, 2020
Image source: https://t.co/HEzYrUa6Ol#DevHumour #Git #WFH pic.twitter.com/GWu5YFhCml
Top comments (12)
It's a nice mix of things to refresh, but please, correct the first point - these APIs are not related to HTML, especially HTML5.
These are Web APIs, implemented in browsers, they live just beside HTML, CSS and other things implemented in web browsers. :)
developer.mozilla.org/en-US/docs/W...
Whoops, thanks for pointing it out. I read about these APIs from W3Schools where they have clearly stated as "HTML Geolocation API".
Ouch, W3Schools... :)
It's been long time since I made a habit of double-checking their definitions. :D
datalist is a pleasure when tailoring inputs for specific use cases. I used this attribute while building a module for a client to give quick input options to users. Really practical with CSV files from management too !
Wow, thanks for sharing your experience!
"The HTML Web Workers API" and "The HTML Web Storage API" - I don't think those are HTML APIs. They are web APIs which could be used in JS.
This is useful 😄
I'm glad 😊
Well, your article was mixed with various topics of HTML and its attributes, HTML-DOM, JS Browser BOM and events! good to repeat my lessons by reading this article
Yes, it's a mix! Thank you. 😀
Nothing like going back to basics! Goes to show you never stop learning. Great article!
Absolutely! The whole idea for writing this and the Web without CSS was to not underestimate the basics.
Thanks for reading Jaye. 🤗