30 best practices and 30 best practices for beginners of HTML

Source: Internet
Author: User

30 best practices and 30 best practices for beginners of HTML
1. Keep tags closed

In the past, we often saw code similar to the following ......) :

<li>Some text here.  <li>Some new text here.  <li>You get the idea.

Note that the UL/OL label of the outer package is missing (who knows whether it is intentional or unintentional), and the LI label is also forgotten. According to today's standards, this is an obvious bad practice and should be avoided by 100%. In short, keep the closed tag. Otherwise, you may encounter problems when verifying html tags.

Better Way

<ul>    <li>Some text here. </li>    <li>Some new text here. </li>    <li>You get the idea. </li>  </ul> 
2. Declare the correct document type

I have previously joined many CSS forums. Whenever a user encounters problems, we recommend that you do the following:

1. Verify the CSS file to ensure there are no errors.

2. confirm that the correct doctype is added.

DOCTYPE appears before the HTML Tag. It tells the browser whether the page contains HTML, XHTML, or both, so that the browser can correctly parse it.

There are usually four types of documents to choose from:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

There are always different statements about the document type declaration to be used. It is generally considered that the strictest statement is the best choice, but research shows that most browsers use a common method to parse such statements, so many people choose to use the HTML4.01 standard. The bottom line for selecting a declaration is whether it is really suitable for you. Therefore, you need to consider the declaration that suits your project.

3. Never use inline styles

When you write code in your head, you may often add a little bit of css code in the line, just like this:

<p>#someElement > p {    color: red;  }
4. Put all external css files in the head tag

Theoretically, you can introduce CSS style sheets at any position. However, we recommend that you add HTML standards to the head mark of a webpage to speed up page rendering.

During Yahoo's development, we found that introducing style sheets in the head label will speed up webpage loading, because this will gradually render the page. -- YSlow team

5. Place the javascript file at the bottom

Remember that the principle is to make the page appear in front of the user as quickly as possible. When a script is loaded, the page stops loading until the script is fully loaded and executed. Therefore, it will waste more time for users.

If your JS file only needs to implement some functions (such as clicking a button event), you can safely introduce it at the bottom of the body. This is definitely the best method.


<p>And now you know my favorite kinds of corn. </p>  <script type="text/javascript" src="path/to/file.js"></script>  <script type="text/javascript" src="path/to/anotherFile.js"></script>  </body>  6. Never use inline javascript. It's not 1996 now!

Many years ago, there was another way to add JS Code directly to HTML tags. This is especially common in simple image albums. Essentially, an "onclick" event is appended to a tag, and its effect is equivalent to some JS Code. There is no need to discuss too much. We should not use this method. We should transfer the code to an external JS file, and then use "addEventListener/attachEvent" to add the event listener. Or use jquery and other frameworks, you only need to use the "click" method.

$('a#moreCornInfoLink').click(function() {    alert('Want to learn more about corn?');  }); 
7. Development and Verification

Many people do not really understand the significance and value of standard verification. I have analyzed this issue in detail in a blog. In a word, verification is for your service, not for your troubles.

If you are just starting to create Web pages, we strongly recommend that you download the Web Developer Toolbar (chrome users should search in the app store by themselves, and ie users may have a cup of cake ), "HTML standard verification" and "CSS standard verification" are used at any time during the encoding process ". If you think that CSS is a very studious language, it will save your life. Your less rigorous code will expose your pages and cause continuous problems. A good method is verification, verification, and verification.

8. Download firebug

Firebug is a well-deserved plug-in for web development. It not only debugs JavaScript, but also intuitively shows you the attributes and locations of page tags. Needless to say, download it!

9. Use firebug

According to my observation, most users only use the Firebug 20% function, which is a waste of time. You may wish to spend a few hours to systematically study this tool. I believe it will help you get twice the result with half the effort.


  • Overview of Firebug
  • Debug Javascript With Firebug-video tutorial
10. Keep the tag name in lowercase.

