Why use XHTML?
XHTML is a combination of HTML and XML (Extended Markup Language). XHTML contains all HTML 4.01 elements combined with XML syntax.
We think that many pages on the World Wide Web contain bad htmlCode. The following HTML code can still work well, even if it does not comply with HTML rules:
Differences between XHTML and HTML
This is incorrect: <B> <I> This text is bold and italic</B></I>
This is correct: <B> <I> This text is bold and italic </I></B>
The XHTML element must be disabled.
This is incorrect:<P>This is a paragraph
This is correct:<P>This is a paragraph</P>
This is incorrect: a break: <br>
This is correct: a break: <br/>
The XHTML element must be in lowercase.(XHTML standard definition: label names and attributes are case sensitive)
This is incorrect:<Body><P>This is a paragraph</P></Body>
This is correct:<Body><P>This is a paragraph</P></Body>
The XHTML document must have a root element.
All XHTML elements must be nested in the <HTML> root element. All other elements can have child elements. Child elements must be paired and nested in the parent element. The basic document structure is as follows:
<HTML><Head>... </Html>
XHTML syntax
This is incorrect: <TableWidth= "100%">
This is correct: <TableWidth= "100%">
The attribute value must be enclosed in quotation marks.
This is incorrect: <Table width =100%>
This is correct: <Table width ="100%">
Attribute cannot be abbreviated
This is incorrect: <input checked>
This is correct: <input checked = "checked"/>
Replace the name attribute with the ID attribute (The name attribute is not encouraged in XHTML and should be replaced by ID.)
This is incorrect: Name= "Picture1"/>
This is correct: ID= "Picture1"/>
Important compatibility tips: You should add an extra space before the "/" symbol to make your XHTML compatible with today's browsers.
Language attributes (Lang)
The lang attribute is applied to almost all XHTML elements. It defines the type of language used for the content inside the element.
If you use the lang attribute in an element, you must add an extra XML: Lang, as shown in the following code: <DivLang = "no" XML: lang = "no"> Heia Norge! </Div>
Mandatory XHTML Elements
All XHTML documents must declare the file type (doctype Declaration ). The HTML, Head, and body elements must exist in the XHTML document, and the title element must be in the head element.
Below is a minimal XHTML file template:
Tip:File type declaration is not an integral part of the XHTML document. It is not an XHTML element, nor does it close the tag..
Tip:In XHTML, The xmlns attribute in the <HTML> tag is required. However, even if the XHTML document does not have this attribute, the w3.org verification tool will not prompt an error. This is because "xmlns = http://www.w3.org/1999/xhtml" is a fixed value that will be added to the <HTML> tag even if you haven't included it in the code.
Xhtml dtd ( XHTML defines three file types. , The most commonly used XHTML transitional ) Three types of document Declaration
XHTML 1.0 strict(Clean labels are required to avoid confusion and use them with stacked style sheets)
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 strict // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 transitional(When you need to use HTML's performance features and write XHTML for browsers that do not support stacked style sheets)
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 frameset(When you need to use an HTML frame to split the browser window into two or more frames)
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 frameset // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
How to upgrade to XHTML? 1. Add file type declaration
Add the following file type declaration to the first line of each page:
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Tips for file type declaration:
If you want to verify the page as the correct XHTML, the page must contain a file type declaration. It should be noted that, according to different file type declarations, the new browsers (such as Internet Explorer 6) process documents differently. If the browser reads a file type declaration, it will process the document in an appropriate way. If doctype is not available, the document may be displayed in a different way.
2. lowercase tags and attribute names
Because XHTML is case sensitive and only accepts lower-case HTML tags and attribute names, you can execute a simple search and replacement command to change all the upper-case tags to lower-case ones. Perform the same operation on the attribute name. We have been using lower-case letters on our website, so basically, the replacement function is not very useful.
3. enclose all attributes with quotation marks
Since W3C XHTML 1.0 requires that all attribute values be enclosed in quotation marks, if you have not noticed this detail before, you need to check the website page by page. This is a time-consuming task, so never forget to quote the attribute value.
4. Empty tags: <HR>, <br> and
In XHTML, empty tags (empty tags) are not allowed. <HR> and <br> labels should be replaced with <HR/> and <br/>. This creates a new problem. Netscape may misunderstand the <br/> label. We do not know the reason, but it is okay to change it to <br/>. After realizing this, you need to change tags again through the search and replacement functions. Other labels (such as labels) also encounter the same problem. Do not use a closed tag to close , but add/> at the end of the tag.
5. Verify the site
After all this is done, use the following link to verify all modified pages based on the official W3C DTD: XHTML validator. Next, a few errors may be discovered and these errors will be corrected one by one (manually.
Should we use a conversion tool (for example, tidy )? Yes, we can use tidy.
Dave raggett's HTML tidy is a free tool to clean up HTML code. Tidy is doing a great job in dealing with hard-to-read HTML code generated by specialized HTML code editors and conversion tools. At the same time, it can help you find out which places on the site need to invest more energy, making websites more easy to use for people with disabilities.
XHTML verification: Use DTD to verify XHTML
The XHTML document is verified based on the document type declaration (DTD. The XHTML file is correctly verified only when the correct DTD is added to the first line of the file.
Reasons for XHTML Modularization in the XHTML Module
XHTML is a simple and huge language. XHTML contains most of the functions required by website developers. For some special purposes, XHTML is too large and too complex. for other purposes, it is too simple.
By dividing XHTML into several modules, W3C has created several small and well-defined XHTML elements that can be used independently on simple devices, it can also be integrated with other XML standards into large and more complex applications.Program.
By using the modular XHTML, product and software designers can:
W3C has divided XHTML definitions into 28 models:
XHTML event attributes
One of the new features of HTML 4.0 is that HTML events trigger browser behavior. For example, when a user clicks an HTML element, a javascript code is started. The following are a series of attributes that can be inserted with HTML tags to define event behavior.
Window events (window events) [only valid in the body and frameset elements]
Form element events (only valid in form elements]
Keyboard Events)
The following elements are invalid: Base, BDO, BR, frame, frameset, Head, HTML, IFRAME, Meta, Param, script, style, and title.
Keyboard Events)
The following elements are invalid: Base, BDO, BR, frame, frameset, Head, HTML, IFRAME, Meta, Param, script, style, and title.
One of XHTML structuring: using XHTML to reconstruct the website XHTML rule Overview
Converting traditional HTML to XHTML 1.0 is fast and painless, as long as you follow some simple rules and easy guidelines. Whether or not HTML is used, it does not prevent you from using XHTML.
The default character set for XML, XHTML, and HTML 4.0 documents is Unicode, a standard defined by the Unicode alliance. Unicode is a comprehensive set of character sets that provide each character with a specific unique number, regardless of platform, program, and language. Unicode is what we have most similar to the universal alphabet, although it is not an alphabet, it is a set of digital ing solutions.
Although Unicode is the default character set for Web documents, developers are still free to choose other character sets that are more suitable for them. For example, websites in the United States and Western Europe often use ISO-8859-1 (Latin-1) encoding, while the National Standard of the People's Republic of China is gb2312.
Mark a document for semantic expression, not for style
Remember:Use CSS for layout to the maximum extent. In the world of web standards, XHTML markup has nothing to do with performance. It is only related to the document structure.
Well-structured documents can convey as many semantics as possible to the browser, whether the browser is on the handheld computer or the trendy desktop graphics browser. Well-structured documents can convey visual semantics to users, even in old browsers or modern browsers where CSS is disabled by users.
Not every site can immediately discard the HTML table layout. The inventor of CSS, W3C, did not convert its official website into a CSS layout until November 2002. However, even stubborn standards-only people do not always process the representation completely from the structure, at least in XHTML 1. But now we can take a major step towards this ideal by separating the performance from the structure (or separating the data from the design ), even the traditional hybrid layout can benefit from this.
The following tips help you think in a more structured way:
Outline color
In grammar schools, most of us are forced to write articles in the standard outline format. Now we have become designers, how free we can get rid of the limitations of the outline, then boldly devote ourselves to the field of freedom that is unique to individual expressions (maybe our brochures and commercial sites are not so unique and personal ). But at least we will not be troubled by the outline.
In fact, according to HTML, we should structure the content into an organized level. When Browsers Do not support CSS, we cannot achieve this while delivering the available layout. But today, while fully implementing our design, we have the ability to deliver well-structured internal documents.
When you mark text for the Internet or convert an existing text document to a Web page, use the entries in the traditional outline to think about it.
<H1> my topicAt the same time, avoid using obsolete HTML elements such as <font> or silent elements such as <br/> to simulate non-existent logical structures.
For example, do not do this as follows:
Use elements based on their meaning, rather than based on their appearance<Font size = "7"> my topic </font> <br/> introductory text <br/> <font size = "6"> supplementary points of view </font> <br/> related text <br/>
Some of us are stuck in a bad habit of using H1 when we only need a text with a large character, or using Li when we need to add a dot in front. As we have discussed in the previous chapter, browsers have always been accustomed to imposing design attributes on HTML elements. We have always been accustomed to thinking that H1 means a large word, while Li means a dot, or BLOCKQUOTE means a text indent. Most of us are still using structured elements to simulate the performance of HTML.
Similarly, if the designer wants all titles to use the same font size, she will set all titles to H1, even if there is no structured semantics.
<H1> This is the main title. When I organize the text according to the outline format. </H1>We must put our tricks aside and start to use them based on the semantics of elements, instead of what they look like. Actually, H1 can be anything you want. With CSS, H1 can be a non-bold small Rome font, while P text can be a bold large word, li can also have no DOTS (or you can use a PNG, GIF, or JPEG image with a kitten or puppy or company logo.
Starting from today, we will use CSS to determine the appearance of elements. We can even change the appearance of elements on the page or in the site. CSS can completely remove the representation from the structure and allow you to format any element according to your favorite style.
H1, H2, H3, H4, H5, H6 {font-family: Georgia, palatino, "New Century schoolbook", times, Serif; font-weight: normal; font-size: 2em; margin-top: 1em; margin-bottom: 0 ;}
Why are you doing this? In this way, the structure of the document is retained in text browsers, wireless devices, and HTML emails while obtaining the brand appearance and feeling in the graphic browser.
We do not want to introduce more CSS technologies in the XHTML chapter. We just want to displayDocument structure and visual expression are two completely different things, and structural elements should be used to convert text, rather than imposing display effects.
Use structured elements instead of meaningless SpamSince we have forgotten or do not know that HTML and XHTML are used to convey the structural meaning, many HTML advocates use tags to insert the list as follows:
Project 1 <br/> Project 2 <br/> Project 3 <br/>
Consider replacing it with an ordered or unordered list:
<Ul> <li> Project 1 </LI> <li> Project 2 </LI> <li> Project 3 </LI> </ul>
"But Li gave me a dot, and I don't need a dot! "You may say that. According to the above section, CSS does not make any assumptions about the expected appearance of the element. It waits for you to tell it the appearance of the elements you expect. Closing a dot is the most basic function of CSS. It has the ability to make the list look like normal text, or make the list look like a graphic navigation bar, with a complete reversal effect.
Therefore, use the list element to mark the list. Similarly, use strong to replace B, use em to replace I, and so on. In most desktop browsers, strong has the same display effect as B by default, while Em and I are the same. In addition, you can create the expected visual effect without damaging the document structure.
Although CSS does not make assumptions about the display of any elements, the browser makes many assumptions, in addition, we have not encountered a browser that shows strong as another effect rather than a bold character (unless it is indicated by CSS created by the designer in other ways ). If you are worried that a strange browser will not show strong as a bold character, you can write such a CSS rule:
Strong {font-weight: bold; font-style: normal ;}Visual elements and structures
Web standards not only require the technology we use, but also follow the method of using these technologies. Using XHTML to write tags and CSS to process some or all of the la s does not necessarily make the site easier to use and reduce the bandwidth at the same time. Like the technology we used earlier, XHTML and CSS will also be misused and abused. The lengthy XHTML is the same as the lengthy HTML, which wastes your bandwidth and time. The lengthy and excessive CSS cannot completely represent the HTML code; this is nothing more than a bad thing.
XHTML structured 2: Case study: w3school structured mark
Reading this chapter will improve your skills, lose weight for your web page, and give you a clearer understanding of the differences between tags and designs. The concept in this chapter is easy to learn, but it can greatly improve the performance of the website, as well as the convenience of designing, making and updating the website.
In this section, you will learn how to write a logical and compact tag that enables you to reduce bandwidth traffic by about 50% while reducing server load and pressure, reduces the loading time of the website. By removing those elements and getting rid of those bad habits that do not have any benefits, we can achieve the above purpose.
These bad habits plague many sites on the network, especially those sites that mix CSS code with the primary table-based layout. This approach is clumsy and economic, even for designers who are experienced in other fields. At the same time, the probability of this problem is equal, whether it is those handwritten code sites, or the use of visible editing tools, such as Dreamweaver and golive, to create sites.
This section introduces these common errors so that you can identify and prevent them and learn how to correct them. We will elaborate on the unique identifier attribute (ID) and show how it enables you to write extremely compact XHTML code, whether you create a hybrid layout or a pure CSS layout.
Must each element be structured?
As we mentioned in the previous section, each element can be structured, and CSS can display an ordered or unordered list as a complete navigation bar, with reverse buttons. The content of a document can be marked by common elements. These elements indicate the semantic roles they play in website design through specific Structural Attribute flags.
We created the first Chinese test version of w3school in 2006 AD. At the beginning, we used CSS for layout and XHTML for structured documents. Each element is structured, from the title to the List, and even paragraphs. On each page of w3school, you can see the homepage button and level 2 menu button with reverse effect. The XHTML code of these two components is as follows:
Div, ID, and other helpers
If correctly used, div can be a good helper for structured markup, and ID is a surprising little tool that enables you to write extremely compact XHTML, it also cleverly utilizes CSS and uses the standard Document Object Model (DOM) to add complicated and exquisite behaviors to websites.
W3C defines DIV in the XHTML structure model of its latest draft xhtml2 as follows:
The DIV element works with the ID, class, and role attributes to provide a general mechanism for adding additional structures to the document. This element does not define the style of expression in the content. Therefore, creators can use this element with style sheets, XML: Lang, and attributes to adapt XHTML to their own needs and tastes.
DIV is short for division. Division indicates segmentation, region, and group. For example, when you combine a series of links, a division of the document is formed..
General mechanism for determining Structure
All HTML writers are familiar with common elements such as paragraphs and titles, but some may be less familiar with Divs. In the W3C description, we can find the key to understanding the DIV element, "a general mechanism for adding structures ."
On the home page of this site, we encapsulate the list of tutorial directories in a DIV, because the tutorial directory is not part of any element of the body. The H2 element indicates the title of each tutorial, And the UL list element indicates the detailed list of each tutorial. However, in a larger and more specific sense, the tutorial directory plays a structured role, that is, the secondary navigation component. To emphasize this role, we use the navsecond ID to mark this Div.
You can use any name. Both "Gladys" and "orangebox" fully comply with the XHTML naming rules. However, the semantic (semantic) or meta-structured (meta-structural) Naming is the best (that is, the names that can interpret the functions executed by the elements ).
When the customer decides to use blue, you will think it is silly to name a part of the site as orangebox. In this case, you will feel silly. When the last delivery is only six months away, you begin to adjust the style sheet, but I cannot remember how "Gladys" (Gladys, female name) represents the navigation area, sidebar, or the search box.
Therefore, marking the ID as "menu", "content", or "searchform" will help you recall. Further, the markup is not the same as the design. a page with a good structure can be formatted as you want. The result is that no matter whether you use a pure CSS layout or a hybrid layout, you will get rid of the habit of using the presentation mark for thinking and creation.
ID vs. Class
The ID attribute is not new to XHTML; the class attribute or Div element is the same. They can all go back to the HTML era. The ID attribute assigns a unique name to an element. Each name can only be used once on the assigned page. (For example, if your page contains a div whose ID is content, you cannot use this name for another Div or other elements. On the contrary, the class attribute can be used on the page over and over again (for example, the class name "small" or "footnote" can be used for all the five paragraphs on the page ). The following mark will help clarify the differences between ID and class:
In this example, the DIV named searchform is used to encapsulate the page area that contains the search form, while Div class = "blogentry" is used to encapsulate each article entry in the blog. There is only one search form on the page, so we chose ID to mark this unique component. However, a blog has many (Article) entries, so the class attribute is applied to this situation. Similarly, news sites usually have multiple Divs. The class of these divs can be named "newsitem" or something else.
However, not all websites require Div. Blog sites can only use H1, H2, and H2 headers and <p> paragraphs, as well as news sites. Here we will show the DIV whose class is blogentry, instead of encouraging you to fill up the DIV in the site, just to show you this principle: in the same HTML document, the class is used multiple times, but only one ID can be used.
Adhesive sticker TheoryIt is helpful to think about the ID attribute as a sticky sticker. I will take a sticker on the refrigerator to remind myself to buy milk, and I will post a sticker on the phone to remind me to call a customer who has overdue payment. Another one is posted on the ledger folder to remind me of the bills that must be paid before January 1, 15th day of this month.
ID is also marked with a special area in the document to remind you which area requires special processing. At this point, the ID attribute is similar to the adhesive sticker. To implement the so-called special processing, you need to use this special ID to write several rules in the style sheet, or add several lines of code to the Javascript file. For example, your CSS file contains some specific rules. These rules are only applied to the elements in the DIV whose ID is searchform.
The power of ID
The ID property is incredibly powerful. It has the following capabilities:
The id value must start with a letter or underscore. It cannot start with a number. Although W3C verification does not capture this error, the XML parser does. At the same time, if you use ID and Javascript in combination, the ID name and value must be valid JavaScript variables. Space and font size, especially the font size, are not allowed. In addition, it is not a good idea to use underlines for class or ID names because of restrictions in css2.0 (and some browsers.
Semantic tag and availability
Now we have discussed the widely used XHTML elements (especially Div and ID). Let's take a look at the home page examples. First, let's review the menu at the header position:
We have seven links, and each link is assigned an ID to correspond to the corresponding content: for example, the id named H corresponds to the HTML tutorial, and so on. These links are encapsulated in the list element named menu. The menu ID indicates the function of the list-A menu list, the more peripheral Div named navfirst is used to mark the section in the page, and associate it with the Section such as maincontent, sidebar, and footer) and other elements.
The DIV and UL elements provide a real structure, indicating the functions of the content (navigation bar) and its position in the document (the header position of the page ). On the contrary, traditional table la s cannot provide any semantic information about the data and can easily consume three times the bandwidth.
Note that these tags do not contain IMG tags, so they do not involve attributes such as width, height, background, or border. At the same time, it does not use table cells and does not involve a series of related attributes. It is very clean and small, and provides all the information that can be understood.
These tags are used in combination with CSS to provide a reliable and fast loading layout for website visitors. It also provides the possibility of creating a more flexible and diverse appearance for visitors. In addition, in a non-CSS environment, our well-structured mark can still provide all the content without confusion.
Readers with sharp eyes may have discovered that the text contained in element A is not displayed by the browser, thanks to the perfect combination of structured markup and CSS, this allows us to define a trigger mechanism through several lines of CSS rules. When users use a graphical browser, they will see beautiful navigation buttons. When users use a text-only reader, they can also get all the text, so that the content is the same for all users.
In addition, because the tag does not contain images and table units, this navigation bar component can be referenced by any page in the site without changing the structure, and give it different visual effects. In short, code modularization improves code reuse.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
