What is semantic HTML and why should it be semantically?

First, what is the semantic HTML?

Semantic HTML is the writing of HTML code, in line with the structure of content (content semantics), the choice of appropriate tags (code semantics), can be easy for developers to read and write more elegant code, while the browser crawler and machine to parse well.

Second, why do we have to be semantic?

1. In favor of SEO, is conducive to search engine crawler better understanding of our web page, so as to obtain more effective information, improve the weight of the page.

2. In the absence of CSS, you can clearly see the structure of the page, enhance readability.

3. To facilitate team development and maintenance, semantic HTML can make it easier for developers to see and improve the team's efficiency and coordination ability.

4. Support for multi-terminal device browser rendering.

Third, semantic HTML changes how to do it?

When doing front-end development, remember that HTML tells us what a piece of content is (or what it means), not what it looks like, and how it looks like it should be decided by CSS.

Writing semantic HTML structure is very simple, first of all, the semantics of the various tags in the HTML, when you see the content of what the label can be better to describe it, what is the label.

<p> paragraph mark, know <p> as a paragraph, you will no longer use <br/> To line up, and do not need to <br/> to distinguish between paragraphs and paragraphs. The text in <p> wraps, and the line wrap effect is better than <br/>. The gap between paragraphs and paragraphs can also be controlled by CSS, making it easy and clear to distinguish between paragraphs and paragraphs.

<ul>, <ol>, <li>,<ul> unordered list, this is widely used by everyone,<ol> ordered list is also very common. In the process of web standardization,<ul> also be more used for navigation bar, originally the navigation bar is a list, this is completely correct, and when your browser does not support CSS, navigation links are still good, but the beauty of a little bit worse.

<dl>, <dt>, <dd>,<dl> is the definition list. For example, the dictionary of words in the interpretation, definition can be used in this list.

<em>, <strong>,<em> is used to emphasize,<strong> is used as a key emphasis.

<table>, <td>, <th>, <caption>, (X) the table in HTML is no longer used for layout.

What is semantic HTML and why should it be semantically?