HTML has gone through more than 20 years of stormy road. From HTML1 to HTML5, it almost witnessed the development of Internet. Coding need new ideas, and we also need to follow some principles.
Today let’s talk about 10 coding principles that front-end developers should follow.
1. Be good at using div
When you are developing a web page, the first thing is to distinguish the layout. By using div, your code will be clean and easy to understand.
2. Segmentate HTML and CSS
A good page should be able to separate HTML and CSS. Developers should have a habit that do not write CSS code in HTML tags. And developers should create a new file which include all style sheet and it can also help other developers to easily read your code.
3. Optimize CSS code
Nowadays, many developers like to create many css files for one website. Actually it does harm to the pagespeed. The solution is to merge CSS files. There are many tools for example CSS Optimizer, Clean CSS can be achieved.
4. Put Javascript on the bottom line
Same with CSS files, too much Javascript would also slow the website. But there is one thing different with CSS. Browsers can not load many Javascript at one time. One solution is to put these files on the bottom of the site.
5. Be good at using heading element
<h1> to <h6> are used to highlight the page. We recommend to use <h1> tag for the title of the article.
6. Use appropriate HTML tags in the right place
Tags of HTML are used to construct the content. For example <em> is used to emphasize the content and <p> is used to separate paragraphs. We should use appropriate tags in the right place.
7. Don’t forget to close tags
According to W3C standards, we need to close tags especially in IE6, IE7 and IR8.
8. Lowercase
Use lowercase for tags is the standard. One reason is that we concern about the readability. For example the following code:
9. Add “alt” attribute
The alt attribute is used in HTML and XHTML documents to specify alternative text (alt text) that is to be rendered when the element to which it is applied cannot be rendered. It is also used by “screen reader” software so that a person who is listening to the content of a webpage can interact with this element.
10. Add notes for browser compatibility
As developers, responsive web design always make them headache. It will be better if we add some notes for different browsers.
