13 HTML Tricks To Make Your Websites Shine

Simple HTML tricks to spruce up your websites and wow your audience, whether that's your visitors or your clients.
Sep 16, 2021 • 7 minute read
Ruchi Bhargava @RuchiBhargava1
Technical Co-pilot
Cover photo for 13 HTML Tricks To Make Your Websites Shine

Mantente actualizado

Suscríbete a nuestro boletín de noticias para mantenerte al día en los temas que importan.
¡Gracias por suscribirte! Revisa tu bandeja de entrada para nuestra próxima actualización.

The following HTML tricks will help you create dynamic  websites that will wow visitors for years to come.

So feel free to copy, paste, tweak and play around with these cool HTML codes!

You can also consider hiring a freelance HTML expert to help.

 

1. Clickable maps

This cool HTML trick allows you to create a map with clickable areas that you can link to other parts of the document, or other web pages.

An example of this feature would be a world map that would take visitors to the different regions where your business has a presence.

Clickable maps example

The <map> element will let you define the areas on an image that a visitor can click. Simply mention the corresponding X Y coordinates in the <area> elements inside <map>.

Here's the code behind it: 

<h1 style="text-align:center;">The 7 Continents</h1>

<h4 style="text-align:center;">&#10148; Click on the dots in the image to go to a continent section</h4>

<map name="continents_map">

 <area shape="circle" coords="70,70,10" href="#north_america">

 <area shape="circle" coords="133,185,10" href="#south_america">

 <area shape="circle" coords="270,137,10" href="#africa">

 <area shape="circle" coords="292,44,10" href="#europe">

 <area shape="circle" coords="469,201,10" href="#australia">

 <area shape="circle" coords="374,65,10" href="#asia">

 <area shape="circle" coords="340,267,10" href="#antartica">

</map>

<figure style="text-align:center;">

    <img usemap="#continents_map" src=https://bit.ly/2bgFrvL width="600px" />

    <figcaption>World Map</figcaption>

</figure>

<div>

    <h3 id="africa">Africa</h3>

    <p>Our locations in Africa</p>

</div>

<div>

    <h3 id="asia">Asia</h3>

    <p>Our locations in Asia</p>

</div>

<div>

    <h3 id="europe">Europe</h3>

    <p>Our locations in Europe.</p>

</div>

<div>

    <h3 id="south_america">South America</h3>

    <p>Our locations in South America.</p>

</div>

<div>

    <h3 id="north_america">North America</h3>

    <p>Our locations in North America:</p>

</div>

<div>

    <h3 id="antartica">Antarctica</h3>

    <p>Our locations in Antarctica.</p>

</div>

<div>

    <h3 id="australia">Australia</h3>

    <p>Our locations in Australia.</p>

</div>

 

2. Allow visitors to change background or text color

This HTML trick adds some fun iteractivity for your site's visitors, by letting them select their own background and text color!

HTML choose background and text color example

With just a little bit of cool HTML code you can now please all of the people, all of the time.

Here's the code you will need:

<select name="clr" onchange="document.bgColor=this.options[this.selectedIndex].value" size="1">
    <br>
    <option value="black">black
        <option value="orange">orange
            <option value="flamingred">fuschia
                <option value="lightyellow">light yellow
                    <option value="green">green
                        <option value="cyan">cyan
                            <option value="yellow">yellow
                                <option value="red">red
                                    <option value="white">white</option>
</select>&nbsp;&nbsp;Background Color

<br>
<select name="clr" onchange="document.fgColor=this.options[this.selectedIndex].value" size="1">
    <br>
    <option value="black">black
        <option value="orange">orange
            <option value="flamingred">fuschia
                <option value="lightyellow">light yellow
                    <option value="cyan">cyan
                        <option value="yellow">yellow
                            <option value="red">red
                                <option value="white">white</option>
</select>&nbsp;&nbsp;Text Color

 

3. Tableizer

If you've ever struggled to add a well-formatted table to display information or data on your site, then this HTML trick is for you.

Simply copy and paste data from your Excel, GSheets or or Calc into Tableizer - a simple web-based application - and it will generate an HTML code snippet to paste into your website code.

The result is a neat table where you can customize details like background colors.

 

4. Add Meta Data

This cool HTML trick might be the most important if you want your site to be seen.

The meta data as we're discussing here is information about your site that you want search engines like Google to know about. 

Using HTML, you can give Google a description of your site (which they may or may not use in the search entry for your site, but wil certainly use when categorizing it) as well as some keywords relevant to your site.  

Don’t forget that Freelancer.com has tons of SEO experts who can help you with all facets of SEO, including back-end HTML tricks like this.

Meanwhile, the code for adding meta data is simple:

<meta name="description" content="Used auto parts for sale">

<meta name="keywords" content="fuel filters, brake discs, belts" />

 

5. Hide Field

Reddit warriors have pointed out this example of "programming horror" in which a field for internal use is visible for the public to see.

This form is an example of amateurish programming, and you don't want such an oversight on your website.

With this HTML trick, you get the option to hide fields.

The visitor can't type anything into a hidden field, but it's still there for internal use if you need it.

