DEV Community

Cover image for 5 Tricks to Truly Call Yourself HTML master
Tapajyoti Bose
Tapajyoti Bose

Posted on

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
  }
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
const audio = document.querySelector("#click-audio")
document.querySelectorAll("button")
  .forEach((button) => {
    button.onclick = () => audio.play()
  })
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Pre-formatted Text

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

Headache

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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!

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

Discussion (7)

Collapse
lukeshiru profile image
LUKESHIRU

A few things I noticed:

  • Instead of writing <input required="true" /> you can just <input required />.
  • Adding unwanted sound to an app such as you suggested is a pretty bad UX. Trust me, users would hate that. If you still want to do it, there is a cleaner version of your snippet:
const audio = document.querySelector("#click-audio");
document
    .querySelectorAll("button")
    .forEach(button => button.addEventListener("click", audio.play));
Enter fullscreen mode Exit fullscreen mode
  • For srcset take into account that you can also use that attribute directly on an img tag, like this:
<img
    srcset="link-to-img 1199w, link-to-img@2x 2559w, link-to-imgl@3x 2560w"
    src="link-to-img@3x"
/>
Enter fullscreen mode Exit fullscreen mode
  • You can resolve the formatting issue from CSS as well, if you need to, by using white-space: pre;.
  • With contenteditable you can do the same you did with required: <p contenteditable>...</p>.

Cheers!

Collapse
jamesthomson profile image
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')
  }
})
Enter fullscreen mode Exit fullscreen mode

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

Collapse
ruppysuppy profile image
Tapajyoti Bose Author • Edited on
  • 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
Collapse
igmuska profile image
igmuska

I thought to be considered HTML master, you hack NASA first...I don't know, they told me it was like Fight Club first rule, there is no Fight Club and there are no rules...just like Ajax is just cleaner, not a bisociative accident leading to all the wonderful JavaScript framework stickers stamped on their dev laptops...lol

Collapse
igmuska profile image
igmuska

I was just going to use all these HTML5 elements in a MySpace 3.0 clone, especially using the media element, canvas. I haven't decided to use Vue or Angular or just using custom solution using just a basic CSS frame like Semantic UI or Skeleton UI, then offer basic customization. And monetize premium services for video and audio, news and publications, social community and complete HTML template customization...And absolutely cutting out large databases, hint hint NFT, to ensure everyone gets paid...lol

Collapse
gamerseo profile image
Gamerseo

HTML is an absolute must, everyone should know it.