Protecting My Email and Phone from Bots on My Website: A Simple HTML Approach

In today's digital age, maintaining online privacy has become increasingly important. As a website owner, one of my top priorities is safeguarding personal information from malicious bots that can scrape email addresses and phone numbers. In this blog post, I'll walk you through a simple HTML approach I've taken to obfuscate my email and phone numbers on my website.

The Challenge

Bots and web crawlers are constantly scouring the internet for email addresses and phone numbers to send spam or use for other malicious purposes. To combat this, I needed a way to display my contact information on my website while making it difficult for bots to extract that information.

The Solution

To address this issue, I turned to HTML and CSS for a straightforward and effective solution. Let's take a look at how I obfuscated my email and phone numbers using simple HTML tags and CSS classes.

<div class="about-info">
    <p><span class="title-s">Name</span> <span>Amine Online</span></p>
    <p><span class="title-s">Profile:</span> <span>Multifaceted</span></p>
    <p>
        <span class="title-s">Email<span class="at-symbol">&#64;</span>hotmail.com</span> is -&gt;
        <span class="email">amine-ghandi</span>
    </p>
    <p>
        <span class="title-s">Phone: +212</span>
        <span class="phone">6-33<span class="hash-symbol">#</span>49-42<span class="hash-symbol">#</span>75</span>
    </p>
</div>

Obfuscating Email

To obfuscate the email address, I broke it into two parts: the username (amine-ghandi) and the domain (hotmail.com). I used the arrow -> as -&gt to point at the username and the <span class="at-symbol">@</span> to draw the @ symbol.

Obfuscating Phone Number

Similarly, I obfuscated the phone number by splitting it into segments using the phone class and added a CSS class (hash-symbol) to display "#" symbols between the segments. This makes it challenging for bots to recognize it as a phone number.

Benefits of This Approach

By using simple HTML and CSS, I've made it more difficult for bots to harvest my email address and phone number. While this method may not provide foolproof protection, it adds an extra layer of security to my online presence without the need for complex coding or images.

Conclusion

Protecting your email and phone number from bots on your website is essential to maintaining online privacy. This HTML approach provides a practical and user-friendly way to obfuscate your contact information, helping you stay one step ahead of malicious web crawlers. Consider implementing this technique on your website to enhance your online security effortlessly.