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

Jaswinder
Nov 18, 2009 at 7:08 am

It’s hard to think to that many people creating themes/templates don’t already do these techniques.
I hope this open a few eyes

paulo
Nov 18, 2009 at 7:12 am

Great tips, thanks! :D

Benjamin Reid
Nov 18, 2009 at 7:20 am

I guess I’m clean then! Good explanations and illustrations.

Max
Nov 18, 2009 at 7:25 am

Yepp, we all have to watch out for dirty mark-ups. Not only this increase code readability, but also saves time and bandwidth!

mariess
Nov 18, 2009 at 7:27 am

have to admit to being guilty of this, but im getting allot better.

Perolo
Nov 18, 2009 at 7:27 am

It is good to rethink your HTML coding style and try to create more lean code.

But I am questioning the tip to use SPAN instead of DIV and then using “display: block” to make a SPAN behave like a DIV. actually the only difference betwenn DIV and SPAN is the default display style.

Jordan Moore
Nov 18, 2009 at 7:46 am

I think people just need to know the differences between block and inline elements. Divs are block elements and will act like a ul, headers etc.

designfollow
Nov 18, 2009 at 7:50 am

very useful

thank you

webmasterdubai
Nov 18, 2009 at 7:50 am

really nice article to use css and html in proper way.

Dimox
Nov 18, 2009 at 8:03 am

IMHO, better to comment the closing tags this way: <!-- #wrapper --> (or <!-- .wrapper -->), because it tells me that I using: ID or class. I.e. such a comment more informative.

Housamz
Nov 18, 2009 at 8:08 am

Thank you
Am trying to get used to such things

Yuvalik
Nov 18, 2009 at 8:14 am

One more tip is missing: Using “complex selectors” in CSS can often result in a serious reduction of superfluous tags like DIVs.
Instead of wrapping something in a DIV or give it an ID, you should first look if it is possible to target it using CSS selectors only, most people tend to forget there are things like “body p:first-child ul li + li”

Andy
Nov 18, 2009 at 8:22 am

I somewhat disagree with point #1, example #2:

Sections within the content should be marked up with a surrounding <div> (or <section> in HTML 5), as stated by the iCITA guidelines. Though, not for spacing purposes, but for introducing structure to the content. (should also lose the box class).

I more or less agree with the rest. Bottom line is to keep it design-agnostic.

KDzyne
Nov 18, 2009 at 8:24 am

Great post. I’m getting myself familiar with these tactics now! Thanks.

Pu
Nov 18, 2009 at 8:25 am

this is very helpful, i guess i have to cleanup somethink!

Anton R.
Nov 18, 2009 at 8:26 am

#3, example 1 is simply wrong. <p> is for text paragraphs and breadcrumb isn’t a paragraph of text.

Maxim
Nov 18, 2009 at 8:28 am

Nice post, however, if u develop yr sites using Drupal u hardly can avoid extra divs (blocks, view and so on add so much useless divs), I would extend your post describing how to develop x-column layout to be more seo oriented using less divs as possible

Fred
Nov 18, 2009 at 8:30 am

@Perolo Use of a <div> inside a <p> is not valid XHTML afaik – this is why a <span> tag is used.

Mark Wilkinson
Nov 18, 2009 at 8:38 am

Great advice this. Being a teacher I am always trying to get these basic rules through to my students.

Stuart
Nov 18, 2009 at 8:41 am

Yup – agreed on all levels – I use the same approach to all mark up and only sometimes have to concede submission to other ways because structure, or dynamic data breaks the rule. But to adopt this approach for 99% of everything you do can only improve speed and clarity. Nice post!

Stuart
Nov 18, 2009 at 8:43 am

On the breadcrumb thing – I tend to use unordered lists. I think it makes more sense to me personally. But then thats like saying I like cheddar cheese and you may like brie. The both are cheese and therefore kind of right in my mind – no?

Neil Sweeney
Nov 18, 2009 at 8:44 am

I couldn’t agree more with the minimize usage of <div>. Too many <div> tags are just as bad as using <table> in my opinion.

Too often there is
<div class=”element”>
<div class=”padding”>
<div class=”subelement”>
<p>Text</p>
</div>
</div>
</div>

Also, nesting CSS is a must. Doing something like this
<ul>
<li class=”foo”>One</li>
<li class=”foo”>Two</li>
</ul>

It isn’t needed. Rather define the top most element like <ul class=”foo”> and then nest the style in

ul.foo{ foo: bar; }
ul.foo li { foo: bar; }

Andris
Nov 18, 2009 at 9:01 am

I know this problem by the name of Divitis. But sometimes you need to wrap things in divs. For example if you use different semitransparent background images that are layed above eachother. But in general you’re absolutely right. Wrapping a div around another block element is just wrong.

Everson Santos Araujo
Nov 18, 2009 at 9:13 am

#1 is for crazy ones, #2 make sense, #3 are saying: Drop the div and put p instead? It doesn’t feel better

digibomb
Nov 18, 2009 at 9:35 am

great post, i definitely agree…less is always better…

to extend this post you could discuss the how to better condense php tags w/ css in WordPress themeing, also big prob these days…

keep it up Nick, you ROCK!

Andy
Nov 18, 2009 at 10:27 am

@Stuart: I’d argue that, if you are going to use lists for breadcrumb navigation, an ordered list would be more proper. After all, it’s going from more general (home page) to more specific (the sub-page), so there’s a clear order to the structure.

Elizabeth K. Barone
Nov 18, 2009 at 11:02 am

