Hello Friends..Welcome again.
Today Igot for you amazing topic for the learning that is, HTML vs XHTML. People generally get confuse with these two Web Development Languages.
I hope this presentation will help you in understanding the difference between both the languages.
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
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
