Read "Mastering CSS"

The first chapter:

1. The meaning of label semantics: it can make people, programs and other devices easier to identify and understand, so that the structure of the document becomes clear. You can easily adjust the elements to the desired style, avoiding unnecessary code bloat.

2. Since the available semantic elements are not comprehensive, most developers use existing elements to give meaning to them by adding IDs or class names. This adds an extra structure to the document and provides a useful "hook" for the style.

3. Naming: Keep the name independent of the form of presentation. Name it based on what it is, not how it looks. The great advantage of meaningful class names is that they can be reused throughout the site.

ID: Used to identify specific elements on a page, such as site navigation, and must be unique.

Class name: Can be applied to any number of elements on the page.

4. ID or class?

General principles: Classes should be used for conceptually similar elements that can appear in multiple locations on the same page. The ID should be used for different unique elements and should only be used if it is absolutely certain that the element will only occur once.

"Multi-class syndrome": Overuse of the class control style to add meaningless code to the document. This over-reliance on the class name is completely unnecessary. If you find that you have added many classes, this most likely means there is a problem with the structure of the HTML document.

5. "Multi-div": Excessive use of Div, which is an unreasonable and overly complex code structure signal.

In order to minimize unnecessary markup, you should use DIV elements only if no existing elements are able to achieve region segmentation.

6. A DTD (document type definition) is a set of machine-readable rules that define what is allowed in a particular version of XML or HTML and what is not allowed.

When parsing a Web page, the browser uses these rules to check the validity of the page and take appropriate action.

The browser knows which version of HTML to use by analyzing the DOCTYPE declaration of the page to see which DTD to use.

7. Validation: The Web Validator (bookmarklet) or the plug-in of the Firefox Developer extension Verify that the HTML is valid.

Read "Mastering CSS"