Semantic and HTML5 of CSS naming are born of semantics and experience

Article Introduction: html5– are born of semantics and experience.

Some yy before the opening

Once upon a time, a person out of the design, out of the design text to open the DW with a page, and then dragged a little after the page to write their own backstage, wulin person: Art. More bitter is that when every change in demand, to modify a large pile of numbness

, so "Div+css" was moved to the stage of the internet era, a night n many of the "div+css" Sunflower book turned out, at that time, we live in the div+css era, when we used the

After that, the waist is not sour, leg pain, overtime is also fun.

YY end, cut to the chase

Ghost has been explaining the meaning of semantic in the text of page refactoring 2 years ago, and what is the benefit of the semantic HTML structure of the dock? 》

Refactoring after 7 years, perhaps today, we can skillfully write a page, but for writing a page is not easy? Let's comb the idea, revisit the basics, and combine the current trends, and then talk about the semantics of the topic, God Horse is semantic? Why should it be semantically?

The semantics of refactoring can be divided into 2 pieces: (x) the semantic of HTML tags and the semantics of CSS naming.

(x) Semantics of HTML tags

No nonsense on the case:

(Figure 1)

Figure 1 The implementation of the non-semantic way: no_emantic_html Semantic implementation: emantic_html

you to

Do you have a special feeling? After getting a design draft, inadvertently countless have been in your fingers in the hands of the whereabouts of the screen? If it's no_emantic_html, congratulations on your fetish.

"Format the contents of the document with reasonable HTML tags and its unique attributes"--this is the explanation of the semantic label that shook

The place is not, because it is the semantics of the label, the original word is division, for the partition, the meaning of the block, generally only used in the architecture of HTML, in (x) the previous version of HTML.

But how do you write a semantic label? Starting from the foundation, every day with us to deal with the most is the Div h1-h6 Ul-li p and so on the label, I do not know if you have any of these labels do in-depth understanding, to see the following table

label	Original Word	Description	semantic (y/n)
H1-h6	Head	Define HTML Headers	Y
P	Paragraph	Define Paragraph	Y
Ul	Unordered list	Define unordered lists	Y
Ol	Ordered list	Define an ordered list	Y
Li	List item	Define items for a list	Y
Dl	Definition List	Define a definition list	Y
Dt	Definition term	Define items in the definition list	Y
Dd	Definition description	Define the description of the item in the definition list	Y
Table	Table	Definition table	Y
Thead	Table Head	Define header contents in a table	Y
Tbody	Table Body	Define the body content in a table	Y
Th	Table Head Cell	Define header cells in a table	Y
Tr	Table row	Define rows in a table	Y
Td	Table Data Cell	To define a cell in a table	Y
A	Anchor	Define Anchor	Y
Img	Image	Defining images	Y
Div	Division	Define sections in a document	N
Span	Span	Define sections in a document	N

The above is just a list of some of our commonly used tags, more tags please refer to the entire website, the basic HTML tags are a word or phrase abbreviations, so in fact, the intention is more convenient to our understanding of the semantic. In fact all of the (x) HTML tags, except

and 2 of the semantics of the label, other tags have its meaning, only know what tags, and the original meaning of each label to do an understanding to know to use it. You don't know when to useDefine a list label? And if you don't know there's A label?

If you see the basic div in a page, then your use of the semantic label is not very clear: clearly a title, you can use the tag to achieve, but to use the semantic

tag to implement, or a paragraph, with

is the label more semantic?

Everyone knows the CSS naked Ben Festival every year? If the selected label is almost entirely without semantics, then you can hardly see any structure information in the page after you go to the style, the readability is very poor; If you choose a semantic-appropriate label, the page will still be very readable; each browser has its own default style, and the default style gives each label a different display , the correct use of the label can reflect the usability of the site, which is one of the easiest ways to check the usability of a website.

This recommended that everyone go to see the use of the website of the Web site, with the website developer to ban its CSS to see how?

The semantics of CSS naming

The semantic naming of CSS refers to the class or ID appended to the HTML tag with an Easy-to-understand name. The semantic naming here involves the team's naming conventions, and it's only the kingly way to make better semantic naming on the basis of the team's specifications.

In my understanding, a semantic CSS naming should at least comply with the following conventions:

Try to avoid pinyin naming, use English words to name

the words are connected in three ways: underscore _, spacer-, and hump named . Depending on your team's specifications, you do not recommend using more than 2 connection methods to name the

do not follow words with meaningless numbers , such as logo1234 (except for team engagements).

You can use abbreviations for connection naming of too long words, but make sure that members are able to read

Some of the agreed words can quickly help you name:

Head: header
Content / container
Tail: footer
Navigation: nav
Sidebar: sidebar
Column
Login: loginbar
Logo: Logo
Advertisement: Banner
Rotation: Promo
Page body: Main
Hot spot: Hot
News: News
Download: Download
Subnav: subnav
Menus: menu
Submenu: submenu
Search: Search
Friendship link
Copyright

This is too much, here is not one of them, meet the words will not be able to repair the English ha!