I use just a few div tags: #header, #content, #sidebar, #footer, and sometimes #wrapper if necessary. When I first started, I definitely was one of “those” people who used quite a few div tags – probably left over from my table days. As I got more and more comfortable with CSS, I began using less and less div tags. Every time I look at older HTML files, I shake my head at my overuse of divs, but feel proud that I have come a long way and have learned a lot – thanks, in some part, to WDW. (:

Kit MacAllister
Nov 18, 2009 at 11:02 am

I just spent hours and hours replacing an entire website based on tables with clean semantic code. They had and tags all over! I think it was probably the result of a WYSIWYG editor. I deleted all the extra tags and the formatting looked exactly the same, just cleaner.

Clean code is SUPER valuable.

Elizabeth K. Barone
Nov 18, 2009 at 11:05 am

@Neil Sweeney: Oh man, I can remember the days when I was like, “Nesting? What’s nesting?” Heh. That’s what I love most about this gig – it’s a neverending learning process.

Elizabeth K. Barone
Nov 18, 2009 at 11:07 am

@Kit McAllister: I have a website (not originally built by me) that is tables nested within tables nested within tables nested within.. Yeah, you get the picture. There are also TONS of divs. It’s a nightmare and unfortunate because we can’t get a go ahead to do a redesign.

Tony Crockford
Nov 18, 2009 at 11:19 am

putting a comment after a closing div tag can trigger a bug in IE6:
http://www.positioniseverything.net/explorer/dup-characters.html

watch out for it!

Michal
Nov 18, 2009 at 11:32 am

Regarding the <p> tag as a container for breadcrumbs I agree with @Anton_R. — if our aim is to create semantic markup, then breadcrumbs certainly aren’t paragraphs and therefore wrapping them in a <p> tag is wrong. As somebody has already suggested here, <ol> would be most appropriate. After all, a breadcrumb is nothing else than a list of items in a specified order.

Marc
Nov 18, 2009 at 12:08 pm

Finally a well-written post about this topic. I hate having to “clean up” web site files written by people who use the DIV’s for everything. You may also want to consider using DL’s for certain lists that allow alternating selectors as well (e.g. events and respective dates lists, quote/citation combinations, image’s with captions, etc).

Min Kim
Nov 18, 2009 at 12:09 pm

Sweet!
Always very helpful! Thank you

Gavin
Nov 18, 2009 at 12:40 pm

Great article, I think it would be cool if there was a site where those of us who are just starting to write code, could submit our code for critique. I can get everything displayed as I want it, but I am unsure if i am doing it in the most effective way, or if there are new and improved ways of doing it.

It would be nice to have someone scan the code and say what they like and dont like about the way i have don it and how it could be improved.

David Korona
Nov 18, 2009 at 12:46 pm

There are some nice reminders here that have slipped into the back of my mind over the years. I agree with others that tags are supposed to strictly be for paragraphs, but the idea of cutting down on divs is well presented; something I’ll be thinking about for upcoming projects. Thanks.

Adi
Nov 18, 2009 at 1:36 pm

Thanks for the reminder! ;)

WordPress Girl
Nov 18, 2009 at 2:14 pm

Sweet! Thank you. I’m going to clean up my act starting now!

Aleks
Nov 18, 2009 at 3:51 pm

yeah, love my div’s … but all great points… gonna try not to div so much :)

Robbi
Nov 18, 2009 at 4:07 pm

I always use too many divs! Recently I’ve discovered that for big discographies for the groups I work with, and even events listings, lists have been just as good, and much, much cleaner and lighter. Thanks for the post! [=

David Aimi
Nov 18, 2009 at 5:10 pm

there is nothing wrong with applying display:block to a span tag. I think for most CSS developers by nature we know the span tag is inline and we want to mentally retain that, despite that we are using display:block. I definitely suggest if you don’t already learning proper semantic HTML markup. We are absolutely moving towards a more semantic web, and it’s best to build correctly. You’ll save time later by learning it now! Cheers- D

cssah
Nov 18, 2009 at 6:37 pm

Very informative and useful for writing a semantic css xhtml code,Format (Indent) Your Code is more semantic for organizing the code .

Christine
Nov 18, 2009 at 7:08 pm

Great post! I catch myself using too many divs from time to time, and it’s always good to be reminded how to write better/cleaner code. I’m a web developer that hasn’t had formal dev education, so I really enjoy all the posts of things I probably would have learned in school.

STINGER_LP
Nov 18, 2009 at 8:17 pm

Good post. I’m glad that i use almost all tips mentioned here in redesign of my site, but i think i can still find some extra DIVs if i look harder =)) Thanks for this tips.

Grey
Nov 18, 2009 at 8:47 pm

Thanks for the tips! I for one am guilty for using a large number of DIV tags when doing my markup. I will try to reduce them more now and apply classes to the basic HTML tags. Thanks for the tips!! :D

room34
Nov 18, 2009 at 9:50 pm

Good tips… I know I overuse the <div> tag despite my best intentions not to. I do think there are some legitimate uses for the <div> tag as a wrapper even if it might not technically be necessary. (Then again, some of that may be vestiges of old habits I developed years ago to work around IE6 limitations.)

My biggest hangup is relying on <div> when I just need to have single lines of content and I don’t want the space a <p> creates. Sure, a <br /> would work, but I don’t like the text just being “naked.” :) There’s also a legitimate benefit to using <div> in this way though, in PHP code where the only thing in the <div> is variable output… if the variable is empty, you don’t get a visible blank line on the page, which you would with a <br />.

