30 Best Practices for HTML beginners

1. Keep the label closed

Previously, you often see code like the following: How long ago was this? ）：

<li>some text here.  <li>some new text here.  <li>you get the idea.

Notice that the Ul/ol label for the outer package has been omitted (who knows intentionally or unintentionally), and has forgotten to close the Li tag. According to today's standards, this is obviously bad practice and should be avoided 100%. In short, keep the label closed. Otherwise, you may experience problems validating HTML tags.

A better way

<ul>    <li>some text here, </li>    <li>some new text here. </li>    <li>you Get the idea. </li>  

2. Declaring the correct document type

I have previously joined many CSS forums, whenever users encounter problems, we will advise him to do two things first:

1. Verify that the CSS file is not error-free.

2. Confirm that the correct DOCTYPE has been added

DOCTYPE appears before the HTML tag, which tells the browser whether the page contains html,xhtml or both, so the browser can parse it correctly.

There are typically four document types 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's always a different argument about what kind of document type declaration to use. The use of the strictest claims is generally considered the best choice, but research has shown that most browsers use a common way to parse such claims, so many people choose to use the HTML4.01 standard. The bottom line of the choice statement is that it is not really for you, so you have to consider the statement that suits your project.

3. Never use inline styles

When you're burying your code, you might be comfortable or lazy to add a little inline CSS code like this:

<p style= "color:red;" >i ' m going to make this text red so, it really stands out and makes people take notice! </p>  

This seems convenient and no problem. However, this is a mistake in your coding practice.

When you write code, it's best not to include the style code until the content structure is complete.

This way of coding is like guerrilla, is a very cottage practice. --chris Coyier

Better yet, after completing the label section, define the style of the p in the external stylesheet file.

Suggestions

#someElement > P {    color:red;  }

4. Put all external CSS files inside the head tag

In theory, you can introduce CSS stylesheets anywhere, but the HTML specification is recommended to be introduced in the head tag of the page, which can speed up the rendering of the page.

In the course of Yahoo's development, we found that introducing style sheets in the head tag speeds up page loading because it allows the page to be rendered progressively. --yslow Team

