If you are the guy who uses <div> tag for everything, this post is for you. It focuses on how you can write clean HTML code by using semantic markups and minimize the use of <div> tag. Have you ever edited someone’s templates, don’t those messy tags drive you crazy? Not only writing clean templates can benefit yourself, but your team as well. It will save you time when you have to debug and edit (particularly the large projects).

1. Remove The Unnecessary <div> Tags

I’ve seen a lot of people wrap a <div> tag around the <form> or <ul> menu list. Why create an extra <div> tag that you don’t need? You can achieve the same result by applying the CSS rules to the selector.

Example 1:

The example below shows how you can drop the <div> tag and declare the styling to the form selector.

div form

Example 2:

Sometimes we wrap the content with an extra <div> tag strictly for spacing purposes. The example on the left uses a <div class="sidebox"> to create margin space in between the boxes. But if each box has a heading (ie. <h4>), we can simply apply the margin space to the h4 selector and drop the extra <div class="sidebox"> tag.

div sidebar

2. Use Semantic Markups

You should always use semantic markups to code HTML documents (ie. <h1> for headings, <p> for paragraph text, and <ul> for list items). So, even when the CSS is not presented nor supported, your document still makes sense.

Example:

The image below compares the rendering differences between <div> markups and semantic markups with no css supported.

semantic markups

3. Minimize The Use of <div> Tags

Have you seen the messy templates where <div> tags are everywhere and they drive you crazy? Have you ever missed a closing </div> tag or have an extra opening <div> tag messing up the entire layout? I’m sure most developers have experienced it before. So, you should always minimize the use of <div> tag if possible. It will make debugging and editing easier.

Example 1:

Instead of using <div> tag for breadcrumb navigation, it makes more sense to use <p> tag.

breadcrumb

Example 2:

The following example shows how I can use CSS to cut down two <div> tags by replacing with one <span> tag. They both produce the same layout.

blog date

4. Format (Indent) Your Code

You should always format your source code (ie. indent your nested elements) so it is easier to read and debug. If you have Adobe Dreamweaver, you can easily format the code by using the Commands > Apply Source Formatting (from the application menu).

code formatting

5. Comment The Closing </div> Tags

When coding for platform templates (ie. WordPress themes), the template is most likely splitted into several files: index.php, header.php, sidebar.php, and footer.php. Hence, you should always make a comment for the closing </div> tags so you won’t get lost. For example, when I see </div><!-- /wrapper -->, I know it is the closing tag for <div id="wrapper">.

Example:

I usually insert a HTML comment tag right after the closing </div> tag. I use the forward slash to indicate it is the closing tag.

comment closing tag

Conclusion

  • Minimize the use of <div> tags.
  • You should only use the <div> tag for the main layout sections such as: header, content, sidebar, and footer.
  • The content should be in semantic HTML tags, not <div> tags.
  • Format the source code and label the closing </div> tags.

233 Comments

1 10 11 12
  1. How To Put On A Condom | How To Get Taller
    Mar 17, 2011 @ 5:12 pm

    A great instructional piece to learn how to create/write clean HTML codes. Awesome!

    Reply

  2. How To Put On A Condom | How To Get Taller
    Mar 17, 2011 @ 5:13 pm

    “I usually insert a HTML comment tag right after the closing tag. I use the forward slash to indicate it is the closing tag.” <<<– great example!

    Reply

  3. panax clavis
    May 16, 2011 @ 5:53 am

    I always follow your site thank you

    Reply

  4. sagar
    Jun 4, 2011 @ 2:30 am

    Thanks for tips,

    It is very helpfull 4 me…
    Thanks

    Reply

  5. ORJİNAL PEMBE MASKE
    Jun 16, 2011 @ 1:36 am

    çok güzell

    Reply

  6. complex41
    Aug 23, 2011 @ 11:15 am

    And then he handed you the thirty-five 45

    Reply

  7. pembe maske
    Sep 14, 2011 @ 5:27 am

    I always follow your site thank you

    Reply

  8. Moliva
    Dec 9, 2011 @ 8:16 am

    It is very helpfull 4 me…
    Thanks

    Reply

  9. Dominic
    Dec 15, 2011 @ 12:19 pm

    I really liked this, but for Point 1 Example 2, it should be not !

    Reply

  10. Dominic
    Dec 15, 2011 @ 12:21 pm

    div class=”box” not div class=”sidebox”

    Reply

  11. 第四个李智
    Jun 25, 2012 @ 12:56 am

    耳濡目染

    Reply

  12. Jhon
    Jul 15, 2012 @ 7:55 pm

    thanks for pointing it out dude, nice explanation.. I usually use div tag that somehow causes some trouble like as what you have mention, messing up the layout, and it really consumes a lot of time though…

    Again, thanks… ;)

    Reply

  13. Mehndi Hasan
    Dec 3, 2012 @ 2:53 am

    Thank you so much…!

    Reply

1 10 11 12

Leave a Reply