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: 21 20 19 18 17 16 15 14 13 12 11 … 1 » Show All
There are 202 comments (+Add)
Pages: 21 20 19 18 17 16 15 14 13 12 11 … 1 » Show All
Loading ...
202 wordpress theme coding http://www.creative45.com
August 11th, 2010 at 4:38 pm
Thumbs up for this great post.
201 ninel conde http://www.loscuentosdelfaraon.com/
July 2nd, 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)
200 aki http://wp-not-a-human.co.cc
June 26th, 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
199 paras http://www.codesack.com
June 25th, 2010 at 1:27 am
thnks..that was really helpful
198 diş beyazlatma http://www.disbeyazlatma.net
June 19th, 2010 at 9:21 am
thank you pictures
197 gclub http://gclub.net
June 11th, 2010 at 9:15 am
Thank for your website I love gclub content and want you to see my website too.
196 Website Design http://www.newviewit.com
May 6th, 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.
195 Web Design http://exmmedia.com
April 28th, 2010 at 9:23 pm
just what i was looking for….very nice thank you
194 Kevin
April 9th, 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”>.
193 jmtaha http://www.suite16designs.com
March 20th, 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.