Web page's HTML structure refactoring: Meaning of semantic tags

Article Introduction: Semantic label of the actual combat significance.

I've collected some ideas, so let's hear them first,
Some people say:
"There is no need to think about semantics, as long as I write the code browser after running no problem on the line, anyway, the leadership does not care about these"
"Semantics is a generalization of the consortium, and I am very interested in the semantics of my code, but I always do not understand"
"This is not easy to say, semantic again good what to use, the key is to have a good project, the customer is the king!" ”
"Apart from professionals, who would go to see our code is not semantically"

Not only is the page refactoring the voice of people, but also listen to engineers, designers, and project managers, how they see the "semantic" thing

PHP Engineer: "It doesn't matter what semantics, as long as the logic is correct, does not affect my circular data"
Project management staff: "I value in the shortest possible time, to achieve my needs, as for the semantics is not our concern, as long as you do not delay project time, you can optimize all the way."
Designer: "What is semantic?" ”
Market sales Staff: "Customer satisfaction on the line, customer satisfaction we can profit"

These voices are often filled in our ears, although some one-sided, but it seems quite reasonable, can stand on their own position (a page refactoring personnel), based on these realities, how do we weigh the relationship between semantics and real work? What are we going to do about it?

To explain some of the terms, let's discuss how to deal with these problems in practical work.

First of all explain what is semantic?

Semantics refers to the use of reasonable HTML tags and their unique attributes to format the content of the document.

Semantic (X) HTML documents can help improve the usability of your site to visitors, such as using PDAs, text browsers, and people with disabilities to benefit from it. For search engines or crawler software, it helps them to index, and may give a higher weight value.

In fact, one of the most effective SEO method, is the Web page of the structure of the HTML refactoring, is essentially semantic. ”

The meaning of the existence of semantics

• Good communication with search engines helps reptiles crawl more effective information, such as H1~H6, strong headings for different weights, hidden text, and so on.
• Promote user experience such as title, Alt used to interpret nouns or to interpret picture information, such as the use of label labels;
• Code readable, easy to maintain, improve development efficiency, and quickly reach consensus,

For example


<div class= " wrapper ">
<div class= " main"> …</div>
<div class= " sidebar">…</div>
</div>

It's easy to read the code with good naming and clear structure.

• Industry organizations the extension of the semantic label and the technical support of the browser vendors has gradually increased, such as the Web standardization organization has just begun to promote the HTML5, which added a lot of semantic tags, such as header, aside, NAV, section, etc., in Chrome, Opera, Safari, Firefox and other browsers have been very good support.

Now let's put aside these theories and discuss a few of our common structures,

Well, this is the news list, how do you write the structure in normal work?

We all think about Li as a no-brainer.


<div class="module">
<ul>
<li><a href=”” title =”完整标题”>德国总理……道歉</a></li>
<li><a href=”” title =”完整标题”>德国总理……道歉</a></li>
……
</ul>
</div>

In the Web Standard, UL ol Li is given an ordered or unordered list of semantics, can be used in practice, the scope of use seems to have been expanded a lot, look at the following several figures, Li in the elements gradually increased.


<div class="module">
时政要闻<ul>
<li><span>03:50</span><a href=”” title =”完整标题”>最高法…巡查制度</a></li>
<li><span>03:50</span><a href=”” title =”完整标题”>最高法…巡查制度</a></li>
……
</ul>
</div>

Major Style
Span{float:right;}

In this example, there are more elements, and we still use Li to solve it.

Let's continue to look at the graphic code ...

(We only write the code in the Red Box menu bar)

<div class=”nav”>
<a href=”” title =””>业界动态</a>
<a href=”” title =””>业界动态</a>
<a href=”” title =””>业界动态</a>
<a href=”” title =””>……</a>
</div>

Major Style
A{float:left;}

This method is less code, the DOM node depth is small, the load will be faster under the large page, which is more suitable for modules that do not need to be extended, and we do not use the LI

Another way of writing:

<div class=”nav”>
<ul>
<li><a href=”” title=””>业界动态 </a></li>
<li><a href=”” title =””>业界动态 </a></li>
<li><a href=”” title =””>业界动态 </a></li>
<li>…</li>
</ul>
</div>

Major Style
Li{float:left;}

This method is slightly bloated in the amount of code, with the advantage of extensibility and increased readability of the code.

But is this a list? Is it wrong to use it, as if we have been using Li all the time? show no problem. Without the answer, let's go ahead and read the code.

See this picture, we first consider the program loop, and then in the mind of the idea of what tag to build the structure, I continue to use Li, in fact, I am very contradictory, from the semantic list of what is a category, if not Li, how to write it, we first write to see

Mode one:
<div class= "Hotuserlist" >
<ul>
<li><p class=" username "><a href=" "title =" "> Du Chun </a></p><p class= "attthis" ><a href= "alt=" "> focus on him </a></p></li>
<li><p class=" username "><a href=" "title =" > Weiming </a></p><p class= "Attthis" ><a href= "" alt= "" > focus on him </a></p></li>
<li><p class=" username "><a href=" "title =" "> Ying </a></p><p class= "attthis" ><a href= "alt=" "> focus on him </a></p></li>
<li>...</li>
</ul>
</div>

Major Style
Li{float:left;}

Mode two:
<div class= "Hotuserlist" >
<div class= "rowlist" ><p class= "username" ><a href= "" title = " "> Du Chun </a></p><p class=" attthis "><a href=" "alt=" > pay attention to him </a></p></div>
<div class= "rowlist" ><p class= "username" ><a href= "" title = "" gt; weiming </a></p><p class= "attthis" ><a href= "alt=" "> pay attention to him </a></p></div>
<div class= "rowlist" ><p class= "username" ><a href= "" title = "" gt; Ying </a></p><p class= "attthis" ><a href= "alt=" "> pay attention to him </a></p></div>
<div class= "Rowlist" >...</div>
</div>

Major Style
. rowlist {float:left;}

There is nothing wrong with this, but looking at the above use of Li's code, compared to the general feel that the div is not beautiful, the perfectionist always hope that their code is very exquisite very beautiful, this whole div, indeed no above that Li to beautiful.

Then look back at the picture above, as if it involves a logical cycle, regardless of size, we think of Li first, and then inside Li build its structure, our starting point, and what is the reason for doing so? Now think about a few reasons why we especially prefer Li.

• Clear HTML structure
• Good code readability
• Easy to scale
• Simplifying the number of logical loops
• Block elements and inline elements can be nested within Li and conform to the standard

What is the disadvantage of this ... I didn't find it!

Li is just a type of semantic lineup, not a partial one, but it can explain some problems,

As a page refactoring engineer, constantly refining their own code is good, but no matter how strong our technical strength, as an engineer, can not only tangle in the technical side, but also consider us to do a product of the original intention and objectives, to serve the user, so in weighing the code and user demands, Or to the overall situation, from the user point of view, to product demand as the core, consider the various positions, to achieve in the effective space and time range, to achieve maximum benefits. Profitability is fundamental! Then the sustainable development, and then the consideration of how to optimize, as before some of the points of view, when the technical talent in doing things, it is easy to end up, it is easy to go deep in a point of the problem, and not too will consider the overall situation, this is as an engineer should master a degree