I started learning web standards at the beginning of last year, and I have gained some experience over the past two years. I recently changed jobs and am just free at home, so I wrote something to share with everyone.
1. Understanding of web standards and W3C XHTML specifications
According to customary understanding, these two concepts seem to refer to the same thing (these "advanced theories" we discuss in this edition^_^). But I think, in fact, from a technical point of view, these two things have almost no correlation at all. In short, web standards are to independently implement the structure, performance and behavior of the page. More commonly speaking, it is the popular language "div+css" in today's recruitment. However, no version of W3C XHTML places restrictions on the concept of web standards. Obviously, we can use xhtml 1.1 to write a table-positioned web page. At this point, you may think that I am talking a lot of nonsense. But with any technology, you can only use it correctly when you have a clear enough understanding of the basic concepts. Let me talk about the two misguided paths in the current application of Web standards from the following two aspects:
The first case is simple. I think that as long as XHTML+CSS is used, it is a Web standard. The page is full of classes and ids. Feel free to define separate classes for every detail. The difference between such a page and traditional HTML is that there is an extra "/" in the img tag. In fact, it's better to go back to traditional HTML. At least I can use font easily without having to look up the style sheet like a dictionary. Another, more subtle, casual use of CSS I'll talk about later.
I think the second situation is more difficult to understand, that is, trying to use various complicated div nesting and css statements to achieve the performance you want. A very simple example is in a post I just saw "Page rounded corners without cutting the image". First of all, I want to be sure that this idea is really good, using CSS function to "draw" the rounded corners. To do this, the designer must add a large section of code as follows in the corresponding location:
| The following is the quoted content: Example Source Code [www.52css.com] <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 seriously violates the basic concept of Web standards-the separation of structure and presentation. Because it places the code used to control the performance of the web page in the structural document. Maybe you would say that it actually puts the real performance code in CSS. But I think this is a stolen concept. Because the above b tags have nothing to do with the structure of the web page, they are all empty tags. That is, it doesn't exist to put something where the document structure requires it. So they are just junk code for document structure.
Another example may be more subtle. I have seen an article on alistapart.com before about how to implement three-way columns on a web page. The principle is probably to use three or four divs to nest each other. I think this is also a violation of Web standards. Because the order in which these div tags are placed in the code is not simply for structural needs, but for the performance of the web page.
Of course, I admit that the above point of view is overkill to a certain extent (but on the other hand, if you have to implement non-picture rounded corners, isn't it also overkill, haha). Sometimes structure and performance are not so easily separated. In order to achieve some rich performance, we have to let the structure adapt (think of the use of <div style="clear:both" />). But it is important to know what is right and what is wrong. Even if we have to do something wrong sometimes.
Finally, I want to state that I'm not saying "non-picture rounded corners" is meaningless or wrong. I also admire the author's intelligence and inspiration. I think this kind of technical research is just like using CSS to draw the national flag before, and it is very helpful for mastering CSS technology. However, its use should be as limited as the CSS flag and should not be adopted in practical applications. Because it violates the basic tenets of web standards.
2. The semantics of HTML tags
Today's web standards are colloquially called "div+css" or "layer layout". I don't object to this expediency. But this will lead to a misunderstanding: using a large number of div tags as structural elements. In fact, this is a more advanced form of div abuse (mentioned by Jeffrey Zeldman in the book "Website Refactoring").
HTML provides us with quite a wealth of tags, each of which has its own meaning. I think that when designing, in addition to following HTML syntax, we should make full use of and comply with the "semantics" of each tag. For example, the title text should be included in h1-h6, large paragraphs of text content should be segmented by <p> instead of <br />, list items should be placed in ul or ol or dl, and data in tabular form should still be table layout.
Why do this? A very convincing reason is to ensure that when the user removes CSS display, the web page can display the structural hierarchy of the content as effectively as possible. If all divs are used, when the CSS is removed, the entire web page will lose its hierarchy, leaving only some messy text fragments. This does not meet the web standard's requirements for low-configuration compatibility.
Let me list in detail my understanding of the semantics of some tags:
p br
Let’s talk about the simplest one first. Use p tags instead of br (even two consecutive <br />) for paragraphs. This seems to go without saying much. But sometimes we have to give up this principle. A common example is a forum post, if I want to segment it, I hit enter. What is transmitted to the background and displayed in this way is obviously segmented using <br />.
table th
Due to the vigorous promotion of div+css, it seems that whoever uses table layout is an uncivilized native. But I think this view is incorrect. The meaning of table is a table, so any data that should appear in tabular form should still be laid out in a table. A simple example is the roster of classmates, including names, student IDs, genders, etc. This is obviously data in tabular form, so table layout should be used. Another example worth exploring is the calendar navigation in the blog. I once saw a blog program. The dates in its calendar navigation are all wrapped in divs from the 1st to the 30th, and then the float:left style is used to arrange the calendar of the current month in a row of 7. When I cancel the CSS display of the browser, the part of the calendar is arranged vertically from No. 1 to No. 30. I think this is wrong. Because the calendar should be data in tabular form, table layout should still be used. After canceling the css, they should still be grouped into a table with 7 in a row.
th is another tag that will be ignored. Due to the omnipotence of CSS, all table cells can be created using td and a class attribute. But semantically, some table cells should be labeled with th. For example, in the calendar table mentioned above, the "MON TUE WED... SUN" units that identify the week should use th instead of td.
h1-h6
For h1-h6 tags, semantically they should work for all title text. Therefore, some writing methods such as <div class="diary-title> are redundant. Write it directly as <h1>, and then directly define CSS for h1 instead of .diary-title. Wouldn't it have the same effect? Of course, this rule I It can’t be too rigid, because sometimes the structural elements of the title part cannot be solved simply by using an h1, but at most I use a method like <h1><span></span></h1> to change the title. The structure is nested more complexly to meet performance needs.
But a semantic disagreement arises here. Should h1 be understood as a first-level title or as a title with a font size of size 1? I usually understand it as a first-level heading, and if there are subtitles under the first-level heading, use h2. But in fact, looking back at the beginning of HTML design, the numbers after h1-h6 are more understood as controlling the size of the title text. h3 may be used just to use a size three font, not that it is a third-level heading. Otherwise, all first-level titles use h1, and all of them are very large fonts, and you have to use CSS to control the font size, which feels very cumbersome. So, this is a question for debate.
ul ol
Whenever you need to list terms, you should use ul or ol instead of p. For example, job requirements in recruitment advertisements, such as precautions, such as operation step instructions. In addition, a popular usage is to use ulli to list the navigation menu of the web page, and then use CSS to control its arrangement.
It should be added that don't forget that ul or ol can be used in li to form a second-level list.
dl dt dd
This is an almost forgotten set of tags, but Jeffrey Zeldman strongly promotes their use in "Website Refactoring". dl should be the full name of "defining list (or definition list? If anyone knows, please tell me)". A typical usage is a dictionary entry. The name of the word is placed in dt, and the explanation of the word is placed in dd. The alistapart.com website is even more clever, defining the entire right column as dl, using dt for the title of each unit, and dd for the content of the unit.
img
The img tag itself doesn't have much to say. I just want to talk about a commonplace, that is, use img only when this element is indeed a necessary image in the content. Otherwise, it should be defined as a style using CSS. Such as illustrations, avatars, emoticons, these are pictures that must appear in the content, use img. Others, such as the background image of the title and the small icon in front of the list item, should not use the img tag.
span
span is now as popular as div. But in fact I think we should stick to its original use. My personal understanding is that span was originally used to carry class or style attributes. It itself has no clear semantics. Therefore, in the text flow, if we need to make style changes to some text, we use span to enclose it. For example, if some words need to be added in red, I use <span class="red">.
However, it is worth noting that this may cause the problems mentioned in h1 before. Because some text styles actually have ready-made tags, such as <strong>, <sub>, etc., we should also give them some opportunities appropriately.
a
a is the label that controls the hyperconnection. But there are some special cases where we may not like to use it. For example, a small window needs to pop up. I didn't pay much attention, but I think some designers will define onclick directly into the <img> tag of the "play" icon. I personally think that we should add an a outside the img, then define onclick inside a, and remember to write return false at the end of the js function. If possible, the href attribute of the a tag should also be written with the URL of the pop-up window to ensure that users can still effectively open the page even if JS is disabled.
That’s all I’ll list for now.
Finally, let’s summarize the importance of following the semantics of HTML tags. One of the requirements of web standards is low-profile compatibility: when a user disables images, disables CSS, or disables JS, we can still allow him to effectively browse web content. As we all know, the mandatory alt attribute is to consider compatibility when disabling images. Correctly following the semantics of HTML tags ensures compatibility when CSS is disabled. Only when HTML tags are used correctly and our webpage is "CSS streaking", people will still be able to see where the navigation menu is, where the article title is, and the calendar table will not fall apart.