HTML is the backbone of web development. In this blog, we explore 10 essential HTML tips that can save you time and boost productivity:
controls: Add built-in media controls to audio and video elements.
contenteditable: Make elements directly editable in the browser.
draggable: Enable interactive drag-and-drop functionality.
Auto-refresh: Use 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: Serve responsive images optimized for different devices.
hidden: Hide elements without affecting layout.
multiple: Allow 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>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">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>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>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> element tells the browser which images are available based on its screen resolution and viewport width such as 1x, 2x, or specific width values (e.g., 600w, 1200w).
<img src="default-image.jpg" srcset="image1.jpg 600w, image2.jpg 1200w, image3.jpg 1800w" alt="Responsive image">600w, 1200w, 1800w specify the width of the images in pixels.
Usage: It helps to serve better images to the user and improve website loading time.
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="default-image.jpg"
srcset="image1.jpg 400w, image2.jpg 800w, image3.jpg 1200w"
sizes="(max-width: 600px) 100vw, 50vw"
alt="Responsive image">If the viewport is less than 600px (max-width: 600px) then the image will be displayed at 100% of the viewport width (100vw).
For larger viewports, the image will take up to 50% of the viewport width (50vw).
Based on the sizes values, the browser will choose the most appropriate 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 hidden>This paragraph is hidden and won’t be displayed on the page.</p>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
It helps to select multiple files or options in file inputs and select elements.
<input type="file" multiple>
<select multiple>
<option>Option 1</option>
<option>Option 2</option>
</select>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="movie.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>Usage: It makes the media player more interactive and improves user experience.