Results 1 to 1 of 1

Thread: HTML and XHTML

  1. #1
    Join Date
    Nov 2009
    Posts
    76,596

    Default HTML and XHTML

    XHTML is HTML written as XML.

    What Is XHTML?

    XHTML stands for EXtensible HyperText Markup Language
    XHTML is almost identical to HTML 4.01
    XHTML is a stricter and cleaner version of HTML
    XHTML is HTML defined as an XML application
    XHTML is supported by all major browsers.

    Why XHTML?

    Many pages on the internet contain "bad" HTML.

    The following HTML code will work fine if you view it in a browser.

    Code:
    <html>
    <head>
    <title>This is bad HTML</title>
    <body>
    <h1>Bad HTML
    <p>This is a paragraph
    </body>
    XML is a markup language where documents must be marked up correctly and "well-formed".

    Today's market consists of different browser technologies. Some browsers run on computers, and some browsers run on mobile phones or other small devices. Smaller devices often lack the resources or power to interpret a "bad" markup language.

    Therefore - by combining the strengths of HTML and XML, XHTML was developed. XHTML is HTML redesigned as XML

    The Most Important Differences from HTML:

    Document Structure

    XHTML DOCTYPE is mandatory
    The XML namespace attribute in <html> is mandatory
    <html>, <head>, <title>, and <body> is mandatory

    XHTML Elements

    XHTML elements must be properly nested
    XHTML elements must always be closed
    XHTML elements must be in lowercase
    XHTML documents must have one root element

    XHTML Attributes

    Attribute names must be in lower case
    Attribute values must be quoted
    Attribute minimization is forbidden

    <!DOCTYPE ....> Is Mandatory

    An XHTML document must have an XHTML DOCTYPE declaration.

    A complete list of all the XHTML Doctypes is found in our HTML Tags Reference.

    The <html>, <head>, <title>, and <body> elements must also be present, and the xmlns attribute in <html>, must specify the xml namespace for the document.

    Code:
    <html xmlns="http://www.bizhat.com/1999/xhtml">
    
    <head>
    <title>Title of document</title>
    </head>
    
    <body>
    ......
    </body>
    
    </html>
    XHTML Elements Must Be Properly Nested

    In HTML, some elements can be improperly nested within each other, like this:

    Code:
    <b><i>This text is bold and italic</b></i>
    In XHTML, all elements must be properly nested within each other, like this:

    Code:
    <b><i>This text is bold and italic</i></b>
    XHTML Elements Must Always Be Closed

    This is wrong:

    Code:
    <p>This is a paragraph
    <p>This is another paragraph
    This is correct:

    Code:
    <p>This is a paragraph</p>
    <p>This is another paragraph</p>
    Empty Elements Must Also Be Closed

    This is wrong:

    Code:
    A break: <br>
    A horizontal rule: <hr>
    An image: <img src="happy.gif" alt="Happy face">
    This is correct:

    Code:
    A break: <br />
    A horizontal rule: <hr />
    An image: <img src="happy.gif" alt="Happy face" />
    XHTML Elements Must Be In Lower Case

    This is wrong:

    Code:
    <BODY>
    <P>This is a paragraph</P>
    </BODY>
    This is correct:

    Code:
    <body>
    <p>This is a paragraph</p>
    </body>
    Attribute Names Must Be In Lower Case

    This is wrong:

    Code:
    <table WIDTH="100%">
    This is correct:

    Code:
    <table width="100%">
    Attribute Values Must Be Quoted

    This is wrong:

    Code:
    <table width=100%>
    This is correct:

    Code:
    <table width="100%">
    Attribute Minimization Is Forbidden

    This is wrong:

    Code:
    <input checked>
    <input readonly>
    <input disabled>
    <option selected>
    This is correct:

    Code:
    <input checked="checked">
    <input readonly="readonly">
        <input disabled="disabled">
        <option selected="selected">
    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
    Change all element names to lowercase
    Close all empty elements
    Change all attribute names to lowercase
    Quote all attribute values


    Back to HTML Tutorial
    Last edited by sherlyk; 04-03-2014 at 06:24 AM.

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •