The purpose of the HTML advanced tutorial is to explore the advantages of HTML and optimize affinity and ease of use.
Because HTML elementary tutorials and HTML intermediate tutorials take the stance of using the latest HTML standard (XHTML version 1.0 or above), some people who have not read the primary and intermediate tutorials may find it difficult to understand some aspects of this tutorial, which is also the reason why the key points exist. Overall, each part of this tutorial assumes that you have an inside and outside understanding of HTML and want to further develop its potential.
This tutorial is for those who have already understood HTML but cannot stand the test of future XHTML standards and are implicit in the separation of content and expressions.
Separate content and performanceHTML has never been a means of expression, but from the user side, it combines elements to format text, developers find ways to operate layouts. The power of CSS makes it no longer necessary to use HTML to perform any representation, and the content can be completely separated from representation (CSS).
There are many benefits to doing this - it usually compresses file capacity, has the flexibility to control the entire website instead of a single page with a main style sheet, and may also make the page easier to use and more affinity.
Following these basic principles basically means that you shouldn't use anything that's styling inside HTML anymore. For example, the tags of font and the properties of bgcolor should no longer be used. Even the border attribute border in the image tag img is illegal in XHTML 1.1. Don't worry, outdated HTML can be styled, CSS can be styled, and it can be done better.
It's not just about stripping the representation from HTML, the structure of the content means using clear HTML tags where they fit. For example, h1, h2 and other applications are used on titles—not just using CSS to make the font bigger.
The best guide is to use its default style on a visual browser to render a page without a style sheet (or text browser with a style sheet but does not support a style sheet, such as lynx-translator's note).
Tables should not be used in layout - tables are used to represent table format data (we have said it many times without getting tired of it - translator's note). Perhaps for HTMLers who are already accustomed to traditional structures, it is very technically difficult to completely change. This method greatly compresses files, and, based on these explicit codes, it becomes easier to use and more affinity.For more, read the layout of the CSS Advanced Tutorial.
LabelAll tags in XHTML must be lowercase and closed. Without closed tags (such as br and img) must be closed in English with half-angle forward slashes/self-closed afterwards (such as
). Note that there should be an English half-width space in front of the slash.
The tags must also be comprehensive so that the elements are nested correctly (such as this , not this ).
All documents must have html, head, title and body elements. It must also start with the document type declaration.
The body of the document should start with p, h1, h2, h3, h4, h5, h6, div, pre, address, ins or del.
propertyAll attributes must be lowercase, and their values must also be enclosed in English half-width quotation marks ().
Thin attributes are not allowed (e.g. ). By convention, a simplified attribute must give the same value as the attribute name (e.g. ).
The name attribute is no longer legal (except in form elements), and id should be used instead.
The target attribute target is not a legal attribute. Fortunately, it is a bit crazy.
In img, the alt attribute is required.
AffinityThe reason for creating affinity web pages for people with disabilities is not proven. It is not only humane, but also beneficial to elderly users and users with reduced facial features (think, one day we are old, our eyesight is reduced, and our facial features are not flexible, how can we browse the Internet? Accumulate some virtue for the elderly, and consider affinity now! - Translator's note). Affinity is not only convenient for people with severe disabilities, but also makes it easier for most users with small amounts of regression functions (especially vision).
This issue is increasingly involved in legal issues, such as the adoption of Article 508 in the United States, which attempts to actively promote the use of compulsory affinity; in the UK, all government websites must have a specified degree of affinity. When can there be legislation like affinity measures on buildings so that they can be widely used on commercial websites? (China does not know when this legislation will be available! But it does not mean that we should not pay attention to the legality of the web pages we designed. - Translator's note)
If you can follow the above suggestions, your HTML should already have a high affinity for users with disabilities. There are more creations that will take your affinity to the next level, and it’s not difficult. See Affinity Connection and Affinity Form Guide.