One change I’d recommend for the suggestions in this post is to use an unordered list for breadcrumbs, rather than a paragraph with slashes (or any other hardcoded delimiter) between the links. Better semantics! Format the <ul> however you like with CSS… make the <li> tags inline, remove the bullets, add a background image for an arrow or arbitrary content with the :before pseudo-class. Slick!

mabonic
Nov 19, 2009 at 12:36 am

Very Cool! thank you.

deesh
Nov 19, 2009 at 2:18 am

Thank you very much i got clear idea of coding clean and semantic templates…

Great tutorial.. it’s very helpful to all designers

Martin Kristiansson
Nov 19, 2009 at 3:58 am

Very good tips & tricks, im on the right side now but was on the left side for a long time =) Even though i think the code might be easier to understand for the outiders if you use divs

Kev Adamson
Nov 19, 2009 at 6:07 am

All good, although I disagree with “Posted in : Web Design” being in a p tag. I used to do that, but if you analyse the true semantics of that line, it is not, imo, a ‘paragraph’. I would still use a div for that, and save p for actual paragraphed content.

I tend to code flush to the left, using line spaces and comments communicate nesting etc. I feel code indentation was very important in the days when html pages were ‘code soup’, not so much now. Although it is a pet hate of my programmer buddy, so I may use that Apply Source Formatting tip when I’m done coding, but then gzip when published to win that little bit extra on file size.

Good post :)

Johan de Jong
Nov 19, 2009 at 6:21 am

According to the following conclusion: “You should only use the <div> tag for the main layout sections such as: header, content, sidebar, and footer.”
you never should use div’s in HTML5.
This because the layout can be done with the according tags (header, nav, section, article, aside and footer). And all the other content should be in the right tags (like stated in this article).

Andy
Nov 19, 2009 at 6:35 am

you never should use div’s in HTML5.

Nonsense. You’re free to use <div> tags as much as you’d like. It wouldn’t have been allowed in the language otherwise.

Of course, you should use the proper semantic markup where applicable, though.

Seeker
Nov 19, 2009 at 7:11 am

Interesting post, however, maybe a bit too idealistic – sometimes you just gotta use few more divs to ensure its working and looking the same in all browsers.

Wayne Johnson
Nov 19, 2009 at 7:19 am

This all makes sense to me, one comment I have is that adding comment code to end of the div is not very web friendly as you should optimize you code for live performance. i.e. Googles make the web faster involves this.

Trevor Saint
Nov 19, 2009 at 7:45 am

An overload of divs and classes, also known as divitus and classitus is best avoided, and makes perfect sense.

Anything to improve the quality of mark-up should be every front end developers approach in any project.

Thanks guys, nice article.

Bones
Nov 19, 2009 at 8:06 am

Commenting is such a simple suggestion, and will be incredibly useful. Why haven’t I done this before?

Many thanks.

Bones
Nov 19, 2009 at 8:08 am

My previous comment didn’t make sense because the code was stripped out. It should have read:

“Commenting the close div tag is such a simple suggestion, and will be incredibly useful. Why haven’t I done this before?
Many thanks.”

Sorry

Chris Falzone
Nov 19, 2009 at 8:15 am

Good Points and I agree that we should be more semantic with our markup. I don’t know that I would take it as far as you have.

On instance where I end up using div tags more often is when I have a CMS with a WYSIWYG Editor. Yes, it might be paragraph content to me, but I cannot ensure that the user won’t put a table in or some other element that should not nest inside of a paragraph tag.

Also, the more classed/id-ed your content is, the easier it for the JS coders to pick out and traverse your content. Not that a heading element couldn’t be classes and id-ed just as well as a div.

Pavel Kuts
Nov 19, 2009 at 8:19 am

I just can’t see how a date like 17 Nov is a paragraph and should be placed inside a <p>-tag for the code to be “semantically” correct. I would use a span inside of a span, even em inside of a span. But not a paragraph.

All in all you’re right on the money, though! Front-end cutters like myself should have the drive to use less div’s and less classes. Classitus is such a bore… When I’m wondering “How should I call THIS class then?”, I know I’ve messed up my markup.

viettel
Nov 19, 2009 at 8:56 am

The article shows using p tag rather than div tag may affect your final web result because many people usually define css for p tag like: margin; text-align….

sabithpocker
Nov 19, 2009 at 9:48 am

1. Decide upon the contents to be put on the page.
2. Put headings in h1,h2,h3.. according to the hierarchy of the website.
3. Put paragraphs in ‘p’ links in ‘a’ and so on following semantic markup.
4. Do the basic styling and typography common to the page with css(eg :base font size,color etc).
5. Group different blocks of data by using ‘div’ tags and naming them semantically by adding class names or unique ids.
6. Position the blocks according to the layout.
7. Add css for elements inside each block, ie. custom css for the block

This is how i do and i can avoid many unnecessary divs and gets clean markup.

Even i think the use of “p” tag replacing “div” is not a good idea for breadcrumb. use ‘p’ for paragraph, and ‘div’ to group elements into a block. Here i think we are grouping some elements into a block so i would suggest using a ‘div’. Another drawback – we might need to override the default margins and padding when using ‘p’.

Mike
Nov 19, 2009 at 11:45 am

Sorry if this has been mentioned previously but using a few CSS 2.1 selectors as opposed to assigning classes to different elements of the same type can also save a bit of excess code. I’ve found the adjacent and child selectors most commonly useful.

IE6 will no doubt have issues with it but depends how important IE6 is to your visitors.

Design Informer
Nov 19, 2009 at 1:16 pm

Very helpful article. I also get the case of “DIV”itis as well. This will help cure that disease. :)

haberler
Nov 19, 2009 at 1:17 pm

very nice article thank you

