Check out XHTML First

Source: Internet
Author: User
Tags compact tidy

XHTML is a stricter and purer HTML code.

What is XHTML?
    • XHTML refers to the Extensible Hypertext Label Language (extensible Hypertext Markup Language).
    • The goal of XHTML is to replace HTML.
    • XHTML is almost identical to HTML 4.01.
    • XHTML is a more rigorous and pure HTML version.
    • XHTML is the HTML that is redefined as an XML application.
    • XHTML is a standard.
Knowledge that should be mastered before

Before continuing with this tutorial, you should have a basic understanding of the following knowledge:

    • Html
    • Basic knowledge of website building.
XHTML is a standard

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 browsers

XHTML 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 can be read by all XML-enabled devices, and XHTML allows us to write well-structured documents that work well with all browsers and are backwards compatible before the rest of the browsers are upgraded to XML support. How to prepare for XHTML

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:
    • XHTML elements must be nested correctly.
    • XHTML elements must be closed.
    • The label name must be in lowercase letters.
    • The XHTML document must have a root element.
Elements must be nested correctly

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 closed

A non-empty label must use the end tag.

This is wrong:

<p>This is a paragraph <p> another paragraph

That's right:

<p>This is a paragraph </p> <p> another paragraph</p>
Empty tags must also be closed

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:

<body><p>This is a paragraph</p></body>
An XHTML document must have a root element

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
    • 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
Property names must be lowercase

This is wrong:

WIDTH= "100%" >

That's right:

width= "100%" >
Attribute values must be quoted

This is wrong:

<table width= 100% >

That's right:

<table width= "100%" >
Attribute cannot be abbreviated

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:

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"
Replace the name attribute with the id attribute

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:

id= "Picture1"/>
Important Compatibility Tips:

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:

lang="no" xml:lang="no">heia norge!</div>
Forced use of XHTML elements

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 XHTML

This 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 declarations
 
      
    • 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.
There are three types of XHTML documents:
    • STRICT (Strict type)
    • Transitional (Transition type)
    • FRAMESET (frame type)
Three types of XML documents for XHTML 1.0

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 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 ">

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 declaration

If 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 names

Because 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 marks

Since 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 site

After 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 DTDs

XHTML 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_getCurrentPosition

Then I want to say: no more tete!!!

Check out XHTML First

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.