How to write better semantic HTML

Semantic HTML, is HTML where the tags used to structure content are selected and applied appropriately to the meaning of the content.

Use this handy guide as a reference when writing HTML or xHTML.

1. Limit the use of ID's for layout sections and use them more for JavaScript hooks

2. Use Sprites whenever possible

3. Use tag for repeated data that has a naturally tabular form. Never use for layout purposes.<table></table>4. only use to denote a paragraph of text. Never use for spacing alone.

5. <pre><input /></pre>, prefer to use <button> for buttons</button>

6. aim to have one on each page, description of the page</div>&nbsp; &nbsp;

<h2> define section of the page</h2>
<h3> sub-section of the page and follow an </h3>

<h2> logically.</h2>

7. <center> Never use it. Use block-level tag with text-align: center/margin: 0 auto</center>

8. Use <button> tag . It is better than <input type="”button”" />, allows us to assign different styles&nbsp;</button>

9.
use less (use clear, and padding and margin for new line spacing).

10. for any navigation /list use<ul> <li> structure will have more control over it.</li> </ul>

11. <a href="http://draft.blogger.com/blogger.g?blogID=4295856495053567471"> &nbsp;Use the title attribute whenever the contents of the </a><a href="http://draft.blogger.com/blogger.g?blogID=4295856495053567471">…</a> do not

&nbsp; &nbsp; describe what you’ll get from selecting the link. title="" is a usability aid

12. Use <strong> tag &nbsp;instead of <b>, <em> tag &nbsp;instead of <i></i></em></b></strong>

13. Write HTML first, then CSS!

14. use background:#xxx for checking the div’s &nbsp;existence, not &nbsp;border:1px solid #xxx;

15. don’t use “!important” unless you have no other option!</div>