simplemal
Nov 20, 2009 at 5:10 am

Thanks for the nice article!

trCreative
Nov 20, 2009 at 5:13 am

Some good tips that are often overlooked!

Waheed Akhtar
Nov 20, 2009 at 7:23 am

excellent post. thanks

Francois Royer Mireault
Nov 20, 2009 at 11:41 am

Very well written, you have the ability to come with new articles that are really useful. I’ll have it open next time I code a template. Keep on the good work.

Michelle
Nov 20, 2009 at 2:21 pm

Really useful, I wish I had come across this sooner. I have just finished redesigning my own blog today and it has been challenging to say the very least. If you get time please give it a visit and send me your honest feedback, I am always looking to improve and learn from some of the best. Thanks

Rcky
Nov 20, 2009 at 4:42 pm

I hope most guys that work with html markup know about these points… but im not agreeing about the replacement of the with tags… your just grouping links, so it doesnt make sense. Although its an article that beginners should know.

Rcky
Nov 20, 2009 at 4:43 pm

i ment div with p tags

baratas
Nov 20, 2009 at 6:53 pm

Very good. Congratulations. Peace.

rgbtantra
Nov 21, 2009 at 3:07 am

Nice post!! I generally override these things….thanks

Yogi - CMSThemes.NET
Nov 21, 2009 at 4:00 am

Great article, and very well written mate!

fatboyrun
Nov 21, 2009 at 4:12 am

Nice post – waiting new one’s

Carl114
Nov 21, 2009 at 8:09 am

Perfect article. Thanks! I will take note of the redesign :).

andres
Nov 21, 2009 at 1:47 pm

Great, I really need this.

Nazim Jamil
Nov 21, 2009 at 1:48 pm

Excellent post! Will defiantly be implementing the tips in my next project!

Bryan Kulba
Nov 21, 2009 at 2:02 pm

Commenting at the is a great idea, I never thought about it, and it could save some serious headaches.

Mike
Nov 22, 2009 at 4:04 am

Thanks , man :)

I like you article :)

itech_seo
Nov 22, 2009 at 11:42 am

nice work, keep it up.

Babatunde Adeyemi
Nov 22, 2009 at 1:12 pm

Thanks for sharing, I’m very guilty of the overuse of <div> tags, though I’m changing anyway

suman
Nov 23, 2009 at 3:54 am

I also used comments like “” , but this gives a lot of ie6 duplicate character bugs

Elijah
Nov 23, 2009 at 5:12 am

Very great, post.

hans
Nov 23, 2009 at 5:18 am

guys read this book: http://www.amazon.com/Transcending-CSS-Fine-Art-Design/dp/0321410971

he’s the master of semantic design.

Andy
Nov 23, 2009 at 7:12 am

thanks for the post – you are absolutely right, I will stick with it…

Brent
Nov 23, 2009 at 8:18 am

Excellent post Nick.

Often, if you’re using an older CMS or forced to work with a PHP developer who simply doesn’t get semantic markup, you won’t have an option to use an ordered list or an unordered list for breadcrumbs. In that case I’d stick with a DIV and save the P tag for paragraph text.

As a person who’s been doing this for over 10 years, I can’t tell you how grateful I am when someone takes the time to comment closing DIV tags. I know it takes an extra second but it can save tons of time and headaches down the road.

I’m going to recommend my employee’s read this. Thanks.

shin Hwang
Nov 23, 2009 at 9:03 am

first comment on here abcd aaaa

Joost Kiens
Nov 23, 2009 at 11:44 am

It could be argued that the use of the first p in the semantic example is not very, uh, semantic.

Some might say that paragraph tags should be used only for paragraphs. The first p is not used for a paragraph. Since there is no html tag for metadata of an article, maybe a div or span (which have no semantic value) with a semantic class name would be more appropriate?

Of course this is just academic bs, both will work just fine, but I’m not so sure it’s more semantic to use p in this case.

Actually this is very interesting: if there’s no html tag for the type of content you want to use (like above), do you take a tag that ‘comes close’ or do you opt for div or span?
In other words, is it better to stick to the strict semantic value of a tag, or take those semantic properties a bit more loose and reduce divs and spans (but why)?

I am not so sure. But I tend to go for the more strict style.

Angels
Nov 23, 2009 at 10:09 pm

thank you!
great post. Sometimes I use too much “div” :D

Curtiss
Nov 23, 2009 at 11:38 pm

I found reading “Bulletproof Web Design” by Dan Cederholm improved my use of traditional mark-up elements immensely. Nick’s post is a great start but if you really want to get better read as much as you can and study other peoples code as much as you can. Just “View Source” on this page an you can learn a ton. Great post!

didid
Nov 24, 2009 at 1:06 am

Thanks, nice post. Does too much tags influence page load time?

lanxiaoxi
Nov 24, 2009 at 6:53 am

Thanks for your great post.

Jack
Nov 24, 2009 at 8:01 am

Top tips for web designers.

Alex
Nov 24, 2009 at 9:26 am

What should you do if you need an extra tag purely for graphical reasons?

If I need to produce a flexible fluid box with fancy corners for instance then there seems to be no way other than to have extraneous divs:

Heading

.box-top {width: 90%; height: 60px; background: url(img/back-left.gif) no-repeat left top; float: left;}

.box-top div {width: 60px; height: 60px; background: url (img/back-right.gif) no-repeat right top; float: right;}

Peixe
Nov 24, 2009 at 9:33 am

If you are the guy who uses tag for everything, jajajaa me!!! gracias!

Peixe
Nov 24, 2009 at 9:36 am

wow, i’m happy, I can use divs here to!!

