XHTML Code Rules & manual HTML conversion xhtml

Source: Internet
Author: User
Tags closing tag compact dashed line xml cdata

XHTML rules

XHTML is an application of XML that adheres to the specifications and requirements of XML. Technically speaking. These syntax rules are defined by the XML specification.

The rules that XML documents must follow make it easier to build tools to parse documents. These rules also make XML easier to handle. The rules are simple, and people who have used HTML should be more familiar with some of the rules. We define the XML rules as the following two classes:

  the XML grammatical rules refer to the rules that define the basic grammar requirements.

∷xml document rules , which refer to rules that govern the requirements of a basic document.

XHTML Grammar rules

The many grammatical rules that XHTML needs to follow are much stricter than the rules that HTML documents need to follow. Therefore, each rule example that follows is accompanied by an HTML example that uses HTML syntax and an XHTML example that follows the rules defined in each section.

1. All marks must have a corresponding closing tag

Previously in HTML, you could open many tags, such as <p> and <li> without necessarily writing the corresponding </p> and </li> to close them. But it's not legal in XHTML. XHTML requires a rigorous structure, and all tags must be closed. If the label is not paired individually, close it by adding a "/" to the label at the end. For example:

<BR/>

2. the names of all the elements and attributes of the tag must be in lowercase

Unlike HTML, XHTML is sensitive to capitalization,<title> and <TITLE> are different labels. XHTML requires that all labels and attribute names must be lowercase. For example:<body> must be written in <body>. Uppercase and lowercase inclusions are also not recognized, and typically Dreamweaver automatically generates attribute names "OnMouseOver" that must also be modified to "OnMouseOver".

3. all XHTML tags must be properly nested

Also because XHTML requires a rigorous structure, all of the nesting must be in order, as we have previously written code:
<p><b></p>/b> must be modified to:<p><b></b>/p>
That is, a layer of nesting must be strictly symmetric.

4. All attributes must be enclosed in quotation marks ""

In HTML, you don't need to quote attribute values, but in XHTML they must be quoted. For example:

In special cases, you need to use double quotation marks in the attribute values, you can use ", single quotes can be used &apos, for example:

<alt= "say&apos;hello&apos;" >

5. encode All < and & special Symbols

Any less than sign (<), not part of the label, must be encoded as &LT;
Any greater than sign (>), not part of the label, must be encoded as &GT;
Any number (&), not part of the entity, must be encoded as &amp;

6. Assign a value to all attributes

XHTML specifies that all properties must have a value, repeating itself without a value. For example:

<TD nowrap>
<input type= "checkbox" name= "Shirt" value= "Medium" checked>
Must be modified to:

<TD nowrap= "nowrap" >
<input type= "checkbox" name= "Shirt" value= "Medium" checked= "checked" >

7. do not make "--" in the comment content

"--" can only occur at the beginning and end of XHTML annotations, i.e. they are no longer valid in content. For example, the following code is invalid:

<!--here is the comment-----------here is the comment--
Replace the inner dashed line with an equal sign or a space.

<!--here is the comment = = = = = = = = = = = = = Here is the comment--

Some of these specifications look strange, but all of this is to make our code a uniform, unique standard that is easy to identify.

XHTML Document rules
There are a handful of document rules that govern well-formed XML documents. We also define some optional rules and recommend compliance, but this is not necessary.










put HTML converted into XHTML

1 . Convert documents manually

If you update a limited number of documents and you are reluctant to have some XHTML experience, you will choose to manually convert HTML pages into XHTML. Now there are very good free tools (HTML Tidy, which will be discussed in detail below) to help you finish. However, it is important to understand what the tool has done in order to use the customization options in it.

Backwards compatibility

XHTML remains backwards compatible with older browsers. You should remember that XHTML uses the HTML vocabulary, and only syntax management is a real barrier to preventing XHTML from being compatible with older browsers. Fortunately, XML syntax is very close to SGML (and hence HTML), so there is little difference in syntax.

Above, you have explained all the specifications that XHTML documents must follow, most of which are already defined by HTML. Additional cases, such as all elements must be closed and the rules of the empty element, are new

When using empty element syntax for XML, add a space before the trailing slash (/), such as <br/>.

Most older browsers will put the XML declaration

<?xml version= "1.O" encoding= "HTF-8" standlone= "no"?>

As content is displayed, it is best to omit XHTML documents that will be seen by older browsers. If you omit the XML declaration from the document, the document can only be encoded using UTF-8 or UTF-16 characters.

Use external styles or script documents instead of embedding them in the head of your XHTML document. Before the XHML code, Web developers can use HTML annotations to hide scripts and style statements from being seen by older browsers. XHTML uses an XML CDATA section to identify internal scripts and style sheet syntax.

Old-fashioned and modern processors are likely to clash. If you do not use an external script or style sheet, you should ensure that the inner statement does not contain <.&.}] > or--。

To add a wrap or multiple whitespace to a property value or. Many XML developers use wrapping to help provide document readability, but the browser does not unify whitespace processing, and multiple whitespace characters can cause problems when displaying XHTML documents. If you want to use whitespace characters to improve readability, make sure you use these whitespace characters only between elements.

