Pay attention to semantics when using HTML tags

Source: Internet
Author: User

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.

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: 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.