Theoretically, html is case-insensitive and can be written at will, for example:

<DIV>  <P>Here's an interesting fact about corn. </P>  </DIV>

But it is better not to write it like this. It is useless to input large letters, and it will make the code very ugly.


<div>    <p>Here's an interesting fact about corn. </p>  </div> 
11. Use H1-H6 labels

I suggest you use all six types of tags on the webpage. Although most people only use the first four tags, the most frequently used H has many advantages, such as device-friendly and search engine-friendly, replace all your P tags with H6.

12. When writing a blog, leave H1 to the title of the article.

Today, I initiated a discussion on Twitter: whether to define H1 on the LOGO or on the title of the article. 80% of the people selected the latter.

Of course, the specific use depends on your needs, but I suggest you set the title of the article to H1 when creating a blog, which is very good for search engine optimization (seo.

13. Download ySlow


Over the past few years, Yahoo's team has done a lot of great work in the front-end development field. Not long ago, they released a Firebug extension called ySlow. It will analyze your webpage and return a "transcript", which carefully analyzes all aspects of the webpage, although it is a little harsh, it will definitely be helpful for you to propose the areas for improvement. We strongly recommend-ySlow!


14. Use unordered list (UL) to package the navigation menu


Generally, a website has a navigation menu, which can be defined as follows:

<div id="nav">   <a href="#">Home </a>    <a href="#">About </a>    <a href="#">Contact </a>  </div>

If you want to write beautiful code, you 'd better not use this method.

Why use UL to layout navigation menus? -- Because UL was born to prepare the definition list

It is best to define this as follows:

<ul id="nav">    <li><a href="#">Home</a></li>    <li><a href="#">About</a></li>    <li><a href="#">Contact</a></li>  </ul>  
15. Learn how to deal with IE

IE has always been a nightmare for front-end developers!

If your CSS style sheet has been finalized, you can create a style sheet for IE separately, and this will only take effect for IE:

<!--[if lt IE 7]>     <link rel="stylesheet" type="text/css" media="screen" href="path/to/ie.css" />  <![endif]-->  

This Code indicates that, if the user's browser is IE6 or earlier, the code will take effect. If you want to include IE7, change "[if lt IE 7]" to "[if lte IE 7]".

16. Select the appropriate IDE


Whether you are a Windows or Mac user, there are many excellent editors for you to choose from:

Mac user

  • Coda
  • Espresso
  • TextMate
  • Aptana
  • DreamWeaver CS4
PC users
  • InType
  • E-Text Editor
  • Notepad ++
  • Aptana
  • Dreamweaver CS4
17. Before going online, compress the code


By compressing your CSS and Javascript files, you can reduce the total size by about 25%, but do not need to be compressed during development. However, once the website is complete, use some network compression programs to save more or less bandwidth. Some tools are listed below.

Javascript compression Service
  • Javascript Compressor
  • JS Compressor
CSS Compression Services
  • CSS Optimiser
  • CSS Compressor
  • Clean CSS
18. Streamlining and streamlining

Looking back at the first page most of us write, we will surely find a serious "divitis". Generally, the instinct of beginners is to wrap a paragraph with a DIV, add more DIV to control positioning. -- In fact, this is an inefficient and harmful method.

After the web page is written, you must check the page multiple times to minimize the number of elements. Do not deploy the list with UL layout by DIV.

Just as the key to writing an article is "reduction, reduction, and reduction", writing pages must follow this standard.

19. Add the "alt" attribute to all images

The advantage of adding the alt attribute to the image is self-evident-This allows users who disable the image or use special devices to have access to your Wang Ye information and is friendly to image search engines.

Bad practices


Better Practices

20. All night long

I often study and work in the early hours without knowing it. I think this is a good situation.

My "Ah ~ Ha !" Time ("AH-HA" moments refers to the time when it comes to the dark or open-minded scenes) usually occurs in the middle of the night. For example, I fully understand the concept of "closure" in JavaScript, that is, in such a situation. If you have never felt such a wonderful moment, try it now!

21. View Source Code


Nothing can help you learn HTML faster than imitating your idol. At first, we had to work as photocopiers, and then gradually developed our own style. Study your favorite website page code to see how they are implemented. This is the only way to go. You must give it a try. Note: they only learn and imitate their encoding styles, rather than copying and copying them!

Pay attention to the various cool JavaScript effects on the network. If a plug-in appears to be used, you can find the plug-in name based on the file name in the head tag in its source code, then you can learn how to use it for your own purposes.

22.Define styles for all elements

This article is especially necessary when you create other corporate websites. Do you use blockquote flag yourself? So the user may use it. Do you use OL on your own? The user may also. Take the time to make a page, show the ul, ol, p, h1-h6, blockquotes, and so on element style, check whether there are omissions.

23.Use third-party services

Many APIs that can be added to webpages for free are popular on the Internet. These tools are very powerful. It can help you implement many clever functions, and more importantly, it can help you publicize the website.

24. Master Photoshop


Photoshop is an important tool for front-end engineers. If you are familiar with HTML and CSS, learn more about Photshop.

25. Learn Every HTML Tag

Although some HTML tags are rarely used, you should still understand them. For example, "abbr" and "cite", you must learn them for emergency purposes.

By the way, if you are not familiar with the above two labels, you can refer to the following explanation:

  • AbbrSimilar to your estimation, it is the abbreviation of abbreviation (which is not possible for poor English). "Blvd" can be wrapped with the <abbr> label because it is the abbreviation of "boulevard. (You can also use xidapupben ).
  • CiteUsed as the title of the referenced content (blockquote ). For example, if you reference this article in your blog, you can use the <cite> package "Thirty best practices for HTML Beginners, note that it should not be used by the author of the package reference. This is a common misunderstanding.
26.Participate in community discussion

There are many excellent resources on the Internet, and many experts are also hidden in the community. You can learn by yourself and consult experienced developers.

27.use reset.css

Css Reset is also a Reset Css, which is to Reset some HTML Tag styles, or the default styles.

There is also a heated debate on whether CSS Reset should be used on the Internet. I suggest using it. You can first select some mature CSS Reset, and then gradually evolve into a suitable one.

html, body, div, span,   h1, h2, h3, h4, h5, h6, p, blockquote, pre,  a, abbr, acronym, address, big, cite, code,  img, ins, kbd, q, s, samp,  small, strike, strong,   dl, dt, dd, ol, ul, li,  fieldset, form, label, legend,  table, caption, tbody, tfoot, thead, tr, th, td {      margin: 0;      padding: 0;      border: 0;      outline: 0;      font-size: 100%;      vertical-align: baselinebaseline;      background: transparent;  }  body {      line-height: 1;  }  ol, ul {      list-style: none;  }  blockquote, q {      quotes: none;  }  blockquote:before, blockquote:after,  q:before, q:after {      content: '';      content: none;  }    table {      border-collapse: collapse;      border-spacing: 0;  }
28.Alignment Element

Simply put, you should align your webpage elements as much as possible. You can observe your favorite websites. Their logos, titles, charts, and paragraphs must be very neat. Otherwise, it will appear chaotic and unprofessional.

29.About PSD slices

Now that you have mastered HTML, CSS, and Photoshop knowledge, you also need to learn how to convert PSD to images and backgrounds on webpages. Below are two good Tutorials:

  • Slice and Dice that PSD
  • From PSD to HTML/CSS
30.Do not use the framework at will

Javascript and CSS have many excellent frameworks, but if you are a beginner, do not rush to use them. If you haven't mastered CSS, using the framework will confuse your knowledge system. Although you may say javascript and jQuery can be learned by colleagues, they are not suitable for css. I personally advocate the 960 CSS mesh framework, and I often use it. If you are a beginner of css, learning the framework will only make you more confused.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.