DEV Community

loading...
Cover image for It's time to supercharge your HTML skills! 🔋

It's time to supercharge your HTML skills! 🔋

Vaibhav Khulbe
👨‍💻 Freelance web developer/designer/writer ✍ | 📧 Subscribe to my weekly dev newsletter with 50+ resources: https://mailchi.mp/f59beeac6b9b/devupdates
・7 min read

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. ⚡


Bump up GIF

Let's do this!

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. (✿◕‿◕✿)



📫 Subscribe to my weekly developer newsletter 📫

PS: From this year, I've decided to write here on DEV Community. Previously, I wrote on Medium. If anyone wants to take a look at my articles, here's my Medium profile.

Discussion (12)

Collapse
qrzy profile image
Qrzy

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...

Collapse
vaibhavkhulbe profile image
Vaibhav Khulbe Author

Whoops, thanks for pointing it out. I read about these APIs from W3Schools where they have clearly stated as "HTML Geolocation API".

Collapse
qrzy profile image
Qrzy

Ouch, W3Schools... :)
It's been long time since I made a habit of double-checking their definitions. :D

Collapse
benarn profile image
Benoît Arnoult • Edited

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 !

Collapse
vaibhavkhulbe profile image
Vaibhav Khulbe Author

Wow, thanks for sharing your experience!

Collapse
carpben profile image
Ben Carp

"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.

Collapse
youhakin profile image
youhakin

This is useful 😄

Collapse
vaibhavkhulbe profile image
Vaibhav Khulbe Author

I'm glad 😊

Collapse
fahad07_khan profile image
Fahad Khan

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

Collapse
vaibhavkhulbe profile image
Vaibhav Khulbe Author

Yes, it's a mix! Thank you. 😀

Collapse
jayehernandez profile image
Jaye Hernandez

Nothing like going back to basics! Goes to show you never stop learning. Great article!

Collapse
vaibhavkhulbe profile image
Vaibhav Khulbe Author

Absolutely! The whole idea for writing this and the Web without CSS was to not underestimate the basics.

Thanks for reading Jaye. 🤗