5 Tricks to Truly Call Yourself HTML master

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:

Parameter	Use	Example
required	Enforces the filling of the give input	<input required="true">
pattern	Validates the input against a given Regular Expression	<input pattern="^\d{10}$">
type	Declare the type of input and doubles down as a validator	<input type="number"> or <input type="email">
min	Checks if the entered value is greater than or equal to the given value. Works with numeric inputs.	<input type="number" min="0">
max	Checks if the entered value is less than or equal to the given value. Works with numeric inputs.	<input type="number" max="5">
step	Specifies the legal number intervals for the entered value. Works with numeric inputs.	<input type="number" step="1" >

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>

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

Thanks for reading

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 GitHub

I am a freelancer who will start off as a Digital Nomad in mid-2022. Want to catch the journey? Follow me on Instagram

Follow my blogs for Weekly new Tidbits on Dev

FAQ

These are a few commonly asked questions I get. So, I hope this FAQ section solves your issues.

1. I am a beginner, how should I learn Front-End Web Dev?
   Look into the following articles:

   1. Front End Development Roadmap
   2. Front End Project Ideas

2. Would you mentor me?
   
   Sorry, I am already under a lot of workload and would not have the time to mentor anyone.

3. Would you like to collaborate on our site?
   
   As mentioned in the previous question, I am in a time crunch, so I would have to pass on such opportunities.

Connect to me on

• LinkedIn
• Portfolio
• Upwork
• GitHub
• Instagram

Comments

[James Thomson]

If you really wanted to play a sound on each button click (agreed, terrible UX, but applicable in some use cases like game dev), use a single global event handler instead of selecting all buttons.

document.addEventListener('click', (e) => {
  if (e.srcElement.tagName === 'BUTTON') {
    console.log('clicked')
  }
})

This way you don't have to manage all those event handlers and you have a single source of truth.

[Tapajyoti Bose]

• Any boolean fields can be omitted keeping just the keyword (eg: required) for the value true
• I believe its up to personal taste, and considered a good practice in game dev because of the cool ux. Both the methods are pretty much the same 😒
• I was talking about art direction, I find it rather hard to use responsive images, which is in the example you provided (bug alert: the numers aren't screensize, but the size of the image)
• This one was new to me, thanks for sharing

[Gamerseo]

HTML is an absolute must, everyone should know it.