5 Tricks to Truly Call Yourself HTML master
Tags: webdev, html, ux, javascript
Published: 2021-12-05 06:21:10

**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**:

```js
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`

```html
<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_.

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

```js
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**.

```html
<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](https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap):

```html
<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?

![Headache](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rrbfzexbs43b225hzzpo.gif)

`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.

```html
<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**!

```html
<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**!

```html
<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**](https://www.instagram.com/the.dollar.ninja/)

# Thanks for reading

Need a **Top Rated Front-End Development Freelancer** to chop away your development woes? Contact me on [Upwork](https://www.upwork.com/o/profiles/users/~01c12e516ee1d35044/)

Want to see what I am working on? Check out my [GitHub](https://github.com/ruppysuppy)

I am a freelancer who will start off as a **Digital Nomad** in mid-2022. Want to catch the journey? Follow me on [Instagram](https://www.instagram.com/tapajyotib/)

Follow my blogs for **Weekly new Tidbits** on [Dev](https://dev.to/ruppysuppy)

**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](https://dev.to/ruppysuppy/front-end-developer-roadmap-zero-to-hero-4pkf)
    2. [Front End Project Ideas](https://dev.to/ruppysuppy/5-projects-to-master-front-end-development-57p)

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](https://www.linkedin.com/in/tapajyoti-bose/)
-   [Portfolio](https://tapajyoti-bose.vercel.app)
-   [Upwork](https://www.upwork.com/o/profiles/users/~01c12e516ee1d35044/)
-   [GitHub](https://github.com/ruppysuppy)
-   [Instagram](https://www.instagram.com/tapajyotib/)