5.javascript files on the bottom
One principle to keep in mind is to make the page appear to the user as quickly as you want. When a script is loaded, the page pauses to load until the script is fully loaded and execution completes. Therefore, users will be wasted more time.
If your JS file is just to implement certain functions, (such as clicking on button events), then it is safe to introduce it at the bottom of the body, which is definitely the best method.
Suggestions
<p>and now 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 years now!
Many years ago, there was a way to add the JS code directly to the HTML tag. This is especially common in simple photo albums. Essentially, an "onclick" event is attached to the label, and its effect is equivalent to some JS code. No need to discuss too much, should not use this way, you should transfer the code to an external JS file, and then use "addeventlistener/attachevent" to join the event listener. or using frameworks like jquery, you just need to use the "click" Method.
$ (' A#morecorninfolink '). Click (function () {    alert (' Want to learn more about corn? ');  
7. Side development, side verification
Many people do not really understand the meaning and value of standard validation, the author in a blog detailed analysis of the problem. In a word, verification is for you, not for your trouble.
If you're just starting out on the web, it's highly recommended that you download the Web Developer Toolbar (Chrome users should search the App store themselves, ie users may have a cup) and use "HTML standard validation" and "CSS standard validation" at any time during the encoding process. If you think that CSS is a very studious language, then it will make you whole. Your non-rigorous code will make your pages riddled with problems, and a good way to do that is to verify, validate, and validate.
8. Download Firebug
Firebug is a well-deserved web development best plug-in, it can not only debug JavaScript, but also intuitively let you know the properties and location of the page tag. Don't say more, download!
9. Using Firebug
According to the author's observation, most of the users just use the Firebug 20% function, it is too wasteful, you might as well spend a few hours to learn this tool system, I believe it will make you more effective.
Resources

 
 

  
  
 
   
Overview of Firebug
 
   
Debug Javascript with Firebug–video tutorial
 
  
 
 
10. Keep the label name lowercase
In theory, HTML is not case-sensitive, you can write at will, for example:
<DIV>  <p>here's interesting fact about corn </P>  </DIV>
But it's best not to write like this, and it's not useful to bother typing large letters, and it makes the code hard to read.
Suggestions
<div>  <p>here's interesting fact about corn </p>  
11. Using the H1-h6 label
I suggest you use all six of them in the Web page, although most people will only use the first four, but the most use of H will have many benefits, such as device-friendly, search engine-friendly, may wish to replace your P tag H6.
12. When writing a blog, please leave H1 to the article title
Today, I launched a discussion on Twitter: whether to define H1 on the logo or on the title of the article, 80% of the people chose the latter.
Of course specific how to use to see your needs, but I suggest you in the establishment of the blog, the article title as H1, which is very good for SEO (SEO).
13.Download YSlow
In 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, which will analyze your Web page and return a "transcript", which carefully analyzes all aspects of this page, to suggest areas for improvement, although it is a bit harsh, but it will definitely help you, highly recommended--yslow!
14.Use the unordered list (UL) to wrap the navigation menu
Usually the site will have a navigation menu, you can define it in such a way:
<div id= "NAV" >   <a href= "#" >home </a>    <a href= "#" >about </a>    <a href= "#" >contact </a>  </div>
If you want to write beautiful code, it's best not to do it this way.

 
  

  
   
 
    
Why use the UL layout to navigate the menu? --because UL was born to define the list for
 
   
 
  
It is best to define this:
<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 long been a nightmare for front-end developers!
If your CSS style sheet is basically trained, you can create a separate stylesheet for IE, which will only work for IE:
<!--[if Lt IE 7]>     <link rel= "stylesheet" type= "text/css" media= "screen" href= "Path/to/ie.css"/>  <! [endif]-->  
This code means: If the user's browser is IE6 and below, then this code will take effect. If you want to include IE7, then change "[If LT ie 7]" to "[if LTE IE 7]".
16. Select the appropriate IDE
Whether you're a Windows or Mac user, there are a number of great editors to choose from:
MAC Users

 
  

  
   
 
    
Coda
 
    
Espresso
 
    
TextMate
 
    
Aptana
 
    
DreamWeaver CS4
 
   
 
  
PC Users
 
  

  
   
 
    
Intype
 
    
E-text Editor
 
    
notepad++
 
    
Aptana
 
    
Dreamweaver CS4
 
   
 
  
17. Before you go 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 compress during development, however, once the site is complete, some network compression programs are more or less bandwidth-saving. Some tools are listed below.
Javascript Compression Service
 
  

  
   
 
    
Javascript Compressor
 
    
JS Compressor
 
   
 
  
CSS Compression Services
 
  

  
   
 
    
CSS Optimiser
 
    
CSS Compressor
 
    
Clean CSS
 
   
 
  
18. Streamlined, streamlined, streamlined
Looking back on the first page that most of us wrote, we would definitely find a serious "div" (divitis), usually a beginner's instinct is to wrap a paragraph in a Div, and then set up more div to control the positioning. In fact, this is an inefficient and harmful practice.

 
  

  
   
 
    
After the page has been written, be sure to check back many times, as much as possible to reduce the number of elements. You can use the list of UL layout do not use a div to layout.
 
   
 
  
Just as the key to writing the article is "shrinking, shrinking, shrinking", writing a page should follow this standard as well.
19. Add "alt" attribute to all pictures
The benefit of adding an ALT attribute to a picture is self-evident-this allows users who disable images or use special devices to have access to your Rajah's information and be friendly to image search engines.
Bad practice.
  
A better approach
  
20. All-nighter
I often learn to work unconsciously until early in the morning, I think this is a very good situation.
my "Ah ~ ha!" "Time (" ah-ha "moments, referring to steady or enlightened moments) usually occurs late at night, such as I thoroughly understand the" closure "concept of JavaScript, in such a case. If you haven't felt this wonderful moment yet, try it right away!
21. View Source Code
There's nothing better than imitating your idol to get you to learn HTML faster. At first, we all have to do the copier, and then slowly develop their own style. Study your favorite Web page code to see how they are implemented. This is the only way to master, you must try. Note: Just learn and imitate their coding style instead of copying and copying!
Watch out for all the cool JavaScript effects on the web, and if it looks like you're using a plugin, you can find the name of the plugin based on the file name in the head tag in its source code, and then you can learn it for yourself.
 define a style for all elements 
This is especially necessary when you are making other corporate websites. You don't use the blockquote tag yourself? The user may use, you do not use OL? The user may also be. Take time to do a page that shows UL, OL, P, H1-h6, blockquotes, and so on elements of the style, check whether there are omissions.
The  use of third-party services 
There are many APIs available on the Internet that are free to add to the Web, and these tools are very powerful. It can help you achieve a number of clever features, more importantly, can help you promote the site.
24. Mastering Photoshop
Photoshop is an important tool for front-end engineers, so if you've mastered HTML and CSS, learn more about Photshop.

 
  

  
   
 
    
Watch a video lesson on psdtuts+.
 
    
Spend monthly 25$ registered as a member of Lynda.com, a huge collection of fine courses.
 
    
Recommended "Suck at Photoshop" series
 
    
Spend a few hours remembering as many PS shortcuts as possible.
 
   
 
  
25. Learn every HTML tag
While some HTML tags are rarely used, you should still know them. such as "abbr", "cite" and so on, you must learn them for a rainy future.
By the way, if you are not familiar with the above two tags, you can look at the following explanations:

 
  

  
   
 
    
abbr is the same as you estimate, it is abbreviation abbreviation (the English Poor estimate), "BLVD" can be wrapped with <abbr> label, because he is the "boulevard" abbreviation. (Hi-da Pupen also can).
 
    
cite is used as the caption (BLOCKQUOTE) for the reference content. For example, if you cite this article in your blog, you can use the <cite> package for "30 best Practices for HTML beginners", noting that it should not be used to wrap the quoted author, which is a common misconception.
 
   
 
  
 Participation in community discussions 
There are many excellent resources on the network, and there are a lot of experts hidden in the community, where you can teach yourself, and you can consult experienced developers.
27. Using Reset.css
CSS reset is also reset CSS, that is, resetting some HTML tag style, or the default style.
On whether CSS Reset should be used, there is also a heated debate on the internet, the author is recommended to use. You can choose some mature CSS Reset, and then slowly evolve to suit your own.
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;  }
   
 align elements 
Simply put, you should align your page elements as much as possible. You can look at the website you like, their logo, title, chart, paragraph must be very neat. Otherwise it will appear chaotic and unprofessional.
 about PSD slices 
Now that you have the knowledge of HTML, CSS, and Photoshop, you'll also need to learn how to convert the PSD to images and backgrounds on the web, with two good tutorials below:

 
  

  
   
 
    
Slice and Dice that PSD
 
    
From PSD to Html/css
 
   
 
  
 don't feel free to use frames 
JavaScript and CSS have a lot of good frameworks, but if you're a beginner, don't rush to use them. If you haven't mastered CSS yet, using a framework can confuse your knowledge system. Although you might be able to say that JavaScript and jquery can be learned by colleagues, this is not a good fit for CSS. I personally advocate 960 CSS grid framework, and I often use it. Or that sentence, if you are a beginner of CSS, the learning framework will only make you more confused.
30 Best Practices for HTML beginners