It's time to supercharge your HTML skills! 🔋
Tags: html, webdev, javascript, beginners
Published: 2020-09-04 14:43:50

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](https://media.giphy.com/media/fu2C634jt61NCquZKx/giphy.gif)
<figcaption>Let's do this!</figcaption>

---

## 1️⃣ HTML 5 APIs 🔌

#### The HTML Geolocation API [[Docs 📃](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API)]

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`](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/geolocation) by which it adds a prompt to the user's browser asking them permission to access their location data.

_Example:_

```js
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 📃](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)]

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()`](https://developer.mozilla.org/en-US/docs/Web/API/Worker/Worker) constructor to perform such an action.

_Example:_

```js
// 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 📃](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events)]

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`](https://developer.mozilla.org/en-US/docs/Web/API/EventSource) interface.

_Example:_

```js
// 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 📃](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API)]

With this API, web applications can store data locally within the user's browser. It includes both [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) and [`sessionStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/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](https://www.developer.com/open/article.php/3887631/Web-Storage-API-vs-Cookies-for-Browser-Data-Storage.htm). 

_Example:_

```js
// 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`](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onerror)**   	|Script to be run when an error occurs   	|`<img src="image.gif" onerror="error()">`   	|
|2.    	|**[`onload`](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload)**   	|Fires after the page is finished loading   	|`<body onload="load()">`   	|
|3.    	|**[`onresize`](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onresize)**   	|Fires when the browser window is resized   	|`<body onresize="resize()">`   	|
|4.    	|**[`onblur`](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onblur)**   	|Fires the moment that the element loses focus   	|`<input type="text" onblur="blur()">`   	|
|5.   	|**[`onsearch`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/search_event)**   	|Fires when the user writes something in a search field   	|`<input type="search" onsearch="search()">`   	|
|6.    	|**[`ondblclick`](https://developer.mozilla.org/en-US/docs/Web/API/Element/dblclick_event)**   	|Fires on a mouse double-click on the element   	|`<button ondblclick="clicked()">Double-click</button>`   	|
|7.    	|**[`onscroll`](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onscroll)**   	|Script to be run when an element's scrollbar is being scrolled   	|`<div onscroll="scroll()">`   	|
|8.   	|**[`oncopy`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncopy)**   	|Fires when the user copies the content of an element   	|`<input type="text" oncopy="copy()" value="Copy this tex">`   	|
|9.   	|**[`oncanplay`](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/oncanplay)**   	|Script to be run when a file is ready to start playing   	|`<video oncanplay="canPlay()">`   	|
|10.   	|**[`ontoggle`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDetailsElement/toggle_event)**   	|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>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist)**   	|A datalist with pre-defined options (connected to an <input> element)   	|[MDN Example](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist#Examples)   	|
|2.    	|**[`<optgroup>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup)**   	|Group related options with `<optgroup>` tags   	|[MDN Example](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup#Examples)   	|
|3.    	|**[`<ins>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ins)**   	|A text with a deleted part, and a new, inserted part   	|[MDN Example](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ins#Examples)   	|
|4.    	|**[`<wbr>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr)**   	|A text with word break opportunities   	|[MDN Example](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr#Example)   	|
|5.   	|**[`<cite>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite)**   	|Used to describe a reference to a cited creative work   	|[MDN Example](used to describe a reference to a cited creative work)   	|

Read more absurd HTML tags here:

{% link https://dev.to/christopherkade/unusual-html-tags-worth-knowing-3gbk %}

## 4️⃣ HTML 5 Attributes 😋

Check out the following cool attributes and make sure you visit their docs by clicking on them:

▶ **[`accesskey`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey)**: This is a [global attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes) which specifies a shortcut key to activate/focus an element. 

_Example_:

```html
<a href="https://mailchi.mp/f59beeac6b9b/devupdates" accesskey="d">
Subscribe to Dev Weekly newsletter</a>
```

▶ **[`draggable`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/draggable)**: Another global attribute which specifies whether an element is draggable or not.

_Example_:

```html
<p draggable="true">This is a draggable paragraph.</p>
```

▶ **[`itemprop`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemprop)**: This lets you add properties to an item. You can easily group items with this attribute.

_Example:_

```html
<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`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck)**: It specifies whether the element is to have its spelling and grammar checked or not.

_Example:_

```html
<p spellcheck="true">This is a paragraph with spell check on.</p>
```

▶ **[`hidden`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden)**: A boolean attribute which specifies that an element is not yet, or is no longer, relevant.

_Example:_

```html
<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](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes
).

- [W3School's page on HTML DOM](https://www.w3schools.com/whatis/whatis_htmldom.asp)

- [Some more HTML stuff!](https://www.w3schools.com/html/default.asp)

---

_Thanks for reading, I appreciate it! Have a good day. (✿◕‿◕✿)_

---
<blockquote class="twitter-tweet" data-partner="tweetdeck"><p lang="en" dir="ltr">This bathroom&#39;s commit history is making us all look bad! Has yours been Git-ing greener as well? 😝<br><br>Image source: <a href="https://t.co/HEzYrUa6Ol">https://t.co/HEzYrUa6Ol</a><a href="https://twitter.com/hashtag/DevHumour?src=hash&amp;ref_src=twsrc%5Etfw">#DevHumour</a> <a href="https://twitter.com/hashtag/Git?src=hash&amp;ref_src=twsrc%5Etfw">#Git</a> <a href="https://twitter.com/hashtag/WFH?src=hash&amp;ref_src=twsrc%5Etfw">#WFH</a> <a href="https://t.co/GWu5YFhCml">pic.twitter.com/GWu5YFhCml</a></p>&mdash; Microsoft Developer UK (@msdevUK) <a href="https://twitter.com/msdevUK/status/1300695646408671232?ref_src=twsrc%5Etfw">September 1, 2020</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
---

#### [📫 Subscribe to my weekly developer newsletter 📫](https://mailchi.mp/f59beeac6b9b/devupdates)

##### 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](https://medium.com/@vaibhavkhulbe)'s my Medium profile.