1. Organizing code with comments
After creating the web pages, we usually need to change the contents and designs next time. That’s why, it is important to keep the code well indented otherwise it is hard to understand the sections of codes. Web pages usually consists of many sections consists of divs. Adding comments to the starting and ending of the major divs makes the coding maintenance lot more easier. But, remember that excessive comments can confuse you.
Good Practice:
<!DOCTYPE html>
<html>
<body>
<!-- Comments are not displayed in the browser -->
<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- This is a sample list -->
<ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ul>
<!-- footer links -->
<footer id="footer">
<div class="foot-inner">
<p class="copyright">Copyright © TestCompany All Rights Reserved.</p>
</div>
</footer>
</body>
</html>
2. Separate Content from Style
One of the main advantages of CSS is it is loaded once by the browser. Next time user hits the same page, it doesn’t load the same CSS because it is already loaded in the browser. So, loading the same page 2nd time is time much faster. However, If the HTML consists of inline CSS, when user requests the page, each time it loads the HTML contents along with the inline CSS. Thus it requires more time that the HTML file with separate CSS files. Another advantage of separating HTML and CSS is future developers that might work on your code make changes to the design quicker.
Bad Practice: Inline Styles
<p style="font-size:14px; font-family:arial,sans-serif;">I hate Inline CSS</p>
Good Practice: Add class to the HTML element and write the css in seperate css file.
<p class="new-class"> I love seperate css</p>
3. Load JavaScript at the end of body!
Browser doesn’t allow to download of the several external JavaScript files simultaneously, which means the browser cannot download anything while it’s downloading JavaScript, resulting in making the page feel like it’s loading slowly.
So, the best strategy here is to load JavaScript last (i.e. after your CSS is loaded). To do this, place JavaScript at the bottom of your HTML document where possible. Best practice recommends doing this right before the closing
tag.Good Practice:
<!DOCTYPE html>
<html>
<body>
<!-- Other Contents -->
。。。。
<!-- Footer Template -->
<?php include dirname(__FILE__)."lib/template/footer.php;"?>
<!-- JS -->
<script src="assets/js/jquery/jquery.js"></script>
<script src="assets/js/common.js"></script>
</body>
</html>
4. Use Practical ID & Class name
Creating ID and class names can be one of the more difficult parts of writing HTML. These names need to be practical, relating to the content itself, not the style of the content.
Bad Practice:
<p class="red">Error! Please try again.</p>
The above HTML is used to show the alert message in red color. Using a value of red to describe red text isn’t ideal, as it describes the presentation of the content. Whenever, design changes is required to make the alert message in blue color, not only we need to change the CSS but also all the instances of the HTMLs.
Good Practice:
<p class="alert">Error! Please try again.</p>
5. Use the “alt” attribute in img tag
Attributes tell more about HTML elements and used by search engine. “alt” attribute of img tag, is mainly used for showing alternate text when a image cannot not displayed. As a result the alt text should be meaningful.
Bad Practice:
<img id="logo" src="images/bnr_logo.png"/>
<img id="logo" src="images/bnr_logo.png" alt="bnr_logo.png" />
Good Practice:
<img id="logo" src="images/bnr_logo.png" alt="WiMAX Banner Logo" />
6. Use "title" attribute with anchor tag
Anchor tag “a” specifies the linked document, resource, or location. The Title attribute in anchor tag is used to provide tooltip information to the user when they hover over the anchor element. This enhance the user experience. A title should be simple and informative because search engine read the titles of anchor tags. If imperative title is used, search engine treat is as spam.
Bad Practice:
<a href="http://blog.com/all-articles">Click here.</a>
<a href="http://blog.com/all-articles" title="Click Here">Click here.</a>
Good Practice:
<a href="http://blog.com/all-articles" title="A list of articles.">Click here.</a>
7. Use "for" attribute with input tag to select a input by clicking a label.
**Good Practice:**<input id="tel-change-btn-on" type="radio" name="tel-change-btn" checked="checked" value="1">
<label for="tel-change-btn-on">Change telephone number</label>
<input id="tel-change-btn-off" type="radio" name="tel-change-btn" value="0">
<label for="tel-change-btn-off">Don’t change telephone number</label>
8. Limit input text by "maxlength" attribute
The maximum number of 524288 characters are allowed in the element, if not restricted by “maxlength” attribute. However, a too-long input string would break your application. Thus “maxlength” attribute should be used with input tag.
Good Practice:
<label for="update">What's your status?</label>
<input type="text" maxlength="140" id="update" name="update">
9. Write inline CSS in your HTML mail
HTML mails are usually written with inline CSS. However, except “Outlook” all other mail clients (Yahoo, Gmail) dosn’t allow absolute position. Therefore, even if the HTML mail contents can be seen ok in the browser before sending the mail, after mailing you might see that the elements with absolute positions are collapsed.
10. Don’t forget to close your tags.
Closing all the tags is a W3C specification. Some browsers may still render your pages correctly, but not closing your tags is invalid under standards.
Good Practice:
<div id="test">
<img src="images/sample.jpg" alt="sample" />
<a href="#" title="test">test</a>
<p>some sample text </p>
</div>
11. Make your code readable, write one list item per line
Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong line is hard toooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo read.Bad Practice:
<ul>
<li>General</li><li>The root Element</li><li>Sections</li>
</ul>
Good Practice:
<ul>
<li>General</li>
<li>The root Element</li>
<li>Sections</li>
</ul>