SlideShare a Scribd company logo
1 of 39
XHTMLEXtensibleHyperText Markup Language Md. Shajed E Islam
XHTML … stands for EXtensibleHyperText Markup Language is almost identical to HTML 4.01 is a stricterand cleanerversion of HTML Combination of XML and HTML Tags from HTML Rule from XML
WHY XHTML?
Industry standards Cross browsers support Validated Different device browsers support (like iphone, pda, mobile etc.)
XHTML structure One root element per document Properly nested elements Close elements Lowercase elements
Many pages on the internet contain "bad" HTML. <html> <head> <title>This is bad HTML</title> <body> <h1>Bad HTML <p>This is a paragraph </body>
XHTML vs HTML
XHTML Elements Must Be Properly Nested <b><i>This text is bold and italic</b></i> <b><i>This text is bold and italic</i></b>
XHTML Elements Must Always Be Closed <p>This is a paragraph <p>This is another paragraph <p>This is a paragraph</p> <p>This is another paragraph</p>
Empty Elements Must Also Be Closed A break: <br> A horizontal rule: <hr> An image: <imgsrc="happy.gif"alt="Happy face"> A break: <br/> A horizontal rule: <hr/> An image: <imgsrc="happy.gif"alt="Happy face"/>
XHTML Elements Must Be In Lower Case <BODY> <P>This is a paragraph</P> </BODY> <body> <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. <html> <head> ... </head> <body> ... </body> </html>
Block or Inline?
All elements belongs to either Block or Inline Block - p, div, table Inline - span, b/strong, i/em, u, img, a Block CANNOT be inside Inline <em><p>content</p></em>  X
Common Attributes
Core Attributes i18n Attributes (Internationalization) Event Attributes (Count characters between i and n)
Core Attributes id - unique identifier class - assign type title - add more information, show tooltip style - inject inline style
i18n Attributes dir - content direction ltr, trl xml:lang - en, de Just forget it!
Event Attributes onclick ondbclick onmouseoever onmouseout onkeypress etc...
XHTML Syntax Rules
Attribute Names Must Be In Lower Case <tableWIDTH="100%"> <tablewidth="100%">
Attribute Values Must Be Quoted <tablewidth=100%> <tablewidth="100%">
Attribute Minimization Is Forbidden <inputchecked> <inputreadonly> <inputdisabled> <optionselected> <framenoresize> <inputchecked="checked"/> <inputreadonly="readonly"/> <inputdisabled="disabled"/> <optionselected="selected"/> <framenoresize="noresize"/>
list of the minimized attributes
Mandatory XHTML Elements All XHTML documents must have a DOCTYPE declaration. The html, head, title, and body elements must be present. This is an XHTML document with a minimum of required tags: <!DOCTYPE Doctype goes here> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <title>Title goes here</title> </head> <body> </body> </html>
XHTML DTD
<!DOCTYPE> Is Mandatory An XHTML document consists of three main parts: the DOCTYPE declaration the <head> section the <body> section <!DOCTYPE ...> <html> <head> <title>... </title> </head> <body> ... </body> </html>
An XHTML Example <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>simple document</title> </head> <body> <p>a simple paragraph</p> </body> </html>
Document Type Definitions (DTD) A DTD specifies the syntax of a web page in SGML DTDs are used by SGML applications, such as HTML, to specify rules for documents of a particular type, including a set of elements and entity declarations An XHTML DTD describes in precise, computer-readable language, the allowed syntax of XHTML markup
XHTML 1.0 Strict Use the strict DOCTYPE when you want really clean markup, free of presentational clutter. Use it together with CSS <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional Use the transitional DOCTYPE when you want to still use HTML's presentational features. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset Use the frameset DOCTYPE when you want to use HTML frames. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
SEO - XHTML For Titles, Descriptions and Metatags
The TITLE tagExample: <TITLE>Speedy SEO Services Company</TITLE> The DESCRIPTION meta tagExample: <META NAME="description" CONTENT=" SEO Services for home based and big businesses." > The KEYWORDS meta tag Example: <META NAME="keywords" CONTENT=“bglobal, web design, web development, cms, php, etc.">
Meta Tags Explained
Meta Authornot supported by the major search engines like Google, Yahoo or MSN. Meta Content LanguageSome search engine robots use this meta tag to categorize your webpage by language. Meta Content Type<meta http-equiv="Content-Type" content="content type, text or html"> Meta Description Meta Keywords Meta Title
Reference http://www.w3schools.com/xhtml
Thanks
Thanks

