13 Cool Tricks For HTML

You may not have trained in graphic design or the art of user experience, but that doesn't mean you cannot design and build websites or blogs that look good and are a pleasure to visit. With HTML, CSS3 and JavaScript, you have a lot of simple tools at your disposal to make your website or blog look attractive, user-friendly and modern. HTML5 has made a huge contribution to the gorgeous websites being designed everyday.

A little intuition, empathy, and testing - along with some cool HTML tricks - will help you get there too!

1. Tableizer

This one is not really an HTML trick since Tableizer is an external app. But it's great for building HTML tables out of data, using existing Calc or Excel spreadsheet templates. You only have to paste your cells into the Tableizer, and it will generate an HTML code snippet to paste into your website code. The result is a neat table where you can edit details like background colors to customize.

2. Map images

Image maps are cool images with clickable areas that you can link to other parts of the document, or other web pages. Not everyone may be aware that 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>.

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

You can only style markers directly on the image in image editing software.

3. Allow visitors to change background or text color

A little extra bit of code will allow your visitors to choose their own text and background color. It's impossible for you to please everyone with your color choices, so using this trick will be an excellent case of pleasing all of the people, all of the time.

4. Add MetaData

Be seen on Google's searches and other search engine searches by making sure that you have provided meta data about your website. In fact, it is no longer an option, but essential if you want to stay neck on neck with your competition.

Don’t forget to optimize the rest of your website content for users on search engines to find you easily. SEO pros at Freelancer can help you with your back-end SEO and search engine marketing (SEM) needs.

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. HTML gives you the option to hide fields. The visitor can't type anything into a hidden field, and when the visitor submits the form, the form carries the hidden field.

8. Highlight text

The <span> tag will let you add highlights to text on both Firefox and IE. 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

You can add a background image instead of a highlight to your text if the font is large enough. 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. The code is:

11. Color Picker

With HTML5, there are some really interactive customizations that visitors to your website will like. The color picker will need a little JavaScript coding and CSS to let you choose what color you want from a palette rather than having to enter an abstract color code. This feature will be particularly user-friendly for those new to coding or without a lot of coding knowledge.

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.

What do you think about the HTML features on this list? Have you used any of them before? Are there any cool features you think should be on our list? Let us know in the comments below.