Make your HTML Tag semantic

 

As a front-end developer, if you have never heard of CSS, you must be an "out-man ". With the deep understanding of CSS and the gradual separation of structure and performance and behavior, HTML semantics has become a hot selling point.

 

The Semantic HTML should emphasize the HTML structure first.

 

A webpage is like a house. The HTML structure is a reinforced concrete wall. A house without reinforced concrete walls is a pile of waste bricks, which cannot be called a house. CSS is decorative material, paint, and used to decorate the house. If CSS does not have an HTML structure, nothing will happen and there is no actual use value. CSS relies entirely on the (x) HTML document that references it. If you want to maximize CSS capabilities, it is necessary to provide a clean and structured HTML.

ActuallyTags in HTML have their own meanings, but they are often ignored-just as tables have always played the role of web page layout. Fortunately, with the reproduction of CSS, the table finally returned to his essential work-List data. It will tell us: "This line is a title; these lines form a paragraph; these words are the project list ......" When developing a front-end development, remember: HTML tells us what a piece of content is (or its meaning), rather than what it looks like.

Writing a semantic HTML structure is actually very simple. First, you can understand the semantics of each tag in HTML. When you see the content, you can think about what tags can better describe it and what tags are used.

 

<HX>

<H1>, <H2>,

 

P

When you know P as a paragraph, you will not use <br/> to wrap the paragraph, and you do not need to <br/> distinguish between the paragraph and paragraph. The text in P will automatically wrap, and the effect of line feed is better than <br/>. CSS can also be used to control the gaps between paragraphs. It is easy and clear to distinguish between paragraphs and paragraphs.

 

<Ul>, <Ol>, <li>

<Ul> unordered list, which is widely used. <ol> ordered list is also quite common. In the Web standardization process, <ul> is also used for navigation bars. Originally, navigation bars are a list. This is completely correct, in addition, when your browser does not support CSS, the navigation link is still very good, but it is a little worse in appearance.

 

<DL>, <DT>, <DD>

DL is the "definition list ". For example, this list can be used to explain and define words in a dictionary.

 

<Em>, <Strong>

<Em> is used for emphasis, and <strong> is used for emphasis.

 

<Table>, <TD>, <TH>, <caption>, and summary

Tables in XHTML are no longer used for layout. To mark the data in the list, you should use the table. <TH> is the table title, and the attribute summar is the abstract (to improve the search ranking, this should never be less). <caption> the label is the first description, the <thead> label is the table header, the <tbody> label is the table body content, and the <tfoot> label is the end of the table.

 

<Ins>, <del>

If you know Del, do not use <S> to delete the line. Del is obviously more semantic. In addition, del also has cite and datetime to indicate the reason for deletion and the deletion time. INS indicates insertion.

 

<Abbr>, <Acronym>

<Abbr> A tag is short for a web page, and <acronym> is the abbreviation.

 

ALTAttribute and title attribute

The title attribute is used to provide additional information for the element, but is not required.

If the alt attribute is a user agent (UA) that cannot display images, forms, or applets, replace the text. The language used to replace text is specified by the lang attribute.

 

Countless reasons for making your HTML structure semantic:

 

1.When the style is removed or lost, the page is displayed with a clear structure:
HTML itself has no performance. We can see that

 

2.Screen Reader (if a visitor has a visual fault) will "read" Your webpage based on your tag.

If you use a semantic tag, the screen reader judges the content of the webpage based on your tag, instead of spelling a letter or a letter.

 

3. PDADevices such as mobile phones may not be able to render webpages like browsers on normal computers (because these devices have weak support for CSS ).

Using semantic tags ensures that these devices render Web pages in a meaningful way. Ideally, the task of watching a device is to render the webpage according to the conditions of the device.

 

4.Search engine crawlers also rely on tags to determine the weights of context and keywords.

Search engine crawlers are also the "visitors" of websites. They are extremely valuable users. Without them, the search engine will not be able to index your website, and then the average user will be very sad to visit.

 

5.Easy for team development and maintenance

Everyone in the team follows the same standard, which can reduce many differences, facilitate development and maintenance, improve development efficiency, and even implement modular development.

Source:Renren fed team