10 Cool HTML Tricks

Are you creating or maintaining a blog or a website? You should then know that websites use HTML markup language to represent the content. You would like to have a cool feature or layout? Check out this 10 cool tricks!

HTML trick no. 1 – Clear form input

If you want to provide a visitor a possibility to easily clear his or her input in a form, you just need to add a required button. This line does it all:

HTML trick no. 2 – Add spacing

To add spacing between certain items, add one or more non-breaking space special characters:   . In the following example there are 4 non-breaking spaces between the circle and the square:
    

HTML trick no. 3 – Add a horizontal line

You just have to use the “

---

” tag.

HTML trick no. 4 – Set character encoding

If you use non-ASCII characters, you should set character encoding in order to display those characters properly. The most commonly used encoding is UTF-8. You have to add the following code into the head section of a document:

Make sure that the document itself is also saved in UTF-8 encoding.

HTML trick no. 5 – Get found!

In order to be more visible to search engines, you should provide some meta data about your site. For example, if you have a web site for selling car parts, you should add meta data somewhat like this:

HTML trick no. 6 – Redirect visitor

If you want to redirect the visitor to another URL, for example 5 seconds after accessing your page, add the following line to the head section:
http://www.the-domain-you-want-to-redirect-to.com”>

HTML trick no. 7 – Encode URL

If you want to link to a document or file which’s path contains non-ASCII characters, you should “URL encode” Check this link out for the complete reference: http://www.w3schools.com/tags/ref_urlencode.asp

HTML trick no. 8 – Add voice recognition (HTML 5)

If you want to add speech recognition to a text input in a HTML5 document, just insert the following line:

HTML trick no. 9 – Insert math equations (HTML 5)

HTML5 supports adding math equasions using MathML language. The just have to be between the tags: $and$. For example, to insert a fraction x/y use the following code:
$$

x
y

HTML trick no. 10 – Insert a SVG image (HTML 5)

HTML5 supports adding SVG (Stored Vector Graphics) images to documents. The just have to be between the tags: .  For example, to add a circle to a document use the following code: