Home 〉 HTML Tutorials 〉 Advanced HTML Tips and Tricks with Examples
Advanced HTML Tips and Tricks with Examples !
Advanced HTML Tips and Tricks with Examples !
Want to learn some powerful HTML features most beginners miss? These advanced HTML tricks will make your web pages more interactive, user-friendly, and modern. They're easy to use and don't need any JavaScript!
Let's go through them one by one:
1. 'contenteditable' - Make Any Element Editable
Tip: Turn any element into an editable area with 'contenteditable="true"'.
Example:
Code : 1 📝 
<!DOCTYPE html>
<html>
<body>
<p contenteditable="true">Click here to edit this text.</p>
</body>
</html>
output 📌
Click here to edit this text.
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Use Case: Useful for inline editing, note-taking apps, or live demos.
2. 'datalist' - Add Autocomplete Options to Inputs
Tip: Use '<datalist>' with '<input>' for dropdown suggestions.
Example:
Code : 2 📝
<!DOCTYPE html>
<html>
<body>
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Edge">
</datalist>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Use Case: Gives users suggestions while typing without limiting their input.
3. 'autocomplete' Attribute - Help Users Fill Forms Faster
Tip: Use 'autocomplete="on"' or '"off"' on form elements.
Example:
Code : 3 📝
<!DOCTYPE html>
<html>
<body>
<input type="email" autocomplete="on">
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Use Case: Improves user experience by remembering form inputs.
4. 'download' Attribute in Anchor Tags
Tip: Let users download a file when they click a link.
Example:
Code : 4 📝
<!DOCTYPE html>
<html>
<body>
<a href="/images/file.pdf" download>Download PDF</a>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Use Case: Perfect for downloadable guides, eBooks, and images.
5. 'spellcheck' Attribute
Tip: Turn spellcheck on or off in editable content.
Example:
Code : 5 📝
<!DOCTYPE html>
<html>
<body>
<textarea spellcheck="true">This will be checked for spelling errors.</textarea>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Use Case: Helpful in user-generated content fields.
6. 'hidden' Attribute - Hide Elements from View
Tip: Temporarily hide content using the 'hidden' attribute.
Example:
Code : 6 📝
<!DOCTYPE html>
<html>
<body>
<p hidden>This text is hidden</p>
</body>
</html>
output 📌
This text is hidden
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Use Case: Display content conditionally via JavaScript or CSS.
7. 'draggable' Attribute - Enable Drag and Drop
Tip: Make any element draggable.
Example:
Code : 7 📝
<!DOCTYPE html>
<html>
<body>
<img src="/images/logo-shinecap-tutorials-w1.jpg" draggable="true">
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Use Case: Used in drag-and-drop interfaces or games.
8. 'input' with 'pattern' Attribute for Validation
Tip: Use 'pattern' to control input format with regular expressions.
Example:
Code : 8 📝
<!DOCTYPE html>
<html>
<body>
<input type="text" pattern="[A-Za-z]{3,}" title="Enter at least 3 letters">
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Use Case: Helps prevent invalid data without JavaScript.
9. Using '<mark>' to Highlight Text
Tip: Highlight important text using '<mark>'.
Example:
Code : 9 📝
<!DOCTYPE html>
<html>
<body>
<p>Use <mark>HTML</mark> to build web pages.</p>
</body>
</html>
output 📌
Use HTML to build web pages.
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Use Case: Great for drawing attention to search terms or key points.
10. Use 'inputmode' for Better Mobile Keyboards
Tip: Improve user experience on mobile devices.
Example:
Code : 10 📝
<!DOCTYPE html>
<html>
<body>
<input type="text" inputmode="numeric" placeholder="Enter number">
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Use Case: Mobile users get the numeric keyboard instead of the default.
Conclusion:
Leveling up your skills with these advanced HTML tips makes your code more powerful and flexible. Whether you're using custom data attributes, semantic tags, or optimizing elements for performance, each trick improves your site. Practice regularly, explore more use cases, and stay updated with HTML5. The more you build, the better you get.