16 HTML Techniques Lesser Known But Highly Useful
HTML is the most used markup language in the world. The basic building block of a web page as we know. It is simple and easy to learn and doesn't require much or any setup at all. In this post, I am sharing a few uncommon, lesser known HTML techniques.
If you're a Web Developer or create Web pages often, you'll find these techniques useful. There are various tags, attributes, organization techniques that are generally not covered in tutorials but they can cetainly enhance your workflow. Let's dive in.
Tip #1
Make a <div> editable by adding the contenteditable="true" attribute to it. It then works like a text area.
<div contenteditable="true">
<h1>This is an Editable content</h1>
<p>This is a simple paragraph</p>
</div>Tip #2
The meta tag with <http-equiv=""> attribute can be used to simulate an HTTP response header.
Adding <meta http-equiv="refresh" content="30"> between the head tag will refresh the page every 30 seconds.
<head>
<title>Refresh a page every given seconds</title>
<meta http-equiv="refresh" content="30">
</head>
Tip #3
The label tag adds a label to a form field. It requires a for attribute with the id of the field as shown below.
The following list of elements support <label> these include include <button>, <input>, <meter>, <output>, <progress>, <select> and <textarea>. The <input type="hidden" isn't supported and <input type="button"> interferes with assisitive technologies.
You can use the <label> tag without the for="id" attribute simply by wrapping the element within the <label> </label> tags. Use this preferably with checkboxes and radios to make them selectable by clicking on the labels itself.
<label><input type="checkbox" name="name" value="1">I agree</label>Tip #4
There are often cases where we need to place an <input> element outside the <form> tag and in order to capture their values we have to rely on Javascript. Take a look below:
You can add a form="form_id" attribute on an input element and bound it to a given form by its id. You don't need to rely on javacript for this, just add the form attribute and the specified input will become the part of the form referenced by the id. Take a look at the code below.
<div class="header">
<form action="/submit" method="POST" id="form_id">
<label for="name_field">Full Name</label>
<input type="text" name="full_name" id="name_field" placeholder="Your name"/>
</form>
</div>
<div class="footer">
<input type="email" name="email" placeholder="[email protected]"
form="form_id"/>
</div>Tip #5
The <input type="submit"/> supports various other attributes that you can add to alter the behavior of the entire form element.
You can add formmethod="post" attribute directly on the <input type="submit"/> to submit the form via the post mehtod. Similarly you can create another button with formmethod="get" and submit the same form through the GET method. The method="" defined on the form will be overridden.
<form action="http://localhost">
<input type="email" name="email" placeholder="Your Email">
<input type="submit" formmethod="get" name="Submit GET">
<input type="submit" formmethod="post" name="Submit POST">
</form>Tip #6
Similarly there are other attributes in the <input type="submit"/> and there' another tip.
Adding formtarget="_blank" attribute on the <input type="submit"/> makes sure the results of the submitted form appear in a new tab.
<form action="http://localhost">
<input type="email" name="email" placeholder="Your Email">
<input type="submit" formtarget="_blank">
</form>Tip #7
Many a times during developing HTML forms we want to disable validations temporarily but editing all the input elements is cumbersome. Here's a tip.
If your form has validations for eg. the required attributes on some fields an you want to disable it all temporarily. Add novalidate attribute on the form tag or the attribute formnovalidate="" on the <input type="submit"/>
<form action="http://localhost" novalidate>
<input type="email" name="email" placeholder="Your Email" required>
<input type="submit" formnovalidate="">
</form>
Tip #8
The <img/> tag is used to insert images in an HTML document. There are various attributes that you can add on to it.
Make sure to define the width="" & height="" attribute on an <img/> tag, it allows the element to take up space before it loads and thus eliminates layout shift.
Tip #9
Responsive images are important for a great user experience. It is now possible to add images based on screen sizes.
Add the srcset="" attribute to an <img/> tag with as many iamges and screen sizes you want. It will pick the image that's best for that screen size and display it.
<img srcset="/images/image-lg.png 4025w, /images/image-md.png 3019w, /images/image-sm.png 2013w, /images/image-xs.png 1006w " src="/images/image-default.png" >Tip #10
You know how a <select> works. You define a set of options and you can pick one of them at once but did you know you can make it a multi-select box.
Add the multiple="" attribute to a <select/> tag with as to convert it to a multi-select box. You can then use Ctrl + Click to select multiple options at once.
<select name="choices" id="choices" multiple>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>Tip #11
A <select> input with too many options can sometimes be cubmersome but you can group the options within it.
Use the <optgroup> tag to organize the <option> in groups, the <optgroup> tag's label="" attribute contains the name of the group.
<label for="colors">Pick a Color</label>
<select name="colors" id="colors">
<optgroup label="Primary Colors">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</optgroup>
<optgroup label="Composite Colors">
<option value="mercedes">Sea Green</option>
<option value="audi">Teal</option>
<option value="audi">Amber</option>
</optgroup>
</select>Tip #12
The <input type="number"> allows numerical inputs. You can adjust the minimum and maximum value with the min & max attributes.
Adding a step="0.5" attribute to an <input type="number"> allows you to increment or decrement the count as defined in the step="" attribute.
<input type="number" step="0.05" min="0" max="10">Tip #13
Want to instantly bring in focus on an input element?
Adding the autofocus attribute to an input element activates focus on that element automatically on page load.
<input type="text" autofocus>Tip #14
Users often use tab key to navigate input fields in an HTML form.
You can set the order of tab navigation on form input elements by adding a tabindex attribute with an integer value indicating the order of that input element.
<input type="text" tabindex="1">
<input type="text" tabindex="4">
<input type="text" tabindex="2">
<input type="text" tabindex="3">Tip #15
Validating user input is important when accepting user data, there are common validation built in such as type email, number etc.
You can validate form <input type="text"> elements with Regular Exprssions by adding a pattern="" attribute with a valid Regex pattern.
<input type="text" id="name" name="first_name" pattern="[A-Za-z]" title="First Name">Tip #16
You can filter file based on their extension in an input type file.
Adding an accept="image/*" attribute with a mime type on an <input type="file"> lets you select only files which match the mime types
<input type="file" accept="image/*"/>Final Words
HTML is simple and easy to learn so much so, that we sometimes overlook things in it or just underestimate its strength anyway. I hope you got to discover something new in the post and if you did, please let me know in the comments below.
Aryan K
Creator Metabust.com
I am a Full stack developer and love to build stuffs with code. Metabust is my personal space I created to share my knowledge and experience on a wide range of things and connect with you people, If you're a developer you'll find it useful.
Notification
A second ago