Coding Clean and Semantic Templates 233
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.
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.
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.
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.
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.
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).
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.
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.
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
Very informative and useful for writing a semantic css xhtml code,Format (Indent) Your Code is more semantic for organizing the code .
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.
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.
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
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!
Very Cool! thank you.
Thank you very much i got clear idea of coding clean and semantic templates…
Great tutorial.. it’s very helpful to all designers
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
All good, although I disagree with “Posted in : Web Design” being in a
ptag. 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 adivfor that, and savepfor 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 :)
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).
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.
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.
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.
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.
Commenting is such a simple suggestion, and will be incredibly useful. Why haven’t I done this before?
Many thanks.
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
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.
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.
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….