Html vs xhtml
- 1. HTML VS XHTML 24-09-2018 1 • Yastee A. Shah By: • Web Technology Subject:
- 2. 2
- 3. WHAT ARE MARKUP LANGUAGES? • Markup languages are the foundation of the web-where it all started, when websites were just static pages with text and a little formatting. • Essentially, everything you see on the web is a combination of markup (text), cascading style sheets or CSS (design), and front-end scripts (interactivity). That markup, made possible by HTML, is what creates a site’s foundation. 24-09-2018 3 *https://html.com/
- 4. HTML • HTML was the first Internet-based language developed strictly for the web. Anything displayed in a browser is organized via HTML. • Structure 24-09-2018 4
- 5. XHTML (eXtensible Hypertext Markup Language) • XHTML is essentially identical to HTML4 (the fourth iteration of HTML), but with elements of XML that extend HTML’s capabilities. 24-09-2018 5 *https://developer.mozilla.org/en-US/docs/Learn/HTML
- 6. In summary… • HTML came along first, XHTML was designed to fix problems with HTML. • They’re all mark up languages that provide structure and organization to the content of webpages and applications, but their relevance has shifted as newer versions of HTML have evolved, rising to the challenges of mobile demands, responsive design, and developers who want to accomplish more with less. 24-09-2018 6
- 7. The Most Important Differences from HTML: Document Structure • XHTML DOCTYPE is mandatory • The xmls attribute in <html> is mandatory • <html>, <head>, <title>, and <body> are mandatory <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Title of document</title> </head> <body> some content </body> </html> 24-09-2018 7
- 8. XHTML Elements • XHTML elements must be properly nested. • XHTML elements must be always be closed • XHTML elements must be in lowercase • XHTML documents must have one root element <html> <head> <title>This is bad HTML</title> <body> <h1>Bad HTML <p>This is a paragraph </body> 24-09-2018 8
- 9. XHTML Elements Must Always Be Closed This is wrong: <p>This is a paragraph <p>This is another paragraph This is correct: <p>This is a paragraph</p> <p>This is another paragraph</p> Empty Elements Must Also Be Closed This is wrong: A break: <br> A horizontal rule: <hr> An image: <img src="happy.gif" alt="Happy face"> This is correct: A break: <br /> A horizontal rule: <hr /> An image: <img src="happy.gif" alt="Happy face" /> 24-09-2018 9
- 10. XHTML Attributes • Attribute names must be in lower case • Attribute values must be quoted • Attribute minimization is forbidden 24-09-2018 10 *http://www.htmldog.com/guides/
- 11. XHTML Attribute Names Must Be In Lower Case This is wrong: <table WIDTH="100%"> Attribute Values Must Be Quoted This is wrong: <table width=100%> XHTML Elements Must Be In Lower Case This is wrong: <BODY> <P>This is a paragraph</P> </BODY> This is correct: <table width="100%"> This is correct: <table width="100%"> This is correct: <body> <p>This is a paragraph</p> </body> 24-09-2018 11
- 12. • Attribute Minimization Is Forbidden Wrong: <input type="checkbox" name="vehicle" value="car" checked /> Correct: <input type="checkbox" name="vehicle" value="car" checked="checked"/> Wrong: <input type="text" name="lastname" disabled /> Correct: <input type="text" name="lastname" disabled="disabled" /> 24-09-2018 12
- 14. HTML XHTML Introduction Main markup language for creating web pages and other information that can be displayed in a web browser. Family of XML markup languages that extend versions of HTML. Filename extension .html, .htm .xhtml, .xht, .xml, .html, .htm Internet media type text/html application/xhtml+xml Type of format Document file format Markup language Stands for HyperText Markup Language Extensible HyperText Markup Language 14
- 15. HTML XHTML Application Application of Standard Generalized Markup Language (SGML). Application ofXML Function Web pages are written in HTML. Extended version of HTML that is stricter and XML-based. Nature Flexible framework requiring purely HTML specific. Restrictive subset of XML and needs to be parsed with standard XML parsers. Origin Proposed byTim Berners-Lee in 1987. WorldWideWeb Consortium Recommendation in 2000. Versions HTML 2, HTML 3.2, HTML 4.0, HTML 5. XHTML 1, XHTML 1.1, XHTML 2, XHTML 5.15
- 16. Features of HTML vs XHTML documents • HTML documents are composed of elements that have three components- 1. start tag 2.end tag; element attributes given within tags and actual, textual and graphic content 3.including tags. (Tag is a keyword which is enclosed within angle brackets). • XHTML documents has only one root element. • All elements including variables must be in lower case, and values assigned must be surrounded by quotes, closed and nested for being recognized. 24-09-2018 16 *https://www.codecademy.com/learn/learn-html
- 17. • The declaration of DOCTYPE would determine rules for documents to follow. • The underlying syntax of HTML allows many shortcuts that XHTML does not, such as elements with optional opening or closing tags, and even EMPTY elements which must not have an end tag. • XHTML requires all elements to have an opening tag or a closing tag. XHTML, however, also introduces a new shortcut: an XHTML • Tag may be opened and closed within the same tag, by including a slash before the end of the tag like this: <br/>. A fix for this is to include a space before closing the tag, as such: <br />. 24-09-2018 17
- 18. How to Convert from HTML to XHTML • Add an XHTML <!DOCTYPE> to the first line of every page • Add an xmlns attribute to the html element of every page • Include xml:lang and lang attributes on elements assigning language. • Change all element and attribute names to lowercase • Close all empty elements • Include close tags for elements that can have content but are empty: <html></html> • Include an extra space in empty-element tags: <html /> • Quote all attribute values • Do not include XML declaration. 24-09-2018 18
- 19. 24-09-2018 19 It is actually pretty easy. You just have to: •Change your DOCTYPE •Change Some Meta Tags •Close all your tags properly •Surround inline tags with block tags •Eliminate the use of a few tags •Leave the styling to Cascading Style Sheets
- 20. How to migrate from XHTML to HTML • The language for an element should be specified with a lang attribute rather than the XHTML xml:lang attribute. • Remove the XML namespace (xmlns=URI). HTML has no facilities for namespaces. • Change the document type declaration from XHTML to HTML. • If present, remove the XML declaration. (Typically this is: <?xml version="1.0"?>). • Change the XML empty-element syntax to an HTML style empty element (<br/> to <br>). 24-09-2018 20
- 21. 21 24-09-2018