Some Notes on web standards

HTML Tag Semantics
Nowadays, web standards are commonly called "Div + CSS" or "layer layout ". I have no objection to the cheap call. However, this will lead to a misunderstanding: a large number of Div labels are used as structural elements. In fact, this is a more advanced type of Div abuse (Jeffrey zeldman mentioned in website refactoring ).
Html provides us with a wealth of tags, each of which has its own meaning. In my opinion, in addition to following the HTML syntax, we should make full use of and abide by the "Semantics" of each tag ". If the title text should be included in the h1-h6, the text content of a large segment should be segmented by <p> instead of <br/>, the list item should be placed in UL or ol or DL, data in the form of tables should still be in the table layout.
Why? One convincing reason is that, when the user removes CSS display, the webpage can display the content structure level as effectively as possible. If all the divs are used, after CSS is removed, the entire page will lose its level, leaving only some messy text fragments. This does not meet the low configuration compatibility requirements of web standards.
Below I will detail my understanding of the semantics of some labels:
P Br
It is the simplest. Use the P label instead of the BR (or even two consecutive <br/>) for segmentation ). I don't need to say much about this. But sometimes we have to give up this principle. A common example is forum posting. If I want to segment a post, press Enter. The data that is transmitted to the background and displayed in this way is obviously segmented by <br/>.
Table th
Since the results of Div + CSS are vigorously promoted, it seems that who uses the table layout now is the unenlightened indigenous people. But I think this is incorrect. Table indicates a table. Therefore, the table layout should be used for data that should appear in the form of a table. A simple example is the roster of class students, including the name, student ID, and gender. This is obviously in the form of a table, so table layout should be used. Another example worth exploring is the calendar navigation in the blog. I have seen a blog Program The date in its calendar navigation, from 1 to 30, all set with Div, and then use float: Left style 7 rows to discharge the calendar of the month. After I cancel the CSS display in the browser, the calendar section is arranged from 1 to 30. I think this is wrong. Because the calendar should be in the form of a table, the table layout should still be used. After the CSS is removed, a table is still displayed in 7 rows.
Th is another label that will be ignored. Because CSS is omnipotent, all table units can be handled by adding a class attribute to TD. However, in terms of semantics, some table units should use the th tag. For example, in the calendar table mentioned above, the "Mon Tue wed... sun" in the table indicates the unit of the week, and th instead of TD should be used.
H1-h6
For h1-h6 labels, they should, in semantics, apply to all title text. Therefore, some <Div class = "Diary-title> statements are redundant and directly written as However, there is a semantic difference here. H1 should be regarded as the first-level title or the first-level font size title. I usually think of it as a level-1 title. If there is a level-1 title, H2 is used. But in fact, looking back at the beginning of the HTML design, the number behind the h1-h6 is more understood as controlling the title text size. H3 may be used only to use the font no. 3, rather than being a level-3 title. Otherwise, the first-level titles all use H1, all of which are big words and have to use CSS to control the font size. Therefore, this is a question to be discussed.
Ul ol
Anyone who needs to list the terms should use ul or ol instead of P. For example, job requirements in Advertisement recruitment, such as precautions, such as Operation steps. In addition, it is popular to use ul Li to list navigation menus on webpages, and then use CSS to control the arrangement.
It should be added that, do not forget to use ul or ol in Li to form the second-level list.
Dl dt dd
This is a group of almost forgotten labels, but Jeffrey zeldman emphasizes their use in website refactoring. The dl should be a "defining list (or definition list? If you have any knowledge, please tell me) ". A typical usage is a dictionary entry. The word name is placed in DT, and the word explanation is placed in DD. Alistapart.com is better at defining the entire column on the right as DL. The title of each unit is DT, and the content of this unit is dd.
IMG
The IMG Tag itself has nothing to say. I just want to talk about it all the time, that is, IMG is used only when the element is a required image in the content. Otherwise, CSS should be used to define the style. Such as illustrations, portraits, and emoticon icons. These are images that must appear in the content. Use IMG. The IMG label should not be used for other background images such as titles and small icons in front of list items.
Span
Span is now very popular with Div. But in fact, I think we should still follow its original use. In my personal understanding, span was originally used to carry the class or style attributes. It does not have clear semantics. Therefore, in a text stream, we need to change the style of some texts and then use span to enclose them. For example, if some words need to be red, I will use <SPAN class = "red">.
But it is worth noting that, in this way, it is possible to commit the problems mentioned in h1. Because some text styles actually have existing labels, such as <strong> and <sub>, we should also give them some opportunities.
A
A is the label used to control hyperconnections. But in some special cases, we do not necessarily like to use it. For example, a small window needs to pop up. I'm not paying much attention to it, but I think some designers will define onclick directly to the label of the "play" small icon. I personally think that I should add an A outside IMG, define onclick to A, and remember to write return false at the end of the JS function. If possible, the href attribute of the tag should also be written with the URL of the pop-up window to ensure that the user can still open the page effectively when Javascript is disabled.
So many are listed for the moment.
Finally, we will summarize the importance of following the HTML Tag semantics. One of the requirements of web standards is low configuration compatibility: when users disable images, CSS, or JS, we can still enable them to effectively browse Web content. We all know that the forced alt attribute is used to consider the compatibility when the image is disabled. Correctly following the syntax of HTML tags ensures the compatibility when CSS is disabled. Only when HTML tags are correctly used and our webpage is "CSS streaking" can we still see what navigation menu is and where it is Article The title and calendar table will not be split.