Pay attention to semantics when using HTML tags

Semantic Tag: You can use the tag if you think it is more meaningful to describe the content.

Currently, browsers have excellent support for CSS (excluding CSS3). They focus on separation of structure and performance, separation of structure and behavior, and a WEB page with the most important structure, the structure is equivalent to the wall of a house. labels are blocks of bricks. The bricks are arranged in order and correct, and the walls are solid. Therefore, tag semantics is very important, each HTML tag has its own semantics:

DIV: A layer where many things can be embedded, such as text and images. Currently, most of the page layout frameworks use DIV layout, but use them as few as possible. One is for semantics, one is for future maintenance convenience. Don't open the page source code, all of which are DIV.

Paragraph: P. The text in the paragraph will automatically wrap. You do not need to use <br/> to wrap the text. The spacing between the paragraph and the paragraph is also easy to set.

Title: h1, h2, h3, h4, h5, h6 optimization levels are getting lower and lower, adding weight to the search engine, there are many corporate websites with the h1 label outside the LOGO.

List: ul, ol, and li ul are unordered (text) lists, and many website navigation uses lists.

Definition list: dl, dt, dd, similar to the effect in the dictionary.

Delete: del, delete, and attribute to indicate the reason for the deletion, cite, and datetime.

Data: table, tr, and td (although not commonly used, they are still generated for data ).

Abbr and acronym: abbr are short form, and acronym is short form of each word.

Title and alt:

1. Alt has a limit on the number of words, and titile does not
2. The title is used to add additional description information to the element, not required.
3. Alt is the replacement text. If the image does not exist or has not been downloaded, or devices that do not support the image, the text will replace the image displayed on the page.

Previously, all la s were table la s, with multi-layer nesting and difficult maintenance. Adding and deleting are inconvenient and the structure is chaotic, which is very unfavorable to search engines. Therefore, the semantic structure is promoted:

1. A clear structure can be displayed when the style and style do not exist.
2. The screen reader reads the content of the page according to the tag of the page. If the page does not have a good structure, the device reads the content in one word.
3. PAD, mobile phone (relatively weak support for CSS), and other devices will dye the page in a meaningful way. The role of the watching device is to render the page according to its own conditions.
4. Search engine crawlers analyze context and capture keywords Based on tags, and include pages in search engines.
5. The development efficiency of the team is aligned with the standards, which reduces many conflicts and differences and facilitates the later maintenance.