Coding Clean and Semantic Templates 230
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.
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
Great tips, thanks! :D
I guess I’m clean then! Good explanations and illustrations.
Yepp, we all have to watch out for dirty mark-ups. Not only this increase code readability, but also saves time and bandwidth!
have to admit to being guilty of this, but im getting allot better.
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.
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.
very useful
thank you
really nice article to use css and html in proper way.
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.Thank you
Am trying to get used to such things
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”
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.
Great post. I’m getting myself familiar with these tactics now! Thanks.
this is very helpful, i guess i have to cleanup somethink!
#3, example 1 is simply wrong. <p> is for text paragraphs and breadcrumb isn’t a paragraph of text.
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
@Perolo Use of a <div> inside a <p> is not valid XHTML afaik – this is why a <span> tag is used.
Great advice this. Being a teacher I am always trying to get these basic rules through to my students.
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!