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.
-
I am a beginner, how should I learn Front-End Web Dev?
Look into the following articles: Would you mentor me?
Sorry, I am already under a lot of workload and would not have the time to mentor anyone.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)
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.
This way you don't have to manage all those event handlers and you have a single source of truth.
required
) for the value trueHTML is an absolute must, everyone should know it.