Web Designer Wall
CSS & HTML

Coding Clean and Semantic HTML Templates

By Aigars Silkalns Updated 8 min read

The demo page with dashed colored outlines and labels marking header, nav, main, article, aside and footer landmarks

A clean, semantic template uses the HTML element that matches each piece of content, adds a div only when no better element exists, and lets CSS handle layout and spacing. In practice that means landmark elements (header, nav, main, aside, footer), a real heading outline, lists for groups of links, and a small, predictable set of class names.

The goal has not changed since this article was first written: markup that is easy to read, debug and hand to a teammate. What has changed is the toolbox. Landmarks are now a first-class feature of HTML, assistive technology navigates by them, and CSS Grid and logical properties make most wrapper elements unnecessary. This guide rebuilds the old advice around those tools.

Start with a semantic page skeleton

Here is a complete page structure using only the elements the content calls for, plus one div that earns its place. The demo below uses it for a blog post page.

A blog post page with a header and navigation, breadcrumb trail, article card, sidebar with two boxes, and a footer
The finished page: every region is a native element, styled with about 20 lines of CSS (the demo stylesheet is 20 lines).
<body>
  <a class="skip-link" href="#main">Skip to content</a>
  <header>
    <a href="/">Studio North</a>
    <nav aria-label="Primary">
      <ul>
        <li><a href="/work">Work</a></li>
        <li><a href="/journal" aria-current="page">Journal</a></li>
      </ul>
    </nav>
  </header>

  <div class="layout">
  <main id="main">
    <article>
      <header>
        <h1>Designing calm interfaces</h1>
        <p>By Maya Lin, <time datetime="2027-02-14">14 February 2027</time></p>
      </header>
      <h2>Why structure matters</h2>
      <p>…</p>
    </article>
  </main>

  <aside aria-label="Related">…</aside>
  </div>
  <footer>…</footer>
</body>

The only div in that listing is .layout, the wrapper that CSS Grid needs to place main and aside side by side. Every region is still identifiable by browsers, search engines and screen readers. Turn on DevTools’ accessibility tree, or outline the landmarks yourself as below, to check:

The demo page with dashed colored outlines and labels marking header, nav, main, article, aside and footer landmarks
The same page with each landmark outlined and labelled.

Use landmarks instead of generic wrappers

Landmarks let people using assistive technology jump straight to the navigation, the main content or the footer instead of listening to the page from the top. Each landmark element maps to an ARIA role without you writing a single attribute:

Element Landmark role Notes
header banner Only when it is a direct child of body. Inside an article or section it is just a heading group.
nav navigation Give each one an aria-label when a page has more than one.
main main One visible main per page.
aside complementary Content related to, but separable from, the main content.
footer contentinfo Only when it is a direct child of body.
section region Only when it has an accessible name, such as aria-labelledby pointing at its heading.
search search Wrap a site search form in it, as in the example below the table. 
<search>
  <form action="/search">
    <label for="q">Search the journal</label>
    <input id="q" type="search" name="q">
    <button>Search</button>
  </form>
</search>

Choose between article, section and div with one question. If the content makes sense on its own, such as a blog post or a product card, use article. If it is a themed group that needs a heading, use section. If it exists only to hang styles or scripts on, use div. A div is not wrong; it is the right tool for the last case.

See what your markup says without CSS

The quickest test of a template is to disable the stylesheet. If the page still reads in a sensible order, with headings, lists and links in the right places, the structure is sound. The same page with every style removed looks like this:

The same page with no CSS, showing a skip link, navigation list, ordered breadcrumb list, headings, paragraphs, and a footer in logical order
Plain browser defaults still produce a usable document: lists, headings and a logical reading order.

Screen readers and search engines read your page this way. A template built from div elements would collapse into one undifferentiated block of text at this stage.

Remove wrapper divs with modern CSS

Most wrapper elements existed to work around the limits of float layouts. Today you can style the semantic element directly.