Use the name and ID property when referencing a segment qualifier starting with the pound sterling (#value). The Name property was originally used to refer to the named Anchor Point (anchor), but HTML4 was not in favor of using this property, and the id attribute was introduced to replace it to uniquely identify the given element. To ensure future compatibility, you want to use the id attribute, but because many current browsers and older browsers do not support this property, you also use the Name property. For example:

<a name= "One" id= "one" >...</a>

Also, to maintain forward and backward compatibility, use both the Lang and Xml:lang properties to define the language of a given element. The Xml:lang property takes precedence over the lang attribute.

Rules

As an application of XML, XHTML requires adherence to the syntax requirements of XML. The detailed rules have been mentioned earlier.

Close all elements;

Use the correct null element syntax;

All attribute values must be in quotation marks;

Assigning values to all attributes;

the element and attribute names are lowercase. XHTML is case-sensitive;

Elements should be nested correctly;

contains a a DOCTYPE Statement

If you persist in using one of the XHTML1 DTDs, you cannot use the HTML4 DTD reference. When you convert your documents from HTML to XHTML, be sure to use the correct DOCTYPE declaration.


XHTML provides three types of DTD declarations to choose from:

Transition (Transitional):

Requires a very liberal DTD, which allows you to continue using the html4.01 's identity (but to conform to XHTML notation). The complete code is as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en"

"Http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd" >

Strict (Strict):
With strict DTD requirements, you cannot use any of the presentation layer's identities and attributes, such as <br>. The complete code is as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en"
"Http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd" >

Framework (FRAMESET):
The DTD is used specifically for frame page design, and if your page contains frames, you need to use this DTD. The complete code is as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 frameset//en" Http://www.w3.org/tr/xhtml1/dtd/xhtml1-frameset.dtd ">

Add XHTML name space:
XHTML uses XML namespaces to help uniquely identify elements and attribute sets. This approach is especially handy when planning to mix (nest) and use other XML vocabularies. According to the XHTML specification, all XHTML documents must use the default XHTML specification, and all XHTML documents must use the default XHTML namespace (xmlns= "http://www.w3.org/1999/xhtml"). This namespace is required and must be defined in the HTML start flag.

Comprehensive application

The following list is not a well-formed XHTML document, and we will convert it into a well-formed XHTML document.


Non-rigorous HTML document

<HTML>

<HEAD>

<title>sloppy html</title>

</HEAD>

<BODY>

<p><font Color=red>elements provide the structure that holds your document together.</font>

<BR>

<ol compact>

<li>close all elements.

<li>empty elements should follow empty-element Syntax,and besure to add the white space for backward compatibility.

<li>convert all stand-alone attributes to attributes with values.

<li>add quotation marks to all attribute values.

<li>convert all uppercase element and cttribute names to lowercase.

<li>use the appropriate DOCTYPE declaration.

<li>add the XHTML namespace to the HTML start tag.

<li>make sure you comply with any backward-compatible steps defined in the section "Backward compatibility."

</OL>

</BODY>

</HTML>

Follow these steps to change the above document to have a good composition:

1. Close all elements. Note that both the P element and the list item element (LI) do not have a close flag, so you should add the P and Li flags that identify the off.

<p><font Color=red>elements provide the structure that holds your document together.</font></p >

<BR>

<ol compact>

<li>close all elements. </LI>

<li>empty elements should follow empty-element Syntax,and besure to add the white space for backward compatibility.< c0> </LI>

<li>convert all stand-alone attributes to attributes with values. </LI>

<li>add quotation marks to all attribute values. </LI>

<li>convert all uppercase element and cttribute names to lowercase. </LI>

<li>use the appropriate DOCTYPE declaration. </LI>

<li>add the XHTML namespace to the HTML start tag. </LI>

<li>make sure you comply with any backward-compatible steps defined in the section "Backward compatibility." </LI>

</OL>

2. Empty elements should be the most empty element syntax, and be sure to include the necessary spaces to maintain backward compatibility. The BR element is the only empty element in the document above, so it should be changed to <br/>.

3. Convert all independent attributes to attributes with values. Change the COMPACT to Compact=compact.

4. Enclose all attribute values in quotation marks.

<p><font color= "RED" >elements provide the structure that holds your document together.</font></p >

<BR>

<ol compact= "COMPACT" >

5. Convert all uppercase and attribute names (and attribute values) to lowercase.

<title>sloppy html</title>

<body>

<p><font color= "Red" > Elements provide the structure that holds your document together.</font></p >

<br/>

<ol compact= "compact" >

<li> Close All elements.</li>

<li> Empty elements should follow empty-element Syntax,and besure to add the white space for backward compatibility. </li>

<li> Convert all stand-alone attributes to attributes with Values.</li>..

6. Use the correct DOCTYPE statement. We will use the transition type (transitional) DTD:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en"

"Http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd" >

7. Add the XHTML namespace to the HTML start flag.




The last code to get is as follows:

simple. XHTML Document

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en"

"Http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd" >

<title>sloppy html</title>

<body>

<p><font color= "Red" > Elements provide the structure that holds your document together.</font></p >

<br/>

<ol compact= "compact" >

<li> Close All elements.</li>

<li> Empty elements should follow empty-element Syntax,and besure to add the white space for backward compatibility. </li>

<li> Convert all stand-alone attributes to attributes with

Values.</li>

<li> ADD quotation marks to all attribute values.</li>

<li>convert all uppercase element and Cttribute names to lowercase.</li>

<li>use the appropriate DOCTYPE declaration.</li>

<li>add the XHTML namespace to the HTML start tag.</li>

<li>make sure you comply with any backward-compatible steps defined in the section "Backward compatibility." </li>

<ol>

</body>

In this list, the markup is indented. You can make the markup easier to read.

Category: JavaScript and HTML

XHTML Code Rules & manual HTML conversion xhtml

Related Article

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.