Semantic HTML tags
Web standards are now popular called "div + css" or "floor layout." I have no objection to the name for this discretionary. But this will be a misunderstanding: that a lot of use div tag as a structural element. In fact this is a more advanced div abuse (Jeffrey Zeldman "Reconstruction Site" mentioned in the book).
HTML provides us with a wealth of labels, each label has its own meaning. I think in the design, in addition to following syntax than HTML, you should take advantage of and comply with the "semantic" each label. The title text in the h1-h6 should contain in a large segment of text should not be fragmented by the <br /> <p>, ul or list items should be placed or dl ol in the form of a table data should remain with table layout.
Why do this? A very convincing reason is to ensure that the user remove the case of CSS display pages can be displayed as effectively as possible in the hierarchy of the content. If all with div, when after removing CSS, the entire page will lose the level, leaving only some of the clutter of text fragments. This does not meet the requirements for low-profile Web standards compatibility.
I detail below are listed some of my understanding of the semantic tag:
p br
Let me talk about the most simple. P segment to use labels instead br (even two consecutive <br />). Needless to say this seems to be. But sometimes we have to abandon this principle. A common example is a forum posting, if I want to segment it hit Enter. And thus transmitted to and displayed in the background, obviously with <br /> segment.
table th
As the result of touting div + css, it seems now who use table layout uncivilized who is indigenous. But I think this view is not correct. table is the meaning of the table, and therefore all the data should appear in tabular form, should still use table layout. The simplest example is classmates roster, including the name of science, etc. No sex, this is obviously a tabular data, and therefore should use table layout. Another example is the comparative worth exploring, blog inside the calendar navigation. I had seen a blog program, its calendar navigation in various dates, from No. 1 to 30 all with a good set of div, re-use float: left style seven in a row of discharge current month's calendar. When I canceled the browser's CSS display, that part of the calendar from No. 1 to No. 30 a vertical down. I think this is wrong. Because the calendar should be in the form of a table of data, and therefore should still use table layout. After the cancellation css, you should still be in accordance with a row of seven like a return to form.
th is another overlooked label. Since universal CSS, all forms of units can be added to get a class attribute with td. But semantically, some of the table cells should be used th tags. For example, when it comes to the calendar above table, "MON TUE WED ... SUN" these identities week inside the unit, you should use th instead of td.
h1-h6
For h1-h6 tags, semantically, they should apply to all title text. Consequently, some, such as <div class = "diary-title> wording is superfluous, direct write <h1>, and then directly to the h1 instead .diary-title defined CSS, it is not the same effect? Of course, this rule I It can not be set too rigid, because sometimes the header portion of the structural elements and can not simply use a h1 can be solved, but I use most similar <h1> <span> </ span> </ h1> methods title the more complex nested structure to meet the needs of performance.
But here's a semantic differences will appear. The h1 what it understood as a title or caption font size construed as No. 1. I usually understood as a title, the title again next level there are subheadings with h2. But in fact recalled HTML design at the beginning, h1 h6-back numbers more is understood to control the size of the header text. Perhaps just for use with h3 III font size, rather than its title is three. Otherwise, a full title with h1, all of them are pearls of the word, they have to control the font size with CSS, feel very cumbersome. So, this is a problem to be questionable.
ul ol
Those who need a list of provisions, should be used ul or ol, rather than p. Such as job advertisements in the job requirements, such as precautions such as procedure instructions. Further use is a popular web navigation menu ul li also used to list, and then use CSS to control the arrangement.
Should add that, do not forget li which can also reuse ul or ol, forming a second-level list. Create a front-end learning qun438905713, most in the group are zero-based learners, we help each other, answer each other, and also to prepare a lot of learning materials, welcomed the zero-based junior partner to the exchange.
dl dt dd
This is a group of people almost forgotten tag, but Jeffrey Zeldman at "Reconstruction Site" in great esteem their use. dl should be the "defining list (or definition list? know a friend please tell me)," the full name, is a typical usage of dictionary entries. The name on the inside word dt, dd on the interpretation of the word inside. The alistapart.com site more clever, the entire right-hand column is defined as dl, the title of each unit with dt, and the contents of the unit is used dd.
img
img tag itself is nothing to say. Just want a cliché, that is, only when really necessary in this element is the content of the picture when it use img, or should be defined as using CSS styles. Such as illustrations, avatars, emoticons, these are the content must appear in the picture, with img. While others such as the title background, in front of a list of items small icon, these should not use the img tag.
span
Today, a great span and div par limelight. But in fact I think we should follow its original use. I understand, span was originally used with a class or style attribute. It itself does not have a clear semantics. Therefore, in the text flow, we need to make some changes in the style of text, use span quotes. For example, some words need to add red, I use <span class = "red">.
But it is worth noting that this problem before there may have committed inside h1 mentioned. Because some of the text styles in fact have an existing tag, such as <strong>, <sub> and so on, we should also give them appropriate opportunities.
a
a control tag is hyperlinked. However, some special circumstances, we do not like to use it. Such as the need pops up a small window. I did not care how, but I think some designers will onclick directly to the definition of "play" <img> tag in a small icon. I personally believe it should be a plus in a img outside, and then to a defined onclick inside, and remember to write the final js function return false. If you can, href attribute that a label should also be written on the pop-up window URL, to ensure that users are still able to effectively open the page in the case of JS prohibited. Create a front-end learning qun438905713, most in the group are zero-based learners, we help each other, answer each other, and also to prepare a lot of learning materials, welcomed the zero-based junior partner to the exchange.
I do so much to list.
Finally, to sum up the importance of semantic HTML tags follow. Web standards One of the requirements is a low-profile compatibility: When users disable images, CSS is disabled or disabled JS, we are still able to make him effective browsing web content. Forced well known alt attribute is to disable compatibility when images for consideration. The right to follow the semantics of HTML tags, is disabled to ensure compatibility when CSS. Only when the proper use of HTML tags, web page in our "CSS streaking" when people will still see where is the navigation menu, where is the title of the article, calendars form will not fall apart.
