Home 〉 HTML Tutorials 〉 7 More HTML Tips and Tricks You Should Know
7 More HTML Tips and Tricks You Should Know !
7 More HTML Tips and Tricks You Should Know !
1. Add Comments in HTML
Use HTML comments to explain sections of your code or leave reminders without affecting the page.
Example:
Code : 1 📝 
<!DOCTYPE html>
<html>
<body>
<!-- This is a comment. It won't show in the browser -->
<p>This paragraph is visible.</p>
</body>
</html>
output 📌
This paragraph is visible.
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.
Explanation: Comments are useful for code documentation or disabling parts of code without deleting them.
2. Open Link in a New Tab
Use the target="_blank" attribute in <a> tags to open links in a new browser tab.
Example:
Code : 2 📝
<!DOCTYPE html>
<html>
<body>
<a href="https://tut.shinecap.co.in/post/html-tutorials/html-colors-complete-guide-color-codes-html.html" target="_blank">Visit HTML Colors:</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.
Explanation: This keeps your site open while visitors explore external resources—great for reducing bounce rate.
3. Add Email Links with mailto:
Let users email you directly by clicking a link with a mailto: in the href.
Example:
Example 📄
<a href="mailto:support@Example:.com">Email Us</a>
Explanation: This opens the user's email app with your address pre-filled.
4. Use the disabled Attribute in Forms
Disable inputs or buttons to prevent user interaction.
Example:
Code : 3 📝
<!DOCTYPE html>
<html>
<body>
<input type="text" value="Not editable" disabled>
<button disabled>Submit</button>
</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.
Explanation: Useful for fields that shouldn't be edited or buttons that are temporarily inactive.
5. Show Tooltips with the title Attribute
Hovering over an element with a title attribute shows a small tooltip.
Example:
Code : 4 📝
<!DOCTYPE html>
<html>
<body>
<p title="Extra info">Hover over this text</p>
</body>
</html>
output 📌
Hover over 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.
Explanation: Provides helpful hints or additional info without cluttering your page.
6. Use required Attribute to Validate Forms
Prevent form submission unless a field is filled.
Example:
Code : 5 📝
<!DOCTYPE html>
<html>
<body>
<form>
<input type="text" required placeholder="Enter your name">
<button type="submit">Submit</button>
</form>
</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.
Explanation: Makes sure users don't skip important fields, improving form accuracy.
7. Use Special Character Codes (Entities)
Some characters (like <, >, &) must be written as HTML entities to display properly.
Example:
Code : 6 📝
<!DOCTYPE html>
<html>
<body>
<p><div> is a block element.</p>
<p>Use & to write an ampersand.</p>
</body>
</html>
output 📌
<div> is a block element.
Use & to write an ampersand.
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.
Explanation: Helps display reserved characters in content safely.
Conclusion:
These extra HTML tips give you even more tools to improve your coding. Whether you're building a small page or a big website, these tricks help you write better, faster, and smarter code. Keep exploring, keep learning, and always look for ways to make your HTML cleaner and more effective.