Nov 18
Coding Clean and Semantic Templates
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.
5 Simple, But Useful CSS Properties iPhone Gift Ribbon
Comments
Pages: 19 18 17 16 15 14 13 12 11 10 9 … 1 » Show All
There are 181 comments (+Add)
Pages: 19 18 17 16 15 14 13 12 11 10 9 … 1 » Show All
Loading ...
181 Alain Gauthier http://www.albertainsuranceexam.com
February 8th, 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.
180 semantic templates http://www.semantictemplates.com/
February 5th, 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.
179 Avangelist http://avangelistdesign.wordpress.com
February 1st, 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!
178 Carlfinity http://carlfinity.com
January 31st, 2010 at 9:13 pm
Great! This made my day!
177 StevenMullarkey
January 29th, 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
Nice little quick post!
176 Gopinath http://www.thoughtsunlimited.com
January 29th, 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
175 Chris Miller
January 28th, 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’.
174 Jamie McDonnell http://www.jm3d.co.uk
January 26th, 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
173 jhblog http://www.jiaohong.net
January 25th, 2010 at 3:41 am
thanks. i’ve only recently started learning css, and your post is of great help to me.
172 Matt Zillhardt http://www.mattz-design.com
January 14th, 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.