Best Practices: HTML

HTML is the language of the web, of Facebook, of Twitter, etc., which billions of people use everyday and which has thoroughly transformed the world in the last 2 decades. Surprisingly, it’s relatively simple and very forgiving of mistakes (wow that’s awesome!), and therefore, pretty easy to learn.
Having said that, it’s not that easy to write good, clean & semantic HTML codes. You may have DreamWeaver auto-generated 400 lines of code just for a simple page, which actually requires only 40 lines of “quality codes”. Well, some people strive to achieve it at all time; some claim it doesn’t matter and some don’t even know what the heck it is!
Alright, each of us may have our own styles of writing “producing” codes but the fact is that semantic HTML codes not only help your teammates understand your ideas faster and easier, thereby speeding up your project development, but also (together with CSS and JS as a whole) help decrease your page loading times. So, for big businesses or for those who are serious, it’s now no longer just a matter of choice: you’ve got to write good and semantic HTML codes.
Okay, let’s now specify some best practices when writing HTML:

Use HTML elements for their intented purpose:

Make use of HTML5 new semantic elements: List of new HTML5 tags
Use <ul> for menus; <blockquote> for blockquotes
Each section/article must have a heading using <h1>, <h2>, <h3>,…

Bad Semantics

<div class="article">
 <div class="article_title">Smurf Movie Kinda Sucks</div>
 <div class="the_content">Not surprisingly, this weeks release of
    <div class="darkbold">The Smurfs</div> kinda sucks.</div>
</div>

Good Semantics

<article>
 <h1>Smurf Movie Kinda Sucks</h1>
 <p>Not surprisingly, this weeks release of
    <strong>The Smurfs</strong> kinda sucks.</p>
</article>

Avoid meaningless markup

Use <small>, <strong>, <em> or <span class=””>instead of<b> or <i>tag to decorate/highlight some specific words (not heading)
Eliminate the use ofLimited use of<br /> & <p></p> for creating a new line. Use margin, padding instead!
Only use Div as a site wrapper or intro paragraph (to style a particular block of content). Ref: You can still use div

<div id="wrapper"><font size="5">

</font><header><font size="5">

</font><h1><font size="5">My Happy Blog</font></h1><font size="5">

</font><nav><font size="5">

</font></nav><font size="5">

</font></header><font size="5">

</font></div><font size="5">

</font>

Limit containers usage:

Make use of HTML5 semantic wrapper elements (header, nav, footer, article, section, figure, etc.)
Consider before adding any additional wrappers (divs) (for style purpose only)

Use Class whenever appropriate

Create (then later apply) class in elements that have any chance of being repeated on a page and in different locations
Utilise multiple classes assignment to a given element

Avoid Classitis: (the over-use of class definitions)

<div class="content">

<ul class="list">

<li class="list-item">Orange</li>

<li class="list-item">Red</li>

<li class="list-item">Blue</li>

</ul>

</div>

Keep CSS out of the markup (Never ever use in-inline CSS)

Minimize use of IDs:

Use (about) 1 id per page only – in the main wrapper or recommended in the body tag
the rest used only for JS selector

HTML class/id naming recommendation:
While naming a class or id is just a matter of choice, we recommend to use hyphen “-” for class and underscore “_” for Id:

Class name: content-wrapper
Id name: unique_element

How to best name a class:
Describe what the element actually is (its context) NOT where it is (left or right, col_1 or col_10) or what it looks like (big or small, rectangle or square, red or blue) – describing but NOT specifying the content they enclose)

Name a wrapper as “content”-wrapper
Minimize abbreviation usage unless popular ones:

This reference only specifies some best practises when writing HTML and is not a full starting guide to HTML. Instead, you may wanna start to learn it @ http://htmldog.com/

Avoid meaningless markup

Related posts: