A website can be converted from HTML to XHTML by applying following 6 simple steps.
1. Add a <!DOCTYPE> :
Add an XHTML <!DOCTYPE> to the first line of every page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. Add an xmlns Attribute :
Add an xmlns attribute to the html element of every page.
<html xmlns="http://www.w3.org/1999/xhtml">
3. Change Tags And Attribute Names to Lowercase :
Replace all uppercase tags and attributes with lowercase tags and attributes respectively.
4. Quote All Attribute Values :
In every page, make sure that attribute values are quoted.
5. Close all Empty Tags :
Empty tags are not allowed in XHTML. The <hr> and <br> tags should be replaced with <hr /> and <br/>.
6. Validate XHTML With The W3C Validator :
Before an XHTML file can be validated, a correct DTD must be added as the first line of the file. Validate the document by url here, http://validator.w3.org/ .
Correct errors if any found.
<< HTML Advanced tutorial 30 : XHTML Doctypes
Wednesday, May 2, 2012
HTML Advanced tutorial 30 : XHTML Doctypes
The <!DOCTYPE> declaration refers to a Document Type Definition (DTD). The DTD specifies the rules for the markup language, so that the browsers render the content correctly. XHTML document consists of three main parts, DOCTYPE declaration, the <head> section, and the <body> section. The basic XHTML document consists of following structure.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> title here </title>
</head>
<body>
</body>
</html>
The xmlns attribute in <html>, specifies the xml namespace for a document, and is required in XHTML documents.
Different types of Doctypes :
The <!DOCTYPE> declaration is the very first thing in an XHTML document, before the <html> tag. The <!DOCTYPE> declaration is not an XHTML tag; it is an instruction to the web browser about what version of the markup language the page is written in.
XHTML 1.0 Strict :
This DTD contains all html elements and attributes, but does not include presentational or deprecated elements e.g font etc. Framesets are not allowed. The markup must also be written as well-formed XML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional :
This DTD contains all html elements and attributes, including presentational and deprecated elements. Framesets are not allowed. The markup must also be written as well-formed XML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset :
This Document Type is equal to XHTML 1.0 Transitional, but allows the use of frameset content.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1 :
This DTD is equal to XHTML 1.0 Strict, but allows you to add modules, e.g to provide ruby support for East-Asian languages.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
HTML Advanced tutorial 31 : HTML to XHTML >>
<< HTML Advanced tutorial 29 : XHTML Syntax Rules
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> title here </title>
</head>
<body>
</body>
</html>
The xmlns attribute in <html>, specifies the xml namespace for a document, and is required in XHTML documents.
Different types of Doctypes :
The <!DOCTYPE> declaration is the very first thing in an XHTML document, before the <html> tag. The <!DOCTYPE> declaration is not an XHTML tag; it is an instruction to the web browser about what version of the markup language the page is written in.
XHTML 1.0 Strict :
This DTD contains all html elements and attributes, but does not include presentational or deprecated elements e.g font etc. Framesets are not allowed. The markup must also be written as well-formed XML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional :
This DTD contains all html elements and attributes, including presentational and deprecated elements. Framesets are not allowed. The markup must also be written as well-formed XML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset :
This Document Type is equal to XHTML 1.0 Transitional, but allows the use of frameset content.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1 :
This DTD is equal to XHTML 1.0 Strict, but allows you to add modules, e.g to provide ruby support for East-Asian languages.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
HTML Advanced tutorial 31 : HTML to XHTML >>
<< HTML Advanced tutorial 29 : XHTML Syntax Rules
HTML Advanced tutorial 29 : XHTML Syntax Rules
While coding in XHTML, we must take care of following rules to avoid any error.
1.) Attribute Names Must Be In Lower Case :
<table WIDTH="100%"> ( This is wrong way )
<table width="100%"> ( This is correct way )
2.) Attribute Values Must Be Quoted :
<table width=100%> ( This is wrong way )
<table width="100%"> ( This is correct way )
3.) Attribute Minimization Is Forbidden :
<input checked> ( This is wrong way )
<input readonly>
<input disabled>
<input checked="checked" /> ( This is correct way )
<input readonly="readonly" />
<input disabled="disabled" />
4.) The Lang Attribute :
The lang attribute applies to almost every XHTML element. It specifies the language of the content within an element. If you use the lang attribute in an element, then you must also add the xml:lang attribute. For example
<div lang="en" xml:lang="en">Hello word!</div>
5.) Mandatory XHTML Elements :
Following elements are mendatory, in XHTML documents.
- DOCTYPE declaration.
- html, head, title, and body elements.
HTML Advanced tutorial 30 : XHTML Doctypes >>
<< HTML Advanced tutorial 28 : What is XHTML
Tuesday, May 1, 2012
HTML Advanced tutorial 28 : What is XHTML
XHTML stands for EXtensible HyperText Markup Language. It is almost identical
to HTML 4.01. It is a stricter and cleaner version of HTML. It is HTML defined
as an XML application. It is Recommended by W3C. It is supported by all major
browsers.
The following HTML code does not follow the HTML rules, but it will work fine in a browser.
<html>
<head>
<title>bad page</title>
<body>
<h1>Bad h1 element
<p>This is a paragraph
</body>
New in XHTML :
Following are the few differences in XHTML from HTML.
XHTML Elements Must Be Properly Nested :
In HTML, elements can be improperly nested within each other, for example
<b><i>This text is bold as well as italic</b></i>
While using XHTML, all elements must be properly nested within each other e.g ,
<b><i> This text is bold as well as italic </i></b>
XHTML Elements Must Always Be Closed :
In XHTML, non-empty elements must have a closing tag. For example
<p>This is a paragraph ( This is wrong way )
<p>This is a paragraph</p> ( This is correct way )
Empty Elements Must Also Be Closed :
In XHTML, empty elements must also be closed. For example
A line break
<br> ( This is wrong way )
<br /> ( This is correct way )
An image tag
<img src="img.jpg" alt="image"> ( This is wrong way )
<img src="img.jpg" alt="image" /> ( This is correct )
XHTML Elements Must Be In Lower Case :
In XHTML, tag names and attributes must be in lower case. For example
<BODY> ( This is wrong way )
<P>This is a paragraph</P>
</BODY>
<body> ( This is correct way )
<p>This is a paragraph</p>
</body>
XHTML Documents Must Have One Root Element :
All XHTML elements must be nested within the <html> root element. Child elements must be in pairs and correctly nested within their parent element. Following is the basic document structure used.
<html>
<head>
</head>
<body>
</body>
</html>
HTML Advanced tutorial 29 : XHTML Syntax Rules >>
<< HTML Advanced tutorial 27 : HTML Language Code
The following HTML code does not follow the HTML rules, but it will work fine in a browser.
<html>
<head>
<title>bad page</title>
<body>
<h1>Bad h1 element
<p>This is a paragraph
</body>
New in XHTML :
Following are the few differences in XHTML from HTML.
XHTML Elements Must Be Properly Nested :
In HTML, elements can be improperly nested within each other, for example
<b><i>This text is bold as well as italic</b></i>
While using XHTML, all elements must be properly nested within each other e.g ,
<b><i> This text is bold as well as italic </i></b>
XHTML Elements Must Always Be Closed :
In XHTML, non-empty elements must have a closing tag. For example
<p>This is a paragraph ( This is wrong way )
<p>This is a paragraph</p> ( This is correct way )
Empty Elements Must Also Be Closed :
In XHTML, empty elements must also be closed. For example
A line break
<br> ( This is wrong way )
<br /> ( This is correct way )
An image tag
<img src="img.jpg" alt="image"> ( This is wrong way )
<img src="img.jpg" alt="image" /> ( This is correct )
XHTML Elements Must Be In Lower Case :
In XHTML, tag names and attributes must be in lower case. For example
<BODY> ( This is wrong way )
<P>This is a paragraph</P>
</BODY>
<body> ( This is correct way )
<p>This is a paragraph</p>
</body>
XHTML Documents Must Have One Root Element :
All XHTML elements must be nested within the <html> root element. Child elements must be in pairs and correctly nested within their parent element. Following is the basic document structure used.
<html>
<head>
</head>
<body>
</body>
</html>
HTML Advanced tutorial 29 : XHTML Syntax Rules >>
<< HTML Advanced tutorial 27 : HTML Language Code
HTML Advanced tutorial 27 : HTML Language Code
The HTML lang attribute can be used to declare the language of a Web page or a portion of a Web page. This is meant to assist search engines and browsers.W3C recommendation assist that, you should declare the primary language for each Web page with the lang attribute inside the <html> tag. For example
<html lang="en"> </html>
while using XHTML, you have to declare language inside the <html> tag in following way.
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> </html>
Abbreviations :
HTML Advanced tutorial 28 : What is XHTML >>
<< HTML Advanced tutorial 26 : HTTP Status Messages
<html lang="en"> </html>
while using XHTML, you have to declare language inside the <html> tag in following way.
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> </html>
Abbreviations :
Abbreviations for languages defined by ISO 639-1 are as fellow.
| Language | ISO Code |
|---|---|
| Abkhazian | ab |
| Afar | aa |
| Afrikaans | af |
| Albanian | sq |
| Amharic | am |
| Arabic | ar |
| Aragonese | an |
| Armenian | hy |
| Assamese | as |
| Aymara | ay |
| Azerbaijani | az |
| Bashkir | ba |
| Basque | eu |
| Bengali (Bangla) | bn |
| Bhutani | dz |
| Bihari | bh |
| Bislama | bi |
| Breton | br |
| Bulgarian | bg |
| Burmese | my |
| Byelorussian (Belarusian) | be |
| Cambodian | km |
| Catalan | ca |
| Chinese (Simplified) | zh |
| Chinese (Traditional) | zh |
| Corsican | co |
| Croatian | hr |
| Czech | cs |
| Danish | da |
| Dutch | nl |
| English | en |
| Esperanto | eo |
| Estonian | et |
| Faeroese | fo |
| Farsi | fa |
| Fiji | fj |
| Finnish | fi |
| French | fr |
| Frisian | fy |
| Galician | gl |
| Gaelic (Scottish) | gd |
| Gaelic (Manx) | gv |
| Georgian | ka |
| German | de |
| Greek | el |
| Greenlandic | kl |
| Guarani | gn |
| Gujarati | gu |
| Haitian Creole | ht |
| Hausa | ha |
| Hebrew | he, iw |
| Hindi | hi |
| Hungarian | hu |
| Icelandic | is |
| Ido | io |
| Indonesian | id, in |
| Interlingua | ia |
| Interlingue | ie |
| Inuktitut | iu |
| Inupiak | ik |
| Irish | ga |
| Italian | it |
| Japanese | ja |
| Javanese | jv |
| Kannada | kn |
| Kashmiri | ks |
| Kazakh | kk |
| Kinyarwanda (Ruanda) | rw |
| Kirghiz | ky |
| Kirundi (Rundi) | rn |
| Korean | ko |
| Kurdish | ku |
| Laothian | lo |
| Latin | la |
| Latvian (Lettish) | lv |
| Limburgish ( Limburger) | li |
| Lingala | ln |
| Lithuanian | lt |
| Macedonian | mk |
| Malagasy | mg |
| Malay | ms |
| Malayalam | ml |
| Maltese | mt |
| Maori | mi |
| Marathi | mr |
| Moldavian | mo |
| Mongolian | mn |
| Nauru | na |
| Nepali | ne |
| Norwegian | no |
| Occitan | oc |
| Oriya | or |
| Oromo (Afan, Galla) | om |
| Pashto (Pushto) | ps |
| Polish | pl |
| Portuguese | pt |
| Punjabi | pa |
| Quechua | qu |
| Rhaeto-Romance | rm |
| Romanian | ro |
| Russian | ru |
| Samoan | sm |
| Sangro | sg |
| Sanskrit | sa |
| Serbian | sr |
| Serbo-Croatian | sh |
| Sesotho | st |
| Setswana | tn |
| Shona | sn |
| Sichuan Yi | ii |
| Sindhi | sd |
| Sinhalese | si |
| Siswati | ss |
| Slovak | sk |
| Slovenian | sl |
| Somali | so |
| Spanish | es |
| Sundanese | su |
| Swahili (Kiswahili) | sw |
| Swedish | sv |
| Tagalog | tl |
| Tajik | tg |
| Tamil | ta |
| Tatar | tt |
| Telugu | te |
| Thai | th |
| Tibetan | bo |
| Tigrinya | ti |
| Tonga | to |
| Tsonga | ts |
| Turkish | tr |
| Turkmen | tk |
| Twi | tw |
| Uighur | ug |
| Ukrainian | uk |
| Urdu | ur |
| Uzbek | uz |
| Vietnamese | vi |
| Volapük | vo |
| Wallon | wa |
| Welsh | cy |
| Wolof | wo |
| Xhosa | xh |
| Yiddish | yi, ji |
| Yoruba | yo |
| Zulu | zu |
HTML Advanced tutorial 28 : What is XHTML >>
<< HTML Advanced tutorial 26 : HTTP Status Messages
Subscribe to:
Posts (Atom)