tssson
Nov 25, 2009 at 4:50 am

Nice post but I must say that comment the end closing tag can be a really bad thing. Sometimes IE6 for some reason can´t handle the commenting and creates really annoying “ghost texts, there aren’t really any logic when or why IE6 is doing this. My recommendation as a front-end web developer is not to use any comment at all inside the tag.

best website templates
Nov 25, 2009 at 6:14 am

Wow ! that’s great …..hope to expect more.

Indrek
Nov 25, 2009 at 6:55 am

Excellent tips, thanks.
I too should minimize the use of div tags. A very bad habit that I should get rid of.

Sebastian Tibichi
Nov 25, 2009 at 11:53 am

Good tips to follow. I do breadcrumbs with lists because they are much flexible when is comes to styling.

Dean
Nov 25, 2009 at 3:35 pm

divs are the new tables.

PSD Penguin
Nov 25, 2009 at 4:51 pm

frickn love it!!

Ellen
Nov 25, 2009 at 5:12 pm

Wow, what a great article! The tips are simple but with great effect on the code. I try to clean up my code too and I think good commenting is also very helpful.

Thanks a lot, Nick!

Jon
Nov 25, 2009 at 5:54 pm

I know you normally focus on HTML+CSS based designs, but it should be mentioned that the reason people used so many divs was to be able to create complex designs. while its still possible to create great looking designs with just CSS most people also now use js (jquery, mootools) to create these designs. That way you can still have efficient markup being sent to the browser (and the search engines) and render it using techniques that require additional elements.

Mark
Nov 25, 2009 at 11:00 pm

So true, when you try and make a websites SEO better by eliminating tables, the over use of divs is just as bad!

egzemplarz
Nov 27, 2009 at 3:02 am

