Did you know that HTML can do more than just structure web pages? While most developers stick to the basics, there are hidden HTML tricks that can enhance user experience, improve SEO, and add interactive elements—all without JavaScript!
In this blog, we’ll explore 8 tricky HTML codes that every web developer should know. These hacks will help you create stunning designs, improve accessibility, and boost engagement. Let’s dive in!
1. The “Hidden” Comment Trick
Ever needed to keep a note inside your HTML without affecting the page? You can use an HTML comment, but there’s a trick most developers don’t know.
Code:
<!-- This is a normal comment -->
<!-- This comment is "hidden" & won’t appear in view-source -->
<!--- This syntax hides your comment in the source code -->
Adding an extra hyphen (---) hides comments from view-source but still keeps them readable in developer tools. This trick is useful for debugging without exposing sensitive notes.
Related Resource: HTML Comment Documentation
2. Auto-Playing Text Animations with <marquee>
Although <marquee> is outdated, it still works in many browsers and can be a quick way to add moving text without JavaScript.
Code:
<marquee behavior="scroll" direction="left">This text moves from right to left!</marquee>
It’s not recommended for professional designs, but if you’re making a fun project or need quick attention-grabbing text, this trick can be handy.
3. Placeholder Text That Stays After Typing
Normally, placeholder text disappears when users type. But with a small trick, you can keep it visible.
Code:
<label>
Name: <input type="text" placeholder="Enter Name" onblur="this.placeholder='Enter Name'">
</label>
When the user clicks outside the input field, the placeholder reappears. This improves usability for forms.
Related Resource: HTML Input Placeholder
4. Clickable Entire Div Without a Button
Usually, users have to click buttons or links. But with this HTML trick, you can make an entire <div> clickable!
Code:
<a href="https://yourwebsite.com" style="display: block; text-decoration: none;">
<div style="padding: 20px; background-color: lightblue;">Click Me!</div>
</a>
This is great for CTA (Call-To-Action) sections, making it easier for users to click anywhere.
5. Stop Users from Copying Your Content
Want to protect your content from being copied? You can disable text selection using HTML and CSS.
Code:
<style>
body {
user-select: none;
}
</style>
This prevents users from selecting and copying text, reducing content theft. However, it’s not 100% foolproof.
Related Resource: Disable Text Selection
6. Use Favicon as an Interactive Notification
Did you know you can change the favicon dynamically? This is great for alerts or notifications.
Code:
<link rel="icon" type="image/png" href="default-favicon.png" id="favicon">
<script>
function changeFavicon(url) {
document.getElementById("favicon").href = url;
}
setTimeout(() => changeFavicon("alert-favicon.png"), 5000);
</script>
After 5 seconds, the favicon changes, grabbing the user’s attention.
7. Mobile-Friendly Clickable Phone Links
Want to make your phone number clickable on mobile? Use this simple trick!
Code:
<a href="tel:+1234567890">Call Us Now!</a>
When tapped on a mobile device, this link opens the dialer automatically.
Related Resource: Click-to-Call HTML
8. Use HTML5 <details> for Click-to-Reveal Sections
You don’t need JavaScript for collapsible sections! The <details> tag does it for you.
Code:
<details>
<summary>Click to Reveal More</summary>
<p>This is hidden content until clicked.</p>
</details>
This is great for FAQs, spoilers, or extra details on a webpage.
Related Resource: HTML5 Details Tag
Conclusion
These 8 HTML tricks prove that you don’t always need JavaScript or CSS to add cool functionalities to your website. From hidden comments to interactive favicons, each trick helps you optimize your web pages efficiently.
Try them out, and let us know which one surprised you the most!
Want More HTML Hacks?
👉 Check out W3Schools and MDN Web Docs for more advanced HTML techniques.
Thank you for visiting! Check out our blog homepage to explore more insightful articles.
