The use of HTML tags should be aware of the semantics

Source: Internet
Author: User

Semantic Tags: What labels do you think best describes the content and makes it more meaningful to use this tag?

Now the browser is very perfect for CSS support (not including CSS3), is the structure and performance of the separation, structure and behavior of the separation, a Web page, the structure is the most important, the structure is equivalent to a house wall, the label is a block of bricks, the brick is orderly, put the rectification Qi, the wall is firm, So tagging semantics is important, and every tag in HTML has its own semantics:

DIV: A layer, the layer can be embedded in a lot of things, such as: text, pictures, most of the layout of the page is now a div cloth, but try to use less, one is for the sake of semantics, one is to maintain convenient later, do not open the page source code, all Div. Lixin County Archives Bureau

Paragraph: P, the text in the paragraph will be wrapped automatically, do not need to use <br/> To change the line, paragraph and paragraph between the spacing is also easy to set.

Title: H1,h2,h3,h4,h5,h6 optimization level is getting lower, the search engine has added weight role, there are many corporate website logo outside with H1 label.

List: Ul,ol,li ul is a list of unordered (text), many site navigation is used.

Definition list: DL,DT,DD, similar to the effect in a dictionary.

Delete: Del, delete, also has attributes to indicate the reason for deletion cite and deletion time DateTime.

Data: TABLE,TR,TD (although not used now, they are still for data).

Abbr and Acronym:abbr are shorthand forms, and acronym are abbreviated forms of each word.

Title and Alt:

    1. Alt is a word limit, titile no
    2. Title is to add additional explanatory information to an element, not a required
    3. ALT is the replacement text, if the picture does not exist or is not downloaded, or those devices that do not support the picture, the text will replace the picture displayed in the page

Previous layouts are table layouts, multi-layered nesting, maintenance hassles, adding and removing is very inconvenient, the structure is confusing, the search engine is very unfavorable, so now advocate the semantic structure:

    1. Show a clear structure when you remove styles and styles that don't exist.
    2. Screen readers will read the contents of the page according to the label of the page, and if the page does not have a good structure, the device will read one word at a time.
    3. PAD, mobile phone (relatively weak for CSS support) and other devices will be in a meaningful way to dye the page, the role of the device is to match their own conditions to render the page
    4. Search engine crawlers Analyze context and capture keywords based on tags, and include pages in search engines
    5. Team development efficiency, everyone according to standards, will reduce a lot of conflicts and differences, later maintenance is also very convenient

The use of HTML tags should be aware of the semantics

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.