HTML is the foundational markup language for the web, while XHTML is an XML-based evolution of HTML that enforces stricter syntax rules. Key differences include mandatory document structure and case-sensitivity in XHTML, which requires all elements to be closed and attributes to be quoted. As web standards have evolved, the relevance of HTML and XHTML has shifted, with newer HTML versions addressing mobile and responsive design needs.
WHAT ARE MARKUPLANGUAGES?
• 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 wasthe 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 HypertextMarkup
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…
• HTMLcame 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 ImportantDifferences 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
• XHTMLelements 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 MustAlways 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
• Attributenames 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 NamesMust 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
HTML XHTML
Introduction Mainmarkup 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 Applicationof 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 HTMLvs 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 declarationof 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 Convertfrom 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 actuallypretty 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 migratefrom 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