There are thousands of blogs and tutorials websites are available on the internet but not all of the information is useful or of good quality. In this Article We’ll show you 5 ways to keep your code browser, user and search engine friendly. Keep follow this few steps, and i definitely sure that will helps you for your next website project. Enjoy it!

1. Write clean code

Writing clean code will be easily maintainable and less of a pain for you and others.

Bad Code

<div id="Wrapper">
     <div id="MainContainer">
<div id="Header"></div>
    <div id="Content"></div>
 </div>
     </div>

Good Code

<!-- / WRAPPER \ -->
<div id="Wrapper">

   <!-- / MAIN CONTAINER \ -->
   <div id="MainContainer">
       
       <!-- / HEADER \ -->
       <div id="Header"></div>
       <!-- \ HEADER CLOSE / -->
       
       <!-- / CONTENT \ -->
       <div id="Content"></div>
       <!-- \ CONTENT CLOSE / -->
    
   </div>
    <!-- \ MAIN CONTAINER CLOSE / -->

</div>
<!-- \ WRAPPER CLOSE / -->

2. Use the correct DOCTYPE

If you don’t use the DOCTYPE(document type declaration) tag, your Web pages won’t display in standards compliant ways and might result in some strange Web pages.

3. Use Heading Tags and Unordered lists

Use Heading Tags and Unordered lists rather then spacer graphics and nested tables..

Bad Code

Good Code

<div>
    <h2>Heading</h2>
    <ul>
        <li>Content xyz</li>
        <li>Content xyz</li>
        <li>Content xyz</li>
        <li>Content xyz</li>
    </ul>
</div>

4. Use semantically meaningful class & ID names

Whenever possible, use class and ID names that are semantically meaningful and search-friendly. For example:

Bad Code

<ul class="blue">  
      <li>Error 1</li>  
     <li>Error 2</li>  
 </ul>

Good Code

<ul class="Error">  
      <li>Error 1</li>  
     <li>Error 2</li>  
 </ul>

5. Avoid IE’s double float-margin, Use Display: inline for floated elements

Avoid IE’s double float-margin and text indent bugs by using display:inline for floated elements.

Bad Code

#content {
    float: left;
    width: 300px;
    padding: 4px 7px;
    margin-left: 20px;
}

Good Code

#content {
    float: left;
    width: 300px;
    padding: 4px 7px;
    margin-left: 20px;
    display: inline;
}

Conclusion

These are just some of the tips that help me to write better code. I hope that tutorial will also help you to write better and clean code. Apply these Tips to your current and next projects, and you will surely appreciate the efforts.

If You Think that tutorial can be more better , Please share with us. Comment us

if you would like to receive more Tips from us, please consider subscribing to our feed by RSS or by email.

Filed under: Css, Tutorials, Web development by admin