Article introduction of Wulin.com (www.vevb.com): I remember a horrible experience. The page was nested with a dozen or dozens of divs. It made me feel dizzy when I read it... Some of them can use span tags, p tags, and divs. Those who can use h1 and hx also use div tags. It's really speechless... At this time, I hope that the developer has some concepts and actions of "semantic tags".
I see some recruitment requirements are familiar with the word Web semantics and understanding/familiar with web standards. Tag semantics is part of the web standards, so I modified a post I used to post in the blog park and then posted it... I hope that front-end beginners can know that there is such a thing.
I remember a terrifying experience. The page was nested with a dozen or dozens of divs. It made me feel dizzy when I watched it... Some of them can use span tags, p tags, and divs. Those who can use h1 and hx also use div tags. It's really speechless... At this time, I hope the developer has some concepts and actions of semantic tags...
1: (Theory) What is a semantic label?
Semantic tags are to try to use Html tags with corresponding structures as much as possible. Take Table as an example:
<table>
<tr>
<td>Consumer items</td>
<td>Consumption Amount</td>
</tr>
<tr>
<td>Eat</td>
<td>20 yuan</td>
</tr>
</table>
Have you seen what's wrong with the Table above? Hehe, then look at this semantic label
<table>
<caption>Spend bookkeeping</caption>
<head>
<tr>
<th>Consumer items</th>
<th>Consumption amount</th>
</tr>
</head>
<tbody>
<td>Eat</td>
<td>20 yuan</td>
</tbody>
</table>
The tags of these two pieces of code are different. The tag codes in the second table are undoubtedly more in line with the Web standards.
<caption>:Title of the table;
<head>: The header of a table;
<th>: Column header of a certain column of the table.
Let's talk about what we're used to
<title>Introduction to Blog Park</title><body>Blog Park is a software development technology park. It was founded in 2004, here...</body>
Look, why do we know where the title is when we read an article? At the top of the browser. Then why can search engines crawl? It is that it knows that the title of the semantic tag <title> is the article. If we do not abide by this, instead:
<span>Introduction to Blog Park</span><span>Blog Park is a software development technology park. It was founded in 2004, here...<span>
So how do search engines know who is the title and who is the content? How does it rely on to grab the title? In fact, semantics can not only be label semantics, but also extend them into structural semantics. For example:
#left{float:left;margging-left:50px;}
#right{float:right;margin-top:100px;}
<div id=left>content..</div>
<div id=right>content..</div>
In this example, the naming of id is a bit exaggerated, but similar situations make some. When we want to put the #left div on the right side of the page and change the position with #right, can you change the style to this?
#left{float:right;margin-left:50px;}
#right{float:left;margin-top:100px;}
It would be so awkward to look like that, and it would be misleading the layout of these two divs.
It should be written like this.
<div id=main>content..</div>
<div id=sidebar>content..</div>
This way, it is clear at a glance what contents are in these divs and it is convenient to modify the styles.
2: (Theory) How about semantic labels?
1. Better structure, more conducive to search engine crawling (SEO optimization) and developer maintenance (higher maintenance because of clear structure and easy to read).
2. It is more conducive to reading of special terminals (mobile phones, personal assistants, etc.).
3: (Action) What to do with semantic labels?
Try to use structural meanings, and less semantics, such as <span>, <div> meaningless, and you can't tell what it is, but you can't see what it is at a glance. You can tell that the em tag is the content that is emphasized and distinguished from different contents.
So, how to determine whether your page complies with one of the web standards: semantic tags? You can temporarily remove the style of your page and see how readability is. If you feel that your page is very messy at this time, it means that the semantic label of the page is not very good. If your page is still not messy after removing the style, it means that your page structure is clear and the semantic label is better.
This is just my opinion. I hope that the people who have read it will also express their ideas so that everyone can know your ideas and improve this article.