Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Top 5 HTML Tricks That You Should Know
HTML continuously evolves with each new release, introducing powerful features that many developers overlook. These HTML tricks can significantly enhance your web pages and provide better user experiences without requiring complex JavaScript libraries or frameworks.
Here are the top 5 HTML tricks that every developer should know, complete with practical examples and implementation details.
Color Picker in HTML
HTML5 provides a built-in color picker using the <input> element with type="color". This creates a native color selection interface that allows users to pick colors visually or enter RGB/hex values directly.
Syntax
Following is the syntax to create a color picker using HTML
<input type="color" value="#ff0000">
The value attribute sets the initial color using a hexadecimal color code. The browser renders this as a clickable color swatch that opens the system's color picker dialog.
Example
Following example demonstrates an interactive color picker that changes the page background color dynamically
<!DOCTYPE html>
<html>
<head>
<title>HTML Color Picker</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; transition: background-color 0.3s ease;">
<h2>Using the <em>Color Picker</em> to Change Background</h2>
<p>Select any color to set as the background color:</p>
<input type="color" id="colorpicker" name="colorpicker" value="#ff0000">
<p>Current color: <span id="colorValue">#ff0000</span></p>
<script>
var colorpicker = document.getElementById("colorpicker");
var colorValue = document.getElementById("colorValue");
colorpicker.addEventListener("input", function() {
document.body.style.backgroundColor = colorpicker.value;
colorValue.textContent = colorpicker.value;
});
</script>
</body>
</html>
The output displays a color picker that instantly changes the background color and shows the selected hex value. The smooth transition effect enhances the user experience.
Using the Progress Tag
The <progress> tag creates progress bars natively in HTML without requiring CSS animations or JavaScript libraries. It supports both determinate (with known max value) and indeterminate (loading spinner) progress indicators.
Syntax
Following is the syntax for creating a progress bar
<progress value="50" max="100">50%</progress>
The value attribute sets the current progress, while max defines the maximum value. The text inside serves as a fallback for older browsers.
Example
Following example shows different progress bar styles and an animated progress simulation
<!DOCTYPE html>
<html>
<head>
<title>HTML Progress Bars</title>
<style>
.large-progress {
width: 300px;
height: 30px;
}
.custom-progress {
width: 200px;
height: 20px;
border-radius: 10px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Using the <em>Progress Tag</em> to Show Progress Bars</h2>
<p>Basic progress bar (50%):</p>
<progress value="50" max="100">50%</progress>
<p>Large progress bar (75 out of 200):</p>
<progress value="75" max="200" class="large-progress">37.5%</progress>
<p>Animated progress bar:</p>
<progress id="animatedProgress" value="0" max="100" class="custom-progress">0%</progress>
<button onclick="startAnimation()">Start Animation</button>
<script>
function startAnimation() {
let progress = document.getElementById("animatedProgress");
let value = 0;
let interval = setInterval(function() {
value += 2;
progress.value = value;
if (value >= 100) {
clearInterval(interval);
}
}, 50);
}
</script>
</body>
</html>
The output displays three different progress bars, including an animated one that fills up when the button is clicked, demonstrating practical usage scenarios.
Making Content Editable
The contenteditable attribute transforms any HTML element into an editable area, allowing users to modify content directly in the browser. This creates inline editing functionality without complex form controls.
Syntax
Following is the syntax to make any element's content editable
<div> Editable content goes here </div>
The contenteditable="true" attribute enables editing, while contenteditable="false" explicitly disables it. Elements inherit this property from their parents.
Example
Following example demonstrates various editable elements with different styling and functionality
<!DOCTYPE html>
<html>
<head>
<title>Editable Content Demo</title>
<style>
.editable-box {
width: 400px;
min-height: 100px;
border: 2px dashed #4CAF50;
border-radius: 8px;
padding: 15px;
margin: 10px 0;
background-color: #f9f9f9;
font-size: 16px;
line-height: 1.4;
}
.editable-box:focus {
background-color: #fff;
border-color: #2196F3;
outline: none;
}
.title-edit {
border: 1px solid #ccc;
padding: 10px;
margin: 5px 0;
border-radius: 4px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Making Content <em>Editable</em> with contenteditable Attribute</h2>
<h3 class="title-edit">Click to edit this title</h3>
<p>Click inside the box below to start editing:</p>
<div class="editable-box">
This is an editable content area. You can click here and start typing, formatting, and even paste content.
Try selecting text and see how it behaves like a rich text editor!
</div>
<p>List that you can edit:</p>
<ul style="border: 1px solid #ddd; padding: 20px; background: #f5f5f5;">
<li>Click to edit this item</li>
<li>Add new items by pressing Enter</li>
<li>Delete items as needed</li>
</ul>
</body>
</html>
The output shows three different editable areas: a title, a text box, and a list. Users can click anywhere to start editing, and the focus styling provides visual feedback.
Input Suggestions with Datalist
The <datalist> element provides autocomplete suggestions for input fields, similar to search engines. It combines the flexibility of free text input with the convenience of predefined options.
Syntax
Following is the syntax for creating input suggestions
<input type="text" list="suggestions"> <datalist id="suggestions"> <option value="Option 1"></option> <option value="Option 2"></option> </datalist>
The list attribute connects the input to the datalist using matching IDs. The browser shows relevant options as the user types.
Example
Following example demonstrates practical datalist usage for different scenarios
<!DOCTYPE html>
<html>
<head>
<title>HTML Datalist Suggestions</title>
<style>
input[type="text"] {
width: 250px;
padding: 8px;
margin: 5px 0;
border: 2px solid #ddd;
border-radius: 4px;
font-size: 14px;
}
input[type="text"]:focus {
border-color: #4CAF50;
outline: none;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Input <em>Suggestions</em> Using Datalist</h2>
<p>Search for programming languages:</p>
<input type="text" list="languages" placeholder="Type to search languages...">
<datalist id="languages">
<option value="JavaScript"></option>
<option value="Python"></option>
<option value="Java"></option>
<option value="C++"></option>
<option value="TypeScript"></option>
<option value="Go"></option>
<option value="Rust"></option>
<option value="Swift"></option>
</datalist>
<p>Select a country:</p>
<input type="text" list="countries" placeholder="Type country name...">
<datalist id="countries">
<option value="United States"></option>
<option value="United Kingdom"></option>
<option value="Canada"></option>
<option value="Australia"></option>
<option value="Germany"></option>
<option value="France"></option>
<option value="India"></option>
<option value="Japan"></option>
</datalist>
<p>Enter a website URL:</p>
<input type="url" list="websites" placeholder="https://...">
<datalist id="websites">
<option value="https://www.google.com"></option>
<option value="https://www.github.com"></option>
<option value="https://www.stackoverflow.com"></option>
<option value="https://www.tutorialspoint.com"></option>
</datalist>
</body>
</html>
The output shows three input fields with different datalist suggestions. As users type, the browser filters and displays matching options, improving usability and data entry speed.
Adding Space Between Table Cells
The CSS border-spacing property creates gaps between table cells, allowing for cleaner table layouts and improved readability. This works only when border-collapse is set to separate.
Syntax
Following is the CSS syntax for adding space between table cells
table {
border-collapse: separate;
border-spacing: 20px;
}
The border-spacing value can be a single measurement for uniform spacing, or two values for horizontal and vertical spacing respectively.
Example
Following example demonstrates different table spacing techniques and their visual effects
<!DOCTYPE html>
<html>
<head>
<title>Table Cell Spacing</title>
<style>
.spaced-table {
border-collapse: separate;
border-spacing: 15px;
background-color: #f0f0f0;
padding: 10px;
}
.custom-spacing { 
2K+ Views
