Beginner Div+css should understand the semantics of HTML tags

css| Beginners

Web standards are now popularly called "div+css" or "layer layouts." I have no objection to this Bingyi. But it's a myth: a lot of the use of div tags as a structural element. In fact, this is a more advanced div abuse (Jeffrey Zeldman mentioned in the book "Web Refactoring").

HTML provides us with a fairly rich tag, each of which has its own meaning. I think at design time, in addition to following HTML syntax, you should take full advantage of and adhere to the "semantics" of each label. If the title text should be included in the H1-h6, the text content of the large paragraph should be segmented by

instead of
, the list item should be placed in the UL or ol or DL, the data in tabular form should still use table layout.

Why did you do that? A compelling reason is to ensure that when users remove the CSS display, the page can be as effective as possible to display the structure of the content. If all use Div, when the CSS is removed, the entire page will lose the level, leaving only a few messy pieces of text. This does not conform to the requirements of the Web standard for low configuration compatibility.

I'll give you a detailed list of the semantics of some of the tags I've read:

P BR
Let's say the simplest one. Segments are labeled with P instead of BR (even two consecutive
). This does not seem to say much. But sometimes we have to give up this principle. A common example is the forum post, if I want to segment, then hit return. And so the transmission to the background and display, is obviously used
segmentation.

Table th
As a result of vigorously advocating div+css, it seems that now who is using table layout who is uncivilized indigenous. But I don't think that's the right idea. Table means tables, so data that should appear in tabular form should still be in table layout. A simple example is the roster of class mates, including the sex of the name, and so on, which is obviously a tabular form of data, so you should use table layout. Another example worth exploring is the calendar navigation within a blog. I have seen a blog program, its calendar navigation in the various dates, from 1th to 30th full use of Div set, and then use the Float:left style of 7 rows of the month to discharge the calendar. When I cancel the browser's CSS display, the part of the calendar comes down from number 1th to 30th. I don't think that's right. Because the calendar should be a tabular form of data, you should still use table layout. After you remove the CSS, you should still be grouped into a table with a row of 7.

Th is another label that will be overlooked. Because of the versatile CSS, all the table cells can be used TD plus a class attribute to fix. But semantically, some table cells should be tagged with th. For example, the calendar form mentioned above, inside the "MON TUE WED ... SUN "These week-marking units should use th instead of TD.

H1-h6
For h1-h6 tags, semantically, they should apply to all title text. Therefore, some such as

method to embed the title structure more complex to meet the needs of performance.

But there is a semantic divergence. H1 whether it should be understood as a first-level title or a title of font size 1th. I usually understand it as a first-level title, with a H2 heading under the heading. But in fact looking back at the beginning of HTML design, the numbers behind the H1-h6 are more understood to control the size of the caption text. Using H3 may be just to use a size third font, not a level three title. Otherwise, the title of a full use of H1, each is a big word, and have to use CSS to control the font size, feel very cumbersome. So, this is a question for discussion.

ul ol
Any need to list the terms, should be used in UL or OL, rather than with P. such as the job requirements in the job ads, such as attention, such as the operation of the steps described. In addition, a popular usage is that the navigation menu of the Web page is also listed with the UL Li, and then use the CSS to control its arrangement.

Should add is, don't forget Li inside can also use UL or OL, form a second level list.

DL DT DD
This is a group of tags that are almost forgotten, but Jeffrey Zeldman strongly advocates their use in website refactoring. DL should be "defining list" (or definition list). Have a friend to know please tell me) "The full name, a typical use is the dictionary entry. The name of the word is placed in DT, and the word is interpreted in DD. The alistapart.com site is more sophisticated, the right column is defined as a DL, the title of each unit with DT, and the contents of the unit with DD.

Img
The IMG tag itself has nothing to say. I just want to make it a cliché to use IMG only when it is true that the element is the necessary picture in the content, otherwise it should be defined as a style with CSS. such as illustrations, Avatar, facial icons, these are the content must appear in the picture, with IMG. Others, such as the background of the title, and the small icon in front of the list, should not use an IMG tag.

Span
Span now has a lot to do with Div's thunder and neck. But in fact I think we should still follow its original use. I personally understand that span was originally used to bring class or style attributes. It has no explicit semantics in itself. So in the text stream, we need to change the style of some of the text, and surround it with span. For example some words need to add red, I use .

It is worth noting, however, that it is possible to commit the problems mentioned earlier in the H1. Because some of the style of writing is actually a ready-made label, such as , _{and so on, we should give them the appropriate opportunity.}

A
A is the label that controls the hyperlink. But there are special situations where we don't necessarily like to use it. For example, need to pop a small window. I'm not paying attention, but I think some designers will define onclick directly to the tag of the "Play" small icon. I personally think it is better to add a A to the IMG, then define the onclick into a and remember to return false at the end of the JS function. If you can, the a tag's href attribute should also be written on the pop-up window URL, to ensure that users in the case of JS can still effectively open the page.

I've listed so much for the time being.

Finally, the importance of following HTML tag semantics is summarized. One of the requirements of web standards is low configuration compatibility: When users disable pictures, disable CSS, or disable JS, we can still enable him to navigate the content of the Web page effectively. It is well known that forced Alt attributes are considered for compatibility when you disable pictures. The proper adherence to the semantics of HTML tags is to ensure compatibility when CSS is disabled. Only when the proper use of HTML tags, our web page in the "CSS naked" time, will still let people see where is the navigation menu, where is the title of the article, calendar forms will not fall apart.