DEV Community

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

Posted on • Updated on

5 Tricks to Truly Call Yourself HTML master

#webdev #html #ux #javascript

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!

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

Top comments (3)

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 • • Edited
  • 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
 
gamerseo profile image
Gamerseo •

HTML is an absolute must, everyone should know it.

Read next

andrepolischuk profile image

How to split pages by device type in Next.js

Andrey Polischuk -

markblandford profile image

I have <insert alternative noun> not Users

Mark Blandford -

magi-magificient profile image

Playwright Automation Commands

Mangai Ram -

olatunjiayodel9 profile image

To create a new Node.js project and work with dependencies, you'll need to follow these steps

Olatunji Ayodele Abidemi -