More Related Content

What's hot (20)

Computer fundamentals-internet p2
Computer fundamentals-internet p2Computer fundamentals-internet p2
Computer fundamentals-internet p2
 
HTML & Textile Training
HTML & Textile TrainingHTML & Textile Training
HTML & Textile Training
 
Intr To Html & Xhtml
Intr To Html & XhtmlIntr To Html & Xhtml
Intr To Html & Xhtml
 
Html for Beginners
Html for BeginnersHtml for Beginners
Html for Beginners
 
XML
XMLXML
XML
 
Design Tools Html Xhtml
Design Tools Html XhtmlDesign Tools Html Xhtml
Design Tools Html Xhtml
 
CSS
CSSCSS
CSS
 
Html Intro2
Html Intro2Html Intro2
Html Intro2
 
215077679 introduction to HTML
215077679  introduction to HTML215077679  introduction to HTML
215077679 introduction to HTML
 
YL basic tag
YL basic tagYL basic tag
YL basic tag
 
01 Xml Begin
01 Xml Begin01 Xml Begin
01 Xml Begin
 
Introduction to XML
Introduction to XMLIntroduction to XML
Introduction to XML
 
Xhtml
XhtmlXhtml
Xhtml
 
Xml ppt
Xml pptXml ppt
Xml ppt
 
Xml tutorial
Xml tutorialXml tutorial
Xml tutorial
 
Understanding html
Understanding htmlUnderstanding html
Understanding html
 
1.2 elements and attributes copy (3)
1.2 elements and attributes   copy (3)1.2 elements and attributes   copy (3)
1.2 elements and attributes copy (3)
 
Xml
XmlXml
Xml
 
Week1 xml
Week1 xmlWeek1 xml
Week1 xml
 
Html basic
Html basicHtml basic
Html basic
 

Similar to Xhtml

Similar to Xhtml (20)

HTML Fundamentals
HTML FundamentalsHTML Fundamentals
HTML Fundamentals
 
1.1 xhtml basics
1.1 xhtml basics1.1 xhtml basics
1.1 xhtml basics
 
Learning HTML
Learning HTMLLearning HTML
Learning HTML
 
Html
HtmlHtml
Html
 
Diva
DivaDiva
Diva
 
Html guide
Html guideHtml guide
Html guide
 
HTML to FTP
HTML to FTPHTML to FTP
HTML to FTP
 
Html part2
Html part2Html part2
Html part2
 
Html part2 (1)
Html part2 (1)Html part2 (1)
Html part2 (1)
 
Tor2
Tor2Tor2
Tor2
 
1.2 elements and attributes copy (3)
1.2 elements and attributes   copy (3)1.2 elements and attributes   copy (3)
1.2 elements and attributes copy (3)
 
Xml Zoe
Xml ZoeXml Zoe
Xml Zoe
 
Xml Zoe
Xml ZoeXml Zoe
Xml Zoe
 
Html
HtmlHtml
Html
 
How an html file is structured
How an html file is structuredHow an html file is structured
How an html file is structured
 
HTML_Slideshow1
HTML_Slideshow1HTML_Slideshow1
HTML_Slideshow1
 
Html ppt
Html pptHtml ppt
Html ppt
 
XHTML basics
XHTML basicsXHTML basics
XHTML basics
 
How To Create Personal Web Pages On My Web
How To Create Personal Web Pages On My WebHow To Create Personal Web Pages On My Web
How To Create Personal Web Pages On My Web
 
Xhtml
XhtmlXhtml
Xhtml
 

Xhtml

  • 2. XHTML … stands for EXtensibleHyperText Markup Language is almost identical to HTML 4.01 is a stricterand cleanerversion of HTML Combination of XML and HTML Tags from HTML Rule from XML
  • 4. Industry standards Cross browsers support Validated Different device browsers support (like iphone, pda, mobile etc.)
  • 5. XHTML structure One root element per document Properly nested elements Close elements Lowercase elements
  • 6. Many pages on the internet contain "bad" HTML. <html> <head> <title>This is bad HTML</title> <body> <h1>Bad HTML <p>This is a paragraph </body>
  • 8. XHTML Elements Must Be Properly Nested <b><i>This text is bold and italic</b></i> <b><i>This text is bold and italic</i></b>
  • 9. XHTML Elements Must Always Be Closed <p>This is a paragraph <p>This is another paragraph <p>This is a paragraph</p> <p>This is another paragraph</p>
  • 10. Empty Elements Must Also Be Closed A break: <br> A horizontal rule: <hr> An image: <imgsrc="happy.gif"alt="Happy face"> A break: <br/> A horizontal rule: <hr/> An image: <imgsrc="happy.gif"alt="Happy face"/>
  • 11. XHTML Elements Must Be In Lower Case <BODY> <P>This is a paragraph</P> </BODY> <body> <p>This is a paragraph</p> </body>
  • 12. 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. <html> <head> ... </head> <body> ... </body> </html>
  • 14. All elements belongs to either Block or Inline Block - p, div, table Inline - span, b/strong, i/em, u, img, a Block CANNOT be inside Inline <em><p>content</p></em> X
  • 16. Core Attributes i18n Attributes (Internationalization) Event Attributes (Count characters between i and n)
  • 17. Core Attributes id - unique identifier class - assign type title - add more information, show tooltip style - inject inline style
  • 18. i18n Attributes dir - content direction ltr, trl xml:lang - en, de Just forget it!
  • 19. Event Attributes onclick ondbclick onmouseoever onmouseout onkeypress etc...
  • 21. Attribute Names Must Be In Lower Case <tableWIDTH="100%"> <tablewidth="100%">
  • 22. Attribute Values Must Be Quoted <tablewidth=100%> <tablewidth="100%">
  • 23. Attribute Minimization Is Forbidden <inputchecked> <inputreadonly> <inputdisabled> <optionselected> <framenoresize> <inputchecked="checked"/> <inputreadonly="readonly"/> <inputdisabled="disabled"/> <optionselected="selected"/> <framenoresize="noresize"/>
  • 24. list of the minimized attributes
  • 25. Mandatory XHTML Elements All XHTML documents must have a DOCTYPE declaration. The html, head, title, and body elements must be present. This is an XHTML document with a minimum of required tags: <!DOCTYPE Doctype goes here> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <title>Title goes here</title> </head> <body> </body> </html>
  • 27. <!DOCTYPE> Is Mandatory An XHTML document consists of three main parts: the DOCTYPE declaration the <head> section the <body> section <!DOCTYPE ...> <html> <head> <title>... </title> </head> <body> ... </body> </html>
  • 28. An XHTML Example <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>simple document</title> </head> <body> <p>a simple paragraph</p> </body> </html>
  • 29. Document Type Definitions (DTD) A DTD specifies the syntax of a web page in SGML DTDs are used by SGML applications, such as HTML, to specify rules for documents of a particular type, including a set of elements and entity declarations An XHTML DTD describes in precise, computer-readable language, the allowed syntax of XHTML markup
  • 30. XHTML 1.0 Strict Use the strict DOCTYPE when you want really clean markup, free of presentational clutter. Use it together with CSS <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • 31. XHTML 1.0 Transitional Use the transitional DOCTYPE when you want to still use HTML's presentational features. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • 32. XHTML 1.0 Frameset Use the frameset DOCTYPE when you want to use HTML frames. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
  • 33. SEO - XHTML For Titles, Descriptions and Metatags
  • 34. The TITLE tagExample: <TITLE>Speedy SEO Services Company</TITLE> The DESCRIPTION meta tagExample: <META NAME="description" CONTENT=" SEO Services for home based and big businesses." > The KEYWORDS meta tag Example: <META NAME="keywords" CONTENT=“bglobal, web design, web development, cms, php, etc.">
  • 36. Meta Authornot supported by the major search engines like Google, Yahoo or MSN. Meta Content LanguageSome search engine robots use this meta tag to categorize your webpage by language. Meta Content Type<meta http-equiv="Content-Type" content="content type, text or html"> Meta Description Meta Keywords Meta Title

Editor's Notes

  1. Note: The DOCTYPE declaration is not a part of the XHTML document itself. It is not an XHTML element. You will learn more about the XHTML DOCTYPE in the next chapter.Note: The xmlns attribute in &lt;html&gt;, specifies the xml namespace for a document, and is required in XHTML documents. However, the HTML validator at w3.org does not complain when the xmlns attribute is missing. This is because the namespace &quot;xmlns=http://www.w3.org/1999/xhtml&quot; is default, and will be added to the &lt;html&gt; tag even if you do not include it.
  2. Note: The DOCTYPE declaration is not a part of the XHTML document itself. It is not an XHTML element. You will learn more about the XHTML DOCTYPE in the next chapter.Note: The xmlns attribute in &lt;html&gt;, specifies the xml namespace for a document, and is required in XHTML documents. However, the HTML validator at w3.org does not complain when the xmlns attribute is missing. This is because the namespace &quot;xmlns=http://www.w3.org/1999/xhtml&quot; is default, and will be added to the &lt;html&gt; tag even if you do not include it.
  3. Note: The DOCTYPE declaration is not a part of the XHTML document itself. It is not an XHTML element. You will learn more about the XHTML DOCTYPE in the next chapter.Note: The xmlns attribute in &lt;html&gt;, specifies the xml namespace for a document, and is required in XHTML documents. However, the HTML validator at w3.org does not complain when the xmlns attribute is missing. This is because the namespace &quot;xmlns=http://www.w3.org/1999/xhtml&quot; is default, and will be added to the &lt;html&gt; tag even if you do not include it.
  4. Note: The DOCTYPE declaration is not a part of the XHTML document itself. It is not an XHTML element. You will learn more about the XHTML DOCTYPE in the next chapter.Note: The xmlns attribute in &lt;html&gt;, specifies the xml namespace for a document, and is required in XHTML documents. However, the HTML validator at w3.org does not complain when the xmlns attribute is missing. This is because the namespace &quot;xmlns=http://www.w3.org/1999/xhtml&quot; is default, and will be added to the &lt;html&gt; tag even if you do not include it.
  5. Note: The DOCTYPE declaration is not a part of the XHTML document itself. It is not an XHTML element. You will learn more about the XHTML DOCTYPE in the next chapter.Note: The xmlns attribute in &lt;html&gt;, specifies the xml namespace for a document, and is required in XHTML documents. However, the HTML validator at w3.org does not complain when the xmlns attribute is missing. This is because the namespace &quot;xmlns=http://www.w3.org/1999/xhtml&quot; is default, and will be added to the &lt;html&gt; tag even if you do not include it.
  6. Note: The DOCTYPE declaration is not a part of the XHTML document itself. It is not an XHTML element. You will learn more about the XHTML DOCTYPE in the next chapter.Note: The xmlns attribute in &lt;html&gt;, specifies the xml namespace for a document, and is required in XHTML documents. However, the HTML validator at w3.org does not complain when the xmlns attribute is missing. This is because the namespace &quot;xmlns=http://www.w3.org/1999/xhtml&quot; is default, and will be added to the &lt;html&gt; tag even if you do not include it.
  7. Note: The DOCTYPE declaration is not a part of the XHTML document itself. It is not an XHTML element. You will learn more about the XHTML DOCTYPE in the next chapter.Note: The xmlns attribute in &lt;html&gt;, specifies the xml namespace for a document, and is required in XHTML documents. However, the HTML validator at w3.org does not complain when the xmlns attribute is missing. This is because the namespace &quot;xmlns=http://www.w3.org/1999/xhtml&quot; is default, and will be added to the &lt;html&gt; tag even if you do not include it.