Cool HTML Codes And 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 html 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:

<input type=”reset” value=”Clear”>

HTML trick no. 2 – Add spacing

To add spacing between certain items, add one or more non-breaking space Special Characters: &nbsp; . In the following example there are 4 non-breaking spaces between the circle and the square:

<img src=”circle.png”/>&nbsp;&nbsp;&nbsp;&nbsp;<img src=”square.png”/>

HTML trick no. 3 – Add a horizontal line

You just have to use the “<hr/>” 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.

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>

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:

<meta name=”description” content=”Car parts for sale”>

<meta name=”keywords” content=”fuel filters, brakes disks , belts” />

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:

<meta http-equiv=”REFRESH” content=”5;url=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 conatains 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:

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

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: <math> and </math>. For example, to insert a fraction x/y use the following code:

<math>
<mfrac>
<mi>x</mi>
<mi>y</mi>
</mfrac>
</math>

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: <svg> and </svg>.  For example, to add a circle to a document use the following code:

<svg id=”svgelem” height=”200″ xmlns=”http://www.w3.org/2000/svg”>
<circle id=”redcircle” cx=”50″ cy=”50″ r=”50″ fill=”red” />
</svg&