Web Standards Learning: a reflection on the standards

Web|web Standard | Web page

I started learning Web standards from the beginning of last year, and I've had some experiences over the past two years. Recently job-hopping is just idle at home, write some out and communicate with you.

1 understanding of Web standards and the XHTML specification of the Consortium

By customary understanding, both concepts seem to refer to one thing (the "Advanced theory" ^_^ that we discuss in this edition). But I think, in fact, technically speaking, there is almost no correlation between these two things. The Web Standard in short is that the structure, performance and behavior of the page are independently implemented, more commonly speaking is now recruiting popular language "Div+css". However, none of the versions of the Web-standard XHTML is limited by any one version of it. Obviously, we can write a table-positioned page with XHTML 1.1. When I say this, I might think I'm talking a lot of crap. But any technology, only when you have a clear understanding of the basic concepts, you will use it correctly. Here are two ways to talk about the two misguided trends in Web Standard applications today:

The first situation is simple. I think that as long as the use of XHTML+CSS is the Web standard. The page is filled with class and ID. Arbitrarily define class for each detail. The difference between such a page and the traditional HTML is that the IMG tag has an extra "/". In fact, it's better to go back to the traditional HTML, at least I can use font easily, rather than always look up the style sheet like the dictionary. Another kind of more covert use of CSS I will speak in the future.

The second situation I find more difficult to understand, that is, trying to use a variety of complex div nesting and CSS statements to achieve the performance you want. A very simple example is just one of the posts I've just seen, " no Chettu page rounded corners ." First of all I want to be sure that the idea is really good, using CSS features to "draw" the rounded corners. To do this, the designer must add a large paragraph of the following code in the appropriate location:

<b class= "B1" ></b><b class= "B2" ></b><b class= "B3" ></b><b class= "B4" >< /b>
<b class= "B4" ></b><b class= "B3" ></b><b class= "B2" ></b><b class= "B1" >< /b>

However, this is a serious violation of the basic concept of web standards-the separation of structure and performance. Because it places the code that controls the performance of the Web page in the structure document. You might say that it actually puts the real code of representation in CSS. But I think it's a concept of substitution. Because these B tags have nothing to do with the structure of the Web page, they are all empty tags. That is, it's not there to put something in the location that the document structure needs. So they're just some scrap code for the document structure.

Another example could be more covert. Before I have seen on the alistapart.com how to implement the Page three-way bar article, the principle is probably using three or four div nested each other. I think this is also a violation of the web standards of the idea of practice. Because these div tags are placed in the code is not simply for the structure of the need, but for the performance of the Web page.

Of course, I admit that the above views in a certain degree is a dead point (but, in turn, do not want to achieve a picture is not a rounded corner, hehe). Sometimes the structure and performance is not so easy to separate, we have to achieve some rich performance have to let the structure to accommodate (think of <div style= "Clear:both"/> Use). But it is important to know what is right and what is wrong. Even though we sometimes have to do something wrong.

Finally, I would like to state that I am not "not a picture fillet" is meaningless or wrong. I also admire the author's cleverness and inspiration. I think this kind of technical research is like the previous use of CSS painting the national flag, the CSS technology proficiency is very helpful. However, its use should only be as limited as the CSS flag, should not be adopted in practical applications. Because it violates the basic principles of web standards.

2 Semantics of HTML tags

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 <p> instead of <br/>, 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 <br/>). 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 <br/> 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 <div class= "diary-title> is redundant, directly written

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 <span class= "Red" >.

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 <strong>, <sub> 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.