HTML is the backbone of web development. In this blog, we will explore 10 essential HTML tips that can save you time and boost productivity.
controls: Adds built-in media controls to audio and video elements.
contenteditable: Makes elements directly editable in the browser.
draggable: Enables interactive drag-and-drop functionality.
Auto-refresh: Uses the <meta> tag to refresh pages automatically.
Spellcheck: Activate spelling and grammar checks with spellcheck.
Prevent translation: Control translations with the translate attribute.
srcset & sizes: Serves responsive images optimized for different devices.
hidden: Hide elements without affecting layout.
multiple: Allows multi-selection in forms and file inputs.
1. contenteditable
With the help of contenteditable attribute we can make any HTML element editable directly in the browser.
<div contenteditable="true">This is editable text. Click here to edit.</div>Result
Usage: It can be used in content management systems (CMS) or blog platforms where users can directly edit and format blog posts or other articles on the page.
2. draggable
You can set draggable =”true” to any HTML element to make it clickable and draggable around the page by the users.
<img src="image.jpg" draggable="true" alt="Draggable Image">Result (draggable image)
Usage: : It helps to create more interactive user interfaces, allowing users to move elements around the page, such as text blocks, moving images, reordering lists, dragging files etc.
3. Auto Refresh
You can set your website to refresh after a certain interval of time from the <meta> tag in the <head> section.
<head>
<meta http-equiv="refresh" content="5">
</head>Result
Usage: It helps to ensure that users always see the latest content, such as in data dashboards, live score updates, and content feeds etc.
4. Active Spell Check
You can add spellcheck=”true” with form elements that accept text input, such as <input>, <textarea>, and any elements that are contenteditable to enable spelling and grammar checking.
<textarea spellcheck="true">Type your text here with spell check enabled.</textarea>Result
Usage: Any web application with rich text editing, you might want to enable spellcheck for editable text areas, especially for content that will be published (e.g., blog posts, articles).
5. Prevent Translation
You can add translate=”no” or translate=”yes” to any HTML element to control whether its content should be translated.
<p translate="no">BrandName</p>Usage: When translate set to no, it prevents specific texts like brand names, technical terms or brand-specific phrases from being translated.
6. srcset attribute
The srcset attribute in HTML is used with the <img> provides the browser with multiple versions of the same image, allowing it to choose the best one based on the screen size and resolution and viewport width such as 1x, 2x, or specific width values (e.g., 600w, 1200w).
<img
src="https://assets.imgix.net/blog/unsplash-kiss.jpg?h=750&w=300"
srcset="
bluehat.jpg?w=480 480w,
bluehat.jpg?w=1024 1024w,
bluehat.jpg?w=1600 1600w"
alt="Countryside with cloudy skies">Result
Explanation
- Small Image (480w):
URL: bluehat.jpg?w=480 480w
Description: This image is 480 pixels wide, optimized for small screens or devices. - Medium Image (1024w):
URL: bluehat.jpg?w=1024 1024w
Description: This image is 1024 pixels wide, suitable for medium-sized screens. - Large Image (1600w):
URL: bluehat.jpg?w=1600 1600w
Description: This image is 1600 pixels wide, designed for large screens.
Usage: It helps load images faster on different devices by only downloading the appropriate size.
7. sizes attribute
The sizes attribute works with srcset and helps the browser to determine which image in the srcset list to choose based on the width of the viewport (the available space).
<img
src="https://assets.imgix.net/blog/unsplash-kiss.jpg?h=750&w=300"
srcset="
bluehat.jpg?w=480 480w,
bluehat.jpg?w=1024 1024w,
bluehat.jpg?w=1600 1600w"
sizes="
(max-width: 600px) 480px,
(max-width: 1200px) 1024px,
1600px
"
alt="Countryside with cloudy skies">Result
Explanation
(max-width: 600px) 480px:- If the screen width is 600 pixels or smaller (like on most smartphones), the image will take up 480 pixels of space on the screen.
- The browser will select an image from the srcset that is closest to this size.
(max-width: 1200px) 1024px:- If the screen width is between 601 and 1200 pixels (like on tablets or smaller laptops), the image will take up 1024 pixels of space.
- The browser will choose the most appropriate image from the srcset that matches this size.
1600px:- If the screen width is greater than 1200 pixels (like on larger laptops or desktop monitors), the image will take up 1600 pixels of space.
- The browser will pick the largest image from the srcset.
Usage: It ensures that responsive images are loaded in the most efficient way.
8. hidden Attribute
Without taking any space in the layout you can hide any kind of HTML element that you don’t want to show in the UI with the help of hidden attribute.
<p>This paragraph is <span hidden> hidden </span> and won’t be displayed on the page.</p>Result
This paragraph is hidden and won’t be displayed on the page.
Usage: It helps to hide large sections of content like banners, panels, or images that should only appear under certain conditions (e.g., when the user clicks a button or when a page section becomes visible).
9. multiple attribute
The multiple attribute enables users to select multiple values or items in a single interaction. It is primarily used with form controls like <select> elements for multi-option selection and <input> elements of type file to facilitate multi-file uploads.
1. Dropdown Lists (<select>):
If you have a list of options ,then adding the multiple attribute to a <select> element lets users choose more than one option at the same time. Here’s an example:
<select multiple>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="cherry">Cherry</option>
</select>Result
- Without multiple, you can pick only one fruit.
- With multiple, you can choose many fruits by holding down the Ctrl key (on Windows) or the Command key (on Mac).
2. File Uploads (<input type=”file”>):
When you want to upload files, adding multiple allows you to pick many files at once instead of one at a time. Here’s an example:
<input type="file" multiple>Result
- Without multiple, you can only upload one file.
- With multiple, you can upload many files together. For example, you could upload photos or documents all at the same time.
Usage: Great for form applications that need more than one selection, such as multi-select dropdowns.
10. control attribute
The controls attribute is a boolean attribute provides built-in media controls to <audio> and <video> elements such as play, pause, seeking, volume etc…
<video controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<audio controls>
<source src="audio.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>Result
Usage: It makes the media player more interactive and improves user experience.