It's time to supercharge your HTML skills! 🔋

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!

3️⃣ Uncommon HTML Tags 🤪

Why not! Tell me, have you ever used them?

Read more absurd HTML tags here:

Unusual HTML tags worth knowing 🧩

Christopher Kade ・ May 28 '19

#webdev #html #a11y #beginners

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:

• MDN Web Docs for Attributes.

• W3School's page on HTML DOM

• Some more HTML stuff!

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? 😝

Image source: https://t.co/HEzYrUa6Ol#DevHumour #Git #WFH pic.twitter.com/GWu5YFhCml

— Microsoft Developer UK (@msdevUK) September 1, 2020

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