5 Tricks to Truly Call Yourself HTML master

3 min readDec 5, 2021

HTML is a language that everyone knows, but very few people truly know. To be honest, when you are just starting off, you can get away with only the basics of HTML, but in the long term, not knowing the nitty-gritty of the language can hurt your application a lot.

Let’s dive in!

Form Validation

The most often used Form Validation Techniques utilize JavaScript:

function validateForm() {
  const inputText = document.forms["form-name"]["input-name"].value;
  if (!inputText) {
    // handle input empty
  } else {
    // handle input filled
  }
}

For most basic cases such as the example above, HTML ships with several powerful validators. The above code can be replaced with just one parameter: required

<form>
  <input required="true" />
</form>

Some of the standard validators available for HTML:

Audio

Audio is one of the important aspects of modern UX. Any application can work without it, but add a couple of interaction sounds and your website appeal shoots up instantly.

<audio id="click-audio">
  <source src="button-click.mp3" type="audio/mpeg">
</audio>

Then you can play the audio using Javascript

const audio = document.querySelector("#click-audio")
document.querySelectorAll("button")
  .forEach((button) => {
    button.onclick = () => audio.play()
  })

Picture Perfect

Art Direction is an excellent optimization technique that saves a huge amount of bandwidth by loading the optimally sized images based on some media queries.

<picture>
    <source media="(max-width: 1200px)" srcSet="link-to-img">
    <source media="(max-width: 2560px)" srcSet="link-to-img@2x">
    <source media="(min-width: 2560px)" srcSet="link-to-imgl@3x">
    <img src="link-to-img@3x">
</picture>

Another tool related to pictures is the map. The map tag is used to define a client-side image-map, enabling you to create mindblowing UX.

An image-map is an image with clickable areas. All you have to do is mention the X and Y coordinates in the elements from the <map>, and you are good to go!

Check out this Example:

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379"><map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>

Pre-formatted Text

Occasionally you bump into a case with weird formatting, which you need to preserve, but HTML seems to be overriding it?

pre tag to the rescue! Text in a pre element is displayed in a fixed-width font, and the text preserves both spaces and line breaks. The text will be displayed precisely as written in the HTML source code.

<pre>
Lorem
  Ipsum   dolor sit             amet.
</pre>

Input Pro

In HTML, almost any element can be made editable using contenteditable="true". Only by utilizing a few JavaScript event handlers, you can easily create a marvelous Rich Text Editor!

<p contenteditable="true">This is an editable paragraph.</p>

Another valuable skill would be adding Input Suggestions without utilizing any other libraries or even JavaScript!

<input type="text" list="planets">
<datalist id="planets">
    <option value="Mercury"></option>
    <option value="Venus"></option>
    <option value="Earth"></option>
    <option value="Mars"></option>
    <option value="Jupiter"></option>
    <option value="Saturn"></option>
    <option value="Uranus"></option>
    <option value="Neptune"></option>
</datalist>

Wrapping Up

In this article, we went through some of the tricks to take your HTML game to the next level. With these tricks up your sleeve, you too can now call yourself an HTML Master!

Happy Developing!

Finding personal finance too intimidating? Checkout my Instagram to become a Dollar Ninja

Need a Top Rated Front-End Development Freelancer to chop away your development woes? Contact me on Upwork

Want to see what I am working on? Check out my Personal Website and GitHub

Want to connect? Reach out to me on LinkedIn

Originally published at https://dev.to on December 5, 2021.