Here's how it works:

<html>

<head>

    <title>My Page</title>

</head>

<body>

    <form name="contact" action="http://www.mydomain.com/myformhandler.cgi" method="POST">

        <div align="center">

            <input type="text" size="25" value="Enter your name here!">

            <input type="hidden" name="Language" value="English">

            <br><br>

        </div>

    </form>

</body>

</html>

From the code above, the resulting output will be a hidden field that visitors will not be able to see. The hidden field here will tell the form handler the users preferred English.

Freelance Website Design Experts
$30 USD / hour
(167 reviews)
Website Design
Diseño de sitios web
HTML
PHP
WordPress
$15 USD / hour
(46 reviews)
Website Design
Diseño de sitios web
WordPress
Comercio electrónico
Carritos de compras
$50 USD / hour
(317 reviews)
Website Design
PHP
HTML
WordPress
Comercio electrónico
$20 USD / hour
(595 reviews)
Website Design
Diseño de sitios web
PHP
WordPress
Magento

 

6. Add a horizontal line

A horizontal line to break up long sections of your website will make the page easier on the eye.

Horizontal line example

To add the line, use the <hr/> tag, as in:

<h1>HTML</h1>

<p>HTML is a language for describing web pages.....</p>

<hr>

<h1>CSS</h1>

<p>CSS defines how to display HTML elements.....</p>

 

7.  Input suggestions

You can make it easier for visitors to find what they're looking for by bringing up a list of suggestions when they're typing something into a field.

HTML input suggestion example

You'll have to come up with the suggestions on your own, but once you do, all you have to do is simply add them to the following cool HTLM code:

<input type="text" list="text_editors">
<datalist id="text_editors">
    <option value="Atom"></option>
    <option value="Notepad ++"></option>
    <option value="Sublime Text"></option>
    <option value="Wordpad"></option>
</datalist>
<p><em>For example;
   </em> Sublime Text</p>

 

8. Highlight text

The <span> tag will let you add highlights to text on most major web browsers.

You can choose the color of the highlight, of course. The code is simple:

<span style=“ background-color: #FFFF00”>Your text here.</span>

 

9. Add background image to text

With this HTML trick, you can add a background image instead of a normal highlight to your text if the font is large enough.

The text below has been highlighted with the image of a turqoise sea:

HTML cool highlight example

We recommend not using this tip for fonts smaller than 20 pts, or there won't be much of a difference between the image and a background color.

We used the following code to create the example above:

<SPAN STYLE="background-image: url(https://upload.wikimedia.org/wikipedia/commons/f/f5/Cool_waters_of_the_turquoise_blue_Aegean_Sea_-_Ayval%C4%B1k_-_panoramio.jpg">NoBoringHighlight…</SPAN>

 

10. Add fine print

This HTML trick lets you add fine print without making you choose a specific font size.

You can add legal rights, citations, restrictions, terms and other fine print at the bottom of your document with the <small> tag.

HTML fine print example

And here's how to do it:

Black Friday Sale!!! Upto 70% off on everything in the store!<sup>*</sup>

<p><small>* Terms and Conditions apply</small></p>

 

11.  Color Picker

This is a really cool HTML trick!

With HTML5, there are some really interactive customizations that visitors to your website will like.

The color picker will lets you choose what color you want from a palette rather than having to enter an abstract color code.

HTML color picker example

This feature will be particularly user-friendly for those new to coding or without a lot of coding knowledge.

The code can be something like this:

<!--HTML--> Choose a color to color the below text <input id="color_picker" type="color" onchange="showHex();"> <span id="color_hex_value"></span> <h1>COLOR ME !</h1> 

 

12. Add voice recognition

In HTML5 and later, you can add speech recognition to a text input, and it's as simple as:

<input type="text" x-webkit-speech />

 

13. Insert math equations

Inserting math equations (using the MathML language) is super simple in HTML5 and later. Put all your equations between the tags <math> and </math>.

This code will insert a fraction 'a/b' to your page:

<math>

<mfrac>

<mi>a</mi>

<mi>b</mi>

</mfrac>

</math>

There are as many as 142 HTML elements that the W3C  has standardized for your use. HTML5 has given us exciting features to make our websites as user-friendly and media-rich as possible, with support for video formats and canvas, among other things.

Mantente actualizado

Suscríbete a nuestro boletín de noticias para mantenerte al día en los temas que importan.
¡Gracias por suscribirte! Revisa tu bandeja de entrada para nuestra próxima actualización.

Talk to one of our Technical Co-Pilots to help with your project

Get Help Now
Artículos recomendados solo para ti
Learn the complete end-to-end process of building a successful website for your business in our comprehensive guide 
19 MIN READ
Effective social media marketing is crucial your brand. Learn how to hire a social media expert to bring you maximum results for minimum investment
10 MIN READ
Struggling to come up with the best idea? Our exhaustive guide runs through the idea generation process to help you tap into your inner Steve Jobs.
10 MIN READ
A million dollar business idea is useless if it remains written on a napkin. Learn the best ways of securing funding in 2020 to build your dream.
26 MIN READ