“You should only use the tag for the main layout sections such as: header, content, sidebar, and footer.”
For main sections you can use tags from HTML 5 draft, like header, hgroup, footer, section, aside, etc…(of cours if you enjoy to use HTML 5 for all your website). Every browser can display it, and you needn`t use so much id`s, and classes.
However I like this article, thanks for writing this blog.
Sorry if my english isn`t perfect ;).

nice
Nov 27, 2009 at 6:09 am

very nice!!!

Vesa Virlander
Nov 27, 2009 at 12:01 pm

Tip #5: I don’t like that example cause that doesn’t tell me if it’s #wrapper or .wrapper so that’s why I always close my divs with:

So now work buddy’s can easily spot the class/id I used from the code.

Vesa Virlander
Nov 27, 2009 at 12:04 pm

Hmm the comment preview showed the code in comment #108 but it didn’t work after the publish…

<– for classes
<– for ids

janine meyer
Nov 28, 2009 at 1:33 pm

Thanks for the great post. I think as a general rule if you can have your pages coded in such a way as to make it easy for others to understand you have done a good coding job

Jordan Koschei
Nov 28, 2009 at 1:58 pm

HTML5 will make divs even more semantic by replacing (some) of them with built-in header, navigation, footer, sidebar, etc. tags.

crossyou
Nov 28, 2009 at 9:48 pm

非常喜欢这个博客,太精彩了。

Satish Gandham
Nov 28, 2009 at 11:51 pm

Good tips, I used div tag a lot in creating a wordpress theme.
Now im going to rewrite all of it with minimum div tags.

Deise Ramirez
Nov 29, 2009 at 12:17 am

Thanks for the tips. I always try not using to many DIV tags.

Angelo Beltran
Nov 29, 2009 at 4:45 pm

Awesome! I thought I was the only one who commented on ending div tags. I think that for most people who are initially accustomed to OOP will naturally modularize things with DIV tags. I try both styles whenever I start on new projects.

josh
Nov 29, 2009 at 5:07 pm

Thanks for the post! Great examples of how to minimize code!

Fred
Nov 30, 2009 at 12:52 am

I think this is a great tutorial… many times ive spent hours trying to figure out the code of a clients website cuz the oder designer did a mess with those div tags. I only everyone coded like this.

Vivek Mahadik
Dec 1, 2009 at 2:23 am

Great Tips…… Like to visit This site Again…. also like previous post : 5 Simple, But Useful CSS Properties
very helpful for me…

Thanks..

Mark Palma
Dec 1, 2009 at 6:40 am

Nice article, clean codes equals less yet effective codes. Less time, same results.

asia-girl
Dec 1, 2009 at 6:42 am

Japanese Girls All about Japanese girls Online Dating, chat, motor show girls – All Japanese girls!

Erik
Dec 1, 2009 at 12:12 pm

Jeeze, you make Div’s sound almost as bad as tables!! Haha, it was a great article. It is simple information that probably makes sense to most people who read it, yet almost everyone probably started thinking about how they could be doing a better job with semantics (myself included). Thanks for the reminder!

Melissa
Dec 1, 2009 at 6:40 pm

I thought I was writing pretty clean code but I found a couple of things here that I could be doing better. thanks for another great post!

Mike
Dec 2, 2009 at 3:39 am

There are still reasons to use divs, such as padding and specific widths (IE issues) You still need an inner div to set padding (it’d be great to have the padding and a set width on a div, but, yeah…IE)

Clone Scripts
Dec 2, 2009 at 8:53 am

Cheers for this article. I am still trying to get the idea of the div tag and using it in combination with CSS which I am terrible with! This article has helped me off in the right direction. Cheers for the great write up!

Matthew Cook
Dec 2, 2009 at 4:44 pm

Very good tutorial. I though I use a lot of div tags but I don’t think I do after reading through that. I am definitley going to start to comment the closing tag of my divs though. Will make debugging much easier.

Thanks.

MrVaughan
Dec 2, 2009 at 9:54 pm

Thanks for the tips. I’m definitely a div power user if you will. I vow to reduce div tags from now on. I always comment them though.

Thanks Again

Aleksandar
Dec 3, 2009 at 6:30 am

Commenting the closing div tags is a great tip. I wish everyone use it some day so I have less problems with working on client’s existing sites. :)

bixbite
Dec 4, 2009 at 3:12 am

I found comment the close tag is really imporatant for some big project.
good acticle!

Philippines Freelance Designer
Dec 4, 2009 at 9:55 am

thanks for this tips…. thanks for posting this article….

Devin Walker
Dec 4, 2009 at 9:48 pm

So true,

I use a lot of DIV tags for sure. Well thought out post.

Dlocc

ximumu
Dec 5, 2009 at 8:52 pm

this is very good.

jeux de gestion
Dec 6, 2009 at 6:27 am

right !

SmsVar, Sms Gönder, Toplu Sms
Dec 6, 2009 at 1:44 pm

this is thank you..

Adam Hermsdorfer
Dec 6, 2009 at 10:55 pm

Good article. Its funny how some people use div’s like they did nested tables.

Jordan
Dec 7, 2009 at 1:19 am

Nice tips

DecryptWeb
Dec 7, 2009 at 6:28 am

Thanks for the tips.
They are really helpful.

Mkk
Dec 7, 2009 at 9:58 am

I think for breadcrumb navigation its better to use

Mkk
Dec 7, 2009 at 9:59 am

I think for breadcrumb navigation its better to use ul li

Kenan
Dec 8, 2009 at 8:28 am

Great,
I want to implement comments so I’m peeking at Your code. Could You explain me, how can DIV be inside LI?
I’m confused

Thanks

Basic Websites
Dec 8, 2009 at 1:00 pm

Personally in the example of replacing DIV tags with a single span tags, I think the DIV example is more readable as the 17 looks out of place, like an error or something. Thoughts?

bolo
Dec 10, 2009 at 12:27 pm

I had learned many knowledge from this post.

Elior Shalev
Dec 12, 2009 at 9:28 pm

very good tips, Thank you!

Guttu
Dec 14, 2009 at 4:11 am

Amazing tips. I am trying to improve my HTML skills and these simple tips will certainly help a lot.

Jason
Dec 14, 2009 at 12:20 pm

I’d like to think my semantic div usage is okay, will need to use that Commands > Apply Source Formatting a bit more though :D I think mentioning to people to use separate stylesheets more too. I still see a lot of websites with unnecessary stylings in the actual html.

Adam Bard
Dec 14, 2009 at 12:29 pm

Good tips. I personally try to comment closing div tags with their css selectors, e.g.

<div id=”header”>

</div><!– #header –>

Not a big difference from your suggestion, but it sets a good standard and provides that much more information.

Alexandre Mattos
Dec 16, 2009 at 7:53 am

Thanks!!!
Very nice post!

=D

Future Webs
Dec 16, 2009 at 10:27 am

Some Great Tips, thanks for the post!

Suyog Raut
Dec 18, 2009 at 3:32 am

very good tips, Thank you!

sam
Dec 20, 2009 at 12:56 pm

hello, thanks for your nice post, I’d like to implement it to minimize of using tags :)

Tessa
Dec 21, 2009 at 5:30 pm

Oh, the things I wish I’d known when I first started with CSS!

jones
Dec 21, 2009 at 8:21 pm

very good post, i like this.

Emma
Dec 22, 2009 at 6:22 pm

Just started learning HTML and CSS at Uni and the less overwhelming the s code is the better for me.. This article was really worthwhile reading, I’m really happy to learn how to keep it short and sweet. Cheers. – Emma, Swinburne University, Australia.

Jignesh Thummar
Dec 24, 2009 at 5:56 pm

Thnx Buddy i learnt a lot from ur blog and ur pictural represantation is very good…….

Veera
Dec 29, 2009 at 5:15 am

Good Tips. Thanks for the post.

c.
Dec 29, 2009 at 10:47 am

#2: The date in this instance probably would have been better served as a subheading (h3 in this example).

#3: Breadcrumbs should have been rewritten using a styled ordered list, rather than using links in a paragraph separated by slashes.

I disagree on the usage of p’s to replace div’s for fragments like the date, since it is a form of label. The p tag is not some catchall tag for anything you’re not sure how to markup. It has semantic meaning and isn’t interchangeable with div. I interpret “paragraph” to be reserved for blocks of text, like the traditional paragraphs you learned in elementary school. The specs offer no such suggestion, so I suppose “paragraph” is open to interpretation.

Ang23
Dec 30, 2009 at 3:07 am

Thanks, Very useful

Matthew Aebersold
Jan 1, 2010 at 5:52 pm

This is a wonderful post, especially for seasoned web developers. I celebrate the idea of taking a look at the work that we’re doing, and making sure that it’s as clean and semantic as it can possibly be. I would love more of these types of posts.

Douglas
Jan 4, 2010 at 7:26 pm

Do you have any suggestions for minimizing divs when creating layouts with lots of rounded corners. So far, I think firefox is the only browser that supports a rounded corner css attribute. It is especially annoying when you are designing a content module with rounded corners that must resize in both directions, requiring either a lot of nested divs or four unnested absolute positioned corner pieces… Any tricks you know?

Michael Clancy
Jan 4, 2010 at 10:24 pm

There is something about organized XHTML code and CSS that makes coding great.

Great tutorial.

Michelle
Jan 5, 2010 at 6:58 pm

great tutorial, thanks :)

vincentdresses
Jan 6, 2010 at 2:07 am

Good Tips. Thanks

Bhaskar Phukan
Jan 6, 2010 at 2:46 pm

Thanks, Very useful. One small writing mistake i found
In the example 2 last line
“drop the extra tag.”
“sidebox” should be “box” only.

J. Albert Bowden II
Jan 7, 2010 at 3:38 pm

Your site doesn’t follow these guidelines…so I’m blown away here. Are you advocating for something that you really don’t care about? Or really don’t know about?
My guess is that you’ll saw it has something to do with WordPress…Wordpress does not dictate your markup. You have control over that.
I realize how critical this sounds, but I am stumped. How can I take any of this seriously?

Shane Hudson
Jan 8, 2010 at 4:40 pm

Great post, I use far too many s… so thanks for letting me know!

Simon Carr
Jan 9, 2010 at 5:09 pm

Great post! Writing clean code is really important to make websites function correctly… And it also makes a big difference when their are multiple developers working on a project.

Rod Homor
Jan 11, 2010 at 11:04 am

Good article; best of all, it reinforces my ‘good habits’ / best-practices that I strive to achieve. Thanks.!

Pradeep
Jan 11, 2010 at 1:07 pm

Great article…

I don’t use ‘div’ everywhere…5th point is useful…thanks…

Monica
Jan 12, 2010 at 12:14 am

Great Post. Thanks, very useful.

Menelaus
Jan 12, 2010 at 2:04 am

这篇文章不错,规范自己,不经给别人带来方便也给自己带来好处!

Loan Expert
Jan 12, 2010 at 9:09 pm

Really a nice template

Matt Zillhardt
Jan 14, 2010 at 10:50 am

Been using this coding technique for awhile now, but its been a really helpful review and it really needs to be said. Just the proper formatting and comments make using the code that much easier.

jhblog
Jan 25, 2010 at 3:41 am

thanks. i’ve only recently started learning css, and your post is of great help to me.

Jamie McDonnell
Jan 26, 2010 at 8:14 am

Thanks, one point about breadcrumbs – this is a list of links right, not a paragraph of text, therefore it should be a and definitely not a paragraph… nice simple article though, thanks

J

Chris Miller
Jan 28, 2010 at 6:21 pm

Just a note on using ‘p’ instead of ‘div’. If the website is using a content management system with a WYSIWYG editor, keep in mind that all sorts of tags might be inserted into your markup, so in that case I suggest always using a ‘div’.

Gopinath
Jan 29, 2010 at 7:19 am

Thoughts Hosting:- Domain Name Rs.92/-only, 10Gb space, 100 Email id’s, Rs.2600/-only. And for every domain get FREE extras over 7900/-. *Start Your Own Web Hosting Company Only for Rs.4000/-. visit: http://www.thoughtshosting.com, Contact:9059747833

StevenMullarkey
Jan 29, 2010 at 11:43 am

I was going to say “You should only use the tag for the main layout sections such as: header, content, sidebar, and footer.” but that’s in your conclusion :D Nice little quick post!

Carlfinity
Jan 31, 2010 at 9:13 pm

Great! This made my day!

Avangelist
Feb 1, 2010 at 3:10 pm

If you can persuade people to not only reduce their div bloat but curb span as well that would be doing me a huge favour!

semantic templates
Feb 5, 2010 at 8:19 am

Really Nice Post, it will help me to learning semantic coding by using html tag and respective css, which will load fast and support each and everything. Thanks for such good post.

Alain Gauthier
Feb 8, 2010 at 6:34 pm

very useful. some of my WordPress site are with div tags instead of p tags. I think it is the TinyMCE that does it but I am not sure yet why.
However your article help me understand that p tags are indeed better to use than div tags in my posts.

Matsomoto San
Feb 9, 2010 at 8:15 pm

Yes! That is’ what i think. Less is more…

niliya
Feb 23, 2010 at 6:04 am

hi friends

check your website real value

websitereckon.com

WebsiteReckon contains a collection of useful features such as checking Google Page Rank (PR), Compete and Alexa Traffic Rank, Backlinks Checker, Server IP and Location on Google Map, DMOZ and Yahoo Directory Listings and more. You can use it for various purposes include doing research before buying or selling website; want to find out how popular the website is; use it as SEO analytic tool to improve your site performance; or just about curiosity.

hotfixes
Feb 23, 2010 at 5:08 pm

Thank you, this post has been very helpful 2 me

capsiplex
Feb 23, 2010 at 5:34 pm

very useful. some of my WordPress site are with div tags instead of p tags.

Satyendra Chauhan
Feb 24, 2010 at 7:23 am

This is a really good technique and will definitel..

Steph
Feb 27, 2010 at 12:05 am

Good to know I’m doing it right :)

J.F. Herrera
Mar 2, 2010 at 1:08 am

Great information. I especially agree with commenting your code. Not for others sake, but for your own when you back to update it.

Thanks!

sbobet
Mar 4, 2010 at 12:15 am

Thanks for this tips

KejeN
Mar 6, 2010 at 7:47 am

Thanks a lot for this post – it’s very eyes opening for me.

ARTisani
Mar 12, 2010 at 7:27 am

Very nice explanation. We all know its best to build our sites this way, but having it written down is always a good reminder.
Thanks for your effort

Matt
Mar 13, 2010 at 6:18 am

Of course, with HTML5’s new tags, you can cut down on DIVs even more. E.g. <div class=”header”> becomes <header>, <div class=”sidebar”> becomes <aside>.

jmtaha
Mar 20, 2010 at 2:54 am

I really appreciate this article. It drives me crazy when people don’t use what’s already within HTML (semantic tags), to code their sites. Good job, I’m really becoming a fan of your site.

Kevin
Apr 9, 2010 at 2:34 am

Ick, I really disagree with tip 3.

Having the breadcrumb in a p doesn’t make sense. It’s not part of any content. It’s not like a paragraph inside a post, it just stands alone as a distinct page element. It would be wrong to say a paragraph tag is a more semantic match for that. I would always use a div for something like a breadcrumb.

And your date example is just too fragile. What if you needed to add a year in and then style the date, month and year all differently? If you were really adamant about avoiding divs, you could do <span><span>2010</span></span>, but at that point, you’re breaking semantics. It’s just so much easier – and more future-proof – to have <span class=”day”>, <span class=”month”> and <span class=”year”>.

Web Design
Apr 28, 2010 at 9:23 pm

just what i was looking for….very nice thank you

Website Design
May 6, 2010 at 7:42 am

I was guilty of div overdose when starting out with html. Remember going through it years ago and cutting out 50 divs from one page! Lesson learned.

gclub
Jun 11, 2010 at 9:15 am

Thank for your website I love gclub content and want you to see my website too.

diş beyazlatma
Jun 19, 2010 at 9:21 am

thank you pictures

paras
Jun 25, 2010 at 1:27 am

thnks..that was really helpful

aki
Jun 26, 2010 at 1:12 am

i always put an extra div tag to give the element their own space and also position. I guess I can cut the usage of div after this ;)

ninel conde
Jul 2, 2010 at 12:00 am

Ok, I have a question. You say about removing the excessive use of divs.
It can affect how you read the google bot my page … My code is a mess.
I was trying the webmastertool of google and has many references to this that you comment … can you help me?
(BTW i have a WP theme)

wordpress theme coding
Aug 11, 2010 at 4:38 pm

Thumbs up for this great post.

baagdi designer
Oct 18, 2010 at 3:34 pm

right things u right here

Timothy
Oct 28, 2010 at 12:26 am

i dont quite agree with point 1 example 2. since each box could be generated from the database. Its better and easier to be controlled when the contents( h2, content) are being stuffed inside a container ( div class=”box” )

Brett Widmann
Oct 29, 2010 at 4:56 pm

Great post. Thanks so much for sharing!

krike
Dec 7, 2010 at 6:37 am

oops, apparently i’m using to much div’s :D, good tips

Submitted on cms tutorial: http://cmstutorials.org/tutorial/detail/coding_clean_and_semantic_templates

Dave
Dec 14, 2010 at 7:39 am

I totally agree with what you say, then I looked at your own source code for this page.

Enough said!

mikwillson
Dec 23, 2010 at 3:47 am

Your article’s resource box should help to persuade your readers. No matter how amazing your article is if it’s not succeeding in driving traffic to your website cheap uggs

Juno Mindoes
Dec 23, 2010 at 10:30 pm

now supplying the latest white iphone 4 conversion kit to make your iphone 4 different from others. As a fashion fans like you will surely love it.

Roca Wear Purses
Dec 24, 2010 at 7:12 am

Seriously good information, here. Thanks for posting it.
Hope you guys do just as well this year!

Henry Peise
Dec 24, 2010 at 9:17 pm

White iPhone 4 was the best of the bunch, even though that photo also was a bit washed out.

Imran
Jan 7, 2011 at 1:31 am

Very Informative :) Gud Work Guys

Uçak Bileti
Jan 11, 2011 at 11:30 pm

mardinn adana

Ben
Jan 12, 2011 at 4:44 am

Hey this is a great post. I’m going to email this to my buddies.

Hugo Menino Aguiar
Jan 25, 2011 at 11:07 am

I absolutely agree with Nick. Developers overuse div’s. Already passed to much time on debugging due to this “abuse”.

These are simple hints that create great benefits.

altın çilek
Feb 2, 2011 at 5:57 am

I always follow your site thank you

hcg damla
Feb 2, 2011 at 1:31 pm

I totally agree with what you say, then I looked at your own source code for this page

prestashop themes
Mar 16, 2011 at 8:51 am

usefuel tips, thanks for so detailed information

Jocelyna
Mar 17, 2011 at 3:24 am

Very informative tips. Thanks for sharing… :)

How To Get Taller | How To Put On A Condom
Mar 17, 2011 at 5:11 pm

This tutorial rocks!

How To Put On A Condom | How To Get Taller
Mar 17, 2011 at 5:12 pm

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

How To Put On A Condom | How To Get Taller
Mar 17, 2011 at 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!

panax clavis
May 16, 2011 at 5:53 am

I always follow your site thank you

sagar
Jun 4, 2011 at 2:30 am

Thanks for tips,

It is very helpfull 4 me…
Thanks

ORJİNAL PEMBE MASKE
Jun 16, 2011 at 1:36 am

çok güzell

complex41
Aug 23, 2011 at 11:15 am

And then he handed you the thirty-five 45

pembe maske
Sep 14, 2011 at 5:27 am

I always follow your site thank you

Moliva
Dec 9, 2011 at 8:16 am

It is very helpfull 4 me…
Thanks

Dominic
Dec 15, 2011 at 12:19 pm

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

Dominic
Dec 15, 2011 at 12:21 pm

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

第四个李智
Jun 25, 2012 at 12:56 am

耳濡目染

Jhon
Jul 15, 2012 at 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… ;)

Mehndi Hasan
Dec 3, 2012 at 2:53 am

Thank you so much…!

Post Comment or Questions

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.