Do not abuse the DIV and keep the code clean-coding clean and semantic templates

Document directory

• Conclusion

 

This article describes how to ensure that the page code is clean and maintained. Use semantic page labels to reduce the abuse of <div> labels.

1. Remove unnecessary <div> labels

Labels nested outside <form> <ul> are not required.

2. Use semantic tags

<H1> <ul> <p> and other labels in place of <div>. Even if the style table is lost, the page readability is ensured.

3. Use as few labels as possible

4. Code indent format

5. Add the <div> block comment at the end of </div>.

 

 

 

 

Address: http://www.webdesignerwall.com/tutorials/coding-clean-and-semantic-templates/

 

If you are the guy who uses <div>
Tag
Everything, this post is for you. It focuses on how you can write clean
HTML code by using semantic markups and minimize the use<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 (maid the large projects ).

 

1.
Remove the unnecessary <div> tags

I 've seen a lot of people wrap<div>
Tag around<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<div>
Tag and declare the styling toform
Selector.

Example 2:

Sometimes we wrap the content with an extra<div>
Tag strictly for spacing purposes. The example on the left uses<div class="sidebox">
To create margin space in between the boxes. But if each box has a heading (ie.
), We can simply apply the margin space toh4
Selector and drop the extra<div class="sidebox">
Tag.

2.
Use semantic markups

You shoshould always use semantic markups to code HTML documents (ie.
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 shoshould always minimize the use<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 shoshould 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 usingCommands> Apply source formatting
(From the application menu ).

5.
Comment the closing </div> tags

When coding for platform templates (ie. WordPress Themes),
Template is most likely splitted into several files: index. php,
Header. php, sidebar. php, and footer. php. Hence, you shoshould 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<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<div>
  Tags.
• You shoshould only use<div>
  Tag for the main layout sections such as: Header, content, sidebar, and footer.
• The content shoshould be in semantic HTML tags, not<div>
  Tags.
• Format the source code and label the closing</div>
  Tags.