Style the element, not a wrapper

A ul that is the navigation does not need a div around it. Apply the layout to the list itself:

nav ul {
  display: flex;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

Use gap instead of spacer elements

Spacing between boxes used to demand a wrapper with a margin. The gap property works in Flexbox and Grid, so the parent controls the space and the children stay plain:

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16rem;
  gap: 2rem;
  max-width: 68rem;
  margin-inline: auto;
  padding-inline: 2rem;
}

@media (max-width: 48rem) {
  .layout { grid-template-columns: 1fr; }
}

If you want to go deeper on these layout tools, see Master CSS Flexbox in 5 Simple Steps and The Simpler CSS Grid.

Pin the footer with Grid on body

A classic wrapper-div job is keeping the footer at the bottom of short pages. Make body a grid and let the middle row grow. The three rows only work when body has exactly three in-flow children, which is why the skeleton above groups main and aside inside .layout: header, .layout, footer.

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100dvh;
}

If your body has a different number of children, use Flexbox instead: body { display: flex; flex-direction: column; min-height: 100dvh; } with main { flex: 1; }. Use dvh rather than vh so mobile browser toolbars do not push the footer off screen.

Prefer logical properties

Properties such as margin-inline, padding-block and inset-inline-start follow the writing direction, so the same template works for left-to-right and right-to-left languages without a separate stylesheet.

Use real elements for common components

Breadcrumbs

A breadcrumb is an ordered list of links inside a labelled nav, with aria-current="page" on the last item. A p or a pile of span elements loses the list semantics.

<nav class="breadcrumb" aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/journal">Journal</a></li>
    <li aria-current="page">Designing calm interfaces</li>
  </ol>
</nav>
.breadcrumb ol { display: flex; gap: .5rem; list-style: none; padding: 0; }
.breadcrumb li + li::before { content: "/"; margin-inline-end: .5rem; }

The separator lives in CSS, so it is decoration rather than content.

Dates

The old article swapped two div elements for a span to build a blog date badge. Use time with a machine-readable datetime value instead, and style it however you like.

Forms

Every input needs a label connected by for and id, or wrapped around it. Group related fields with fieldset and legend. Placeholders are hints, not labels. Our simple contact form shows the pattern in a working layout.

Disclosures, dialogs and popovers

Accordions, modals and menus no longer need div scaffolding and scripts. Use details and summary for a disclosure, dialog (opened with showModal()) for a modal, and the popover attribute with popovertarget on a button for menus and tooltips-style panels. The browser supplies focus handling, the Escape key and the accessibility roles.

Images and media

Wrap an image and its caption in figure and figcaption. Use picture with source elements when you serve AVIF or WebP with a fallback, or different crops per breakpoint, and always give the img an alt and its width and height.

Buttons and links

A link goes somewhere; a button does something. Use a href for navigation and button for actions. Never style an a without an href as a button. A div with a click handler gets no keyboard focus, no Enter or Space activation and no role.

Name your classes consistently

Semantic elements reduce how many classes you need, but you will still write some. Pick one convention and stick to it.

  • Name by purpose, not appearance. .card and .alert survive a redesign; .red-box and .left-column do not.
  • BEM (.card, .card__title, .card--featured) keeps specificity flat and makes ownership obvious in large codebases.
  • Utility classes (the Tailwind approach) move styling into the markup. That is a valid trade-off, but the semantic element choices in this guide still apply: utilities decide how it looks, elements decide what it is.
  • Avoid ID selectors for styling. Keep IDs for fragment links, label associations and ARIA references.

For a quick review of selector options that keep your CSS flat, read The Power of CSS Selectors and How to Use Them.

Add the accessibility basics

  1. Set the language. <html lang="en"> helps screen readers pick the right pronunciation.
  2. Add a skip link. The first focusable element should jump to #main. Keep it visually hidden until it receives focus.
  3. Keep one h1 and a logical heading order. Do not skip from h2 to h4 for styling reasons; style the heading you need with a class. Choose heading levels by the outline, not by size, and note that nesting h1 inside section does not change its level: browsers do not implement the old outline algorithm.
  4. Label repeated landmarks. Two nav elements need different aria-label values.
  5. Do not add redundant ARIA. <nav role="navigation"> adds nothing. The first rule of ARIA is to use a native element when one exists.
  6. Show focus. Style :focus-visible so keyboard users can see where they are.

Keep the source readable

Format automatically

The old advice was to indent by hand or run Dreamweaver’s source formatting. Today, let a formatter such as Prettier do it on save, so every file in the project looks the same regardless of who wrote it.

Stop commenting closing tags

Commenting </div><!-- /wrapper --> was a patch for deeply nested markup. If you use landmarks and fewer wrappers, the closing tag already tells you what it closes: </header>, </nav>, </main>. Reserve comments for the rare div whose purpose is not obvious, and for the boundaries between template files in a theme or component system.

Validate

Run the page through the W3C Nu HTML Checker. It catches unclosed tags, misplaced elements and invalid attributes before they turn into layout bugs. A browser accessibility tree inspector (built into Chrome, Edge and Firefox developer tools) shows exactly which landmarks and names your page exposes.

A checklist for clean templates

  • Every region of the page uses a landmark element.
  • Headings form a single, ordered outline.
  • Groups of links are lists; breadcrumbs are ordered lists in a labelled nav.
  • A div appears only where no semantic element fits.
  • Spacing and layout come from gap, Grid and Flexbox on the parent, not extra wrappers.
  • Actions are buttons, navigation is links, and every field has a label.
  • Class names describe purpose and follow one convention.
  • The page still reads correctly with CSS turned off.

The minimal div count in the old article was a good instinct. The better rule is to choose the element that describes the content, and let the cleaner markup follow from that.

137 comments from the archive

  1. 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

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

  5. 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.

  6. 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.

  8. 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.

  9. 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”

  10. 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.

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

  12. 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

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

  14. 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!

  15. 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?

  16. 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; }

  17. 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.

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

  19. 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!

  20. @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.

  21. 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. (:

  22. 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.

  23. @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.

  24. @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.

  25. 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.

  26. 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).

  27. 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.

  28. 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.

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

  30. 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! [=

  31. 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

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

  33. 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.

  34. 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.

  35. 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

  36. 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!

  37. 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

  38. 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 :)

  39. 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).

  40. 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.

  41. 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.

  42. 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.

  43. 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.

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

    Many thanks.

  45. 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

  46. 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.

  47. 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.

  48. 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….

  49. 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’.

  50. 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.

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

  52. 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.

  53. 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

  54. 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.

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

  56. 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.

  57. 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.

  59. 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!

  61. 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;}

  63. 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.

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

  65. 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!

  66. 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.

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

  68. “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 ;).

  69. 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.

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

    <– for classes
    <– for ids

  71. 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

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

  73. 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.

  75. 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.

  77. 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.

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

    Thanks..

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

  80. 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!

  81. 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!

  82. 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)

  83. 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!

  84. 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.

  85. 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

  86. 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. :)

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

  88. So true,

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

    Dlocc

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

  92. 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

  93. 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?

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

  96. 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.

  97. 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.

  99. 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.

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

  101. #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.

  102. 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.

  103. 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?

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

    Great tutorial.

  105. 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?

  106. 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.

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

  108. Great article…

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

  109. 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.

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

  111. 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

  112. 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’.

  113. 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

  114. 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!

  115. 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!

  116. 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.

  117. 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.

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

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

    Thanks!

  122. 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>.

  123. 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.

  124. 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”>.

  125. 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.

  126. 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 ;)

  127. 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)

  128. 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” )

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

    Enough said!

  130. 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.

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

  132. 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.

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

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

  135. “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!

  137. 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… ;)

Comments are closed on this article.