Home > Developer > Web Develop
XHTML is a stricter and purer HTML code.
What is XHTML?Before continuing with this tutorial, you should have a basic understanding of the following knowledge:
XHTML became the world's standard in 2000 January 26.
It defines XHTML as the latest HTML version. XHTML will gradually replace HTML.
XHTML is supported by all new browsersXHTML is compatible with HTML 4.01.
XHTML is supported by all new browsers.
XHTML is a combination of HTML and XML (extended Markup Language).
XHTML contains all the HTML 4.01 elements that are combined with XML syntax.
Why use XHTML?We think many of the pages on the World Wide Web contain bad HTML code.
The following HTML code can still work fine, even if it doesn't follow the HTML rules:
html</body>
XML is a markup language in which all things are correctly labeled to produce well-formed documents.
XML is used to describe data, while HTML is used to display data.
There are different browser technologies in today's market, some browsers run on computers, and some browsers run on mobile phones and handheld devices. The latter has no ability or means to explain bad markup language. So by combining the strengths of HTML and XML, we've got the markup language-XHTML that can come in handy today and in the future.XHTML is not much different from the HTML 4.01 standard.
So upgrading your code to 4.01 is a good start. Our complete "HTML 4.01 reference manual" will help you do this.
In addition, you should write the HTML code immediately using lowercase letters, and never develop a bad habit of ignoring similar </p> tags.
I wish you can code happily!
The most important differences are:In HTML, some elements can be nested incorrectly with each other like this:
<b><i>this text is bold and italic</b></i>
In XHTML, all elements must be nested correctly with each other like this:
<b><i>this text is bold and italic</i></b>
Tip: An easy mistake to make in a nested list is to forget that the internal list must be in the LI element, just like this:
This is wrong:
<ul> <li>Coffee</li><li>Tea<ul> <li>black tea</li> < Li>green tea</li> </ul> <li>Milk</li></ul>
That's right:
<ul> <li>Coffee</li><li>Tea <ul> <li>black tea</li> <li>green tea</li> </ul></li><li>Milk</li></ul>
Note: In the example of the correct code, we inserted a </li> tag after </ul>.
XHTML elements must be closedA non-empty label must use the end tag.
This is wrong:
<p>This is a paragraph<p>another paragraph
That's right:
Empty tags must also be closed<p>This is a paragraph</p><p>another paragraph</p>
An empty label must also use the end tag, or its start tag must use the /> end.
This is wrong:
A break: <br>a Horizontal rule:That's right:
XHTML elements must be lowercase/>/>/>XHTML Specification Definition: Label names and attributes are case sensitive.
This is wrong:
<BODY><P>This is a paragraph</P></BODY>That's right:
An XHTML document must have a root element<body><p>This is a paragraph</p></body>All XHTML elements must be nested within the
Writing XHTML code requires pure HTML syntax.More rules for XHTML syntax:Property names must be lowercase
- Property names must be lowercase
- Attribute values must be quoted
- Attribute cannot be abbreviated
- Replace the name attribute with the Id attribute
- XHTML DTD defines the HTML elements that are forced to use
This is wrong:
WIDTH= "100%" >That's right:
Attribute values must be quotedwidth= "100%" >This is wrong:
<table width=100%>That's right:
Attribute cannot be abbreviated<table width="100%">This is wrong:
<input checked><input readonly><input disabled><option selected><frame noresize>That's right:
<input checked= "Checked"/><input readonly= "readonly"/><input disabled= "disabled"/><option Selected= "selected"/><frame noresize= "noresize"/>Here is a list of abbreviated attributes for HTML, as well as overrides in XHTML:
Replace the name attribute with the id attribute
HTML XHTML Compact compact= "Compact" Checked Checked= "Checked" Declare Declare= "DECLARE" ReadOnly readonly= "ReadOnly" Disabled disabled= "Disabled" Selected Selected= "Selected" Defer Defer= "Defer" Ismap ismap= "Ismap" Nohref nohref= "Nohref" NoShade Noshade= "NoShade" NoWrap nowrap= "NoWrap" Multiple Multiple= "multiple" Noresize Noresize= "Noresize" HTML 4.01 defines the name attribute for the following elements: A, applet, frame, iframe, IMG, and map.
The use of the name attribute in XHTML is discouraged and should be replaced with an ID.
This is wrong:
name= "Picture1"/>That's right:
Important Compatibility Tips:id= "Picture1"/>You should add an extra space before the "/" symbol to make your XHTML compatible with today's browsers.
Language attribute (lang)The lang attribute is applied to almost all XHTML elements. It defines the type of language used within the content of the element.
If you use the lang attribute in an element, you must add additional Xml:lang, like this:
Forced use of XHTML elementslang="no" xml:lang="no">heia norge!</div>All XHTML documents must have a file type declaration (DOCTYPE declaration). The HTML, head, body elements must exist in the XHTML document, and the title element must be in the head element.
The following is a minimized XHTML file template:
<!DOCTYPE Doctype goes here>Tip: File type declarations are not part of the XHTML document itself. It is not an XHTML element, nor does it close the tag.
Tip: The xmlns attribute within the,
XHTML defines three types of file-type declarations. The most common use is XHTML transitional. <! Doctype> is mandatory for use.There are three main parts to an XHTML document:
- DOCTYPE
- Head
- Body
The basic document structure is this:
<! DOCTYPE ... >In an XHTML document, the document type declaration is always on the first line.
An example of XHTMLThis is a simple (minimized) XHTML document:
<! DOCTYPE htmlpublic "-//w3c//dtd XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >< Html>Document type declaration defines the type of document:
<! DOCTYPE htmlpublic "-//w3c//dtd XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >The remainder of the document resembles HTML:
3 Types of document declarationsThere are three types of XHTML documents:
- The DTD specifies the syntax for Web pages that use Universal Markup Language (SGML).
- Generic markup languages such as HTML should use DTDs to prescribe rules that apply to tags in a particular document, including a series of elements and entity declarations.
- In the document type declaration or DTD of Universal Markup Language (SGML), XHTML is described in detail.
- The XHTML DTD uses an exact language that can be read by the computer to describe the syntactic and syntactic syntax of a legitimate XHTML tag.
Three types of XML documents for XHTML 1.0
- STRICT (Strict type)
- Transitional (Transition type)
- FRAMESET (frame type)
XHTML 1.0 Specifies three types of XML documents to correspond to the three DTDs described above.
XHTML 1.0 Strict<! DOCTYPE htmlpublic "-//w3c//dtd XHTML 1.0 strict//en" "http://www.w3.org/TR/xhtml1/DTD/"xhtml1-strict.dtd>Use in this case: clean markings are required to avoid confusion in the presentation. Use in conjunction with cascading style sheets.
XHTML 1.0 Transitional<! DOCTYPE htmlpublic "-//w3c//dtd XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/"xhtml1-transitional.dtd>Use in this case: when you need to take advantage of HTML performance features, and when you need to write XHTML for browsers that do not support cascading style sheets.
XHTML 1.0 Frameset<! DOCTYPE htmlpublic "-//w3c//dtd XHTML 1.0 frameset//en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">Use in this case: when the browser window needs to be split into two or more frames using the HTML framework.
How do I upgrade your site to XHTML?In order to convert a site from HTML to XHTML, you should first familiarize yourself with the XHTML syntax rules explained in the previous chapters.
The following steps are described below.
Add a file type declarationAdd 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 ">Note: This site (W3school) uses a strict DTD. Using a transitional DTD is a good choice, however, because a strict DTD may seem "too restrictive" for most developers who get started.
A hint about the file type declarationIf you want to validate the page as the correct XHTML, the page must contain a file type declaration.
It is important to note that, depending on the file type declaration, the new browser handles the document differently. If the browser reads a file type declaration, it will process the document in a "proper" manner. If there is no DOCTYPE, the document may be displayed in a different way.
lowercase label and attribute namesBecause XHTML is case sensitive, and because XHTML accepts only lowercase HTML tags and attribute names, you can perform a simple search and replace command to change all uppercase labels to lowercase. Do the same with attribute names. We have been using lowercase letters on our own website, so basically, the Replace feature is not too much to use.
Enclose all attributes in quotation marksSince the XHTML 1.0 standard requires all attribute values to be quoted, if you have not noticed this detail before, you will need to check the Web site page by line. This is a time-consuming task, so never forget to quote the attribute value again.
Empty tags:Empty tags are not allowed in XHTML.
This creates a new problem that Netscape will misread <br/> tag. We don't know why, but it's no problem to change it to <br/>. With this in mind, you'll need to make changes to the label again through the search and replace feature.
Other tags, such as the tag, may also encounter the same problem. Do not use closed tabs to close , but to add/> at the end of the label.
Verify siteAfter all this, use the link below to validate all modified pages according to the official web site DTD: XHTML Validator. Next, there may be a small number of errors that are found, each of which is corrected (manually). Our experience is that the most likely mistake is to omit the </li> tag from the list.
Should we use a conversion tool (say TIDY)? Yes, we could have used TIDY.
Dave Raggett's HTML Tidy is a free tool for cleaning up HTML code. TIDY still does a great job working with the hard-to-read HTML code generated by specialized HTML code editors and conversion tools. At the same time, it can help you discover where in your site you need to devote more effort, making Web pages more user-friendly for people with disabilities.
What is the reason why we didn't use Tidy? When we started creating this site, we were already very familiar with XHTML. We were already aware of using lowercase tags and quoting attributes. So in the course of the website testing, we simply tested it through the Web-based XHTML validator and fixed a few bugs. More importantly, we've learned a lot about writing Tidy-style HTML code.
XHTML documents are validated against document type declarations.
Validating XHTML with DTDsXHTML documents are validated against a document type declaration (DTD). The XHTML file is validated correctly only if the correct DTD is added to the first line of the file.
A strict DTD contains elements and attributes that are not used or are not present in the framework structure:
! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"The staging DTD contains everything in the strict DTD, plus the elements and attributes that are deprecated.
! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "The framework DTD contains everything in the transition DTD, plus the framework.
! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 frameset//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"This is a simple XHTML document:
<! DOCTYPE htmlpublic "-//w3c//dtd XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >< Html>Use the Web validator to test your XHTML for reasons of effect, to learn more please visit the original website: School website: http://www.w3school.com.cn/tags/index.asp about user geolocation:/http Www.haorooms.com/post/html5_GPS_getCurrentPositionThen I want to say: no more tete!!!
Check out XHTML First
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
