Xhtml Tutorial

  • April 2020
  • PDF

This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA


Overview

Download & View Xhtml Tutorial as PDF for free.

More details

  • Words: 9,282
  • Pages: 42
XHTML Tutorial XHTML Tutorial XHTML is a stricter and cleaner version of HTML. In this tutorial you will learn the difference between HTML and XHTML. We will also show you how W3Schools.com was converted into XHTML. Start learning XHTML now!

XHTML Quiz Test Test your XHTML skills at W3Schools! Start the XHTML Quiz!

XHTML References At W3Schools you will find complete references about tags, standard attributes, standard events, colornames, entities, character-sets, URL encoding, language codes, HTTP messages, and more. XHTML 1.0 Reference

Introduction To XHTML

XHTML is a stricter and cleaner version of HTML.

What You Should Already Know Before you continue you should have a basic understanding of the following:



HTML and the basics of building web pages

If you want to study HTML first, please read our HTML tutorial.

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 a W3C Recommendation

XHTML is a W3C Recommendation XHTML 1.0 became a W3C Recommendation January 26, 2000. Stay updated with the latest W3C recommendations in our W3C tutorial.

All New Browsers Support XHTML XHTML is compatible with HTML 4.01. All new browsers have support for XHTML.

W3Schools Has Converted To XHTML XHTML is a reformulation of HTML 4.01 in XML, and can be put to immediate use with existing browsers by following a few simple guidelines. W3Schools was completely rewritten to XHTML 1.0 in 1999. A click on this symbol:

validates the XHTML part of this page.

A click on this symbol:

validates the CSS part of this page.

About This Tutorial The next chapters of this tutorial will explain:

• • • • •

Why you should use XHTML The syntax of XHTML How W3Schools was converted to XHTML XHTML validation XHTML modularization

XHTML - Why?

XHTML is a combination of HTML and XML (EXtensible Markup Language). XHTML consists of all the elements in HTML 4.01 combined with the syntax of XML.

Why XHTML? We have reached a point where many pages on the WWW contain "bad" HTML. The following HTML code will work fine if you view it in a browser, even if it does not follow the HTML rules:

This is bad HTML

Bad HTML XML is a markup language where everything has to be marked up correctly, which results in "wellformed" documents. XML was designed to describe data and HTML was designed to display data. Today's market consists of different browser technologies, some browsers run Internet on computers, and some browsers run Internet on mobile phones or other small devices. The lastmentioned do not have the resources or power to interpret a "bad" markup language. Therefore - by combining HTML and XML, and their strengths, we got a markup language that is useful now and in the future - XHTML.

Differences Between XHTML And HTML

You can prepare yourself for XHTML by starting to write strict HTML.

How To Get Ready For XHTML XHTML is not very different from the HTML 4.01 standard. So, bringing your code up to the 4.01 standard is a good start. Our complete HTML 4.01 reference can help you with that. In addition, you should start NOW to write your HTML code in lowercase letters, and NEVER skip ending tags (like

). Happy coding!

The Most Important Differences: • • • •

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 Elements Must Be Properly Nested In HTML, some elements can be improperly nested within each other, like this:

This text is bold and italic In XHTML, all elements must be properly nested within each other, like this:

This text is bold and italic Note: A common mistake with nested lists, is to forget that the inside list must be within
  • and
  • tags. This is wrong:

    • Coffee
    • Tea
      • Black tea
      • Green tea
    • Milk
    This is correct:

    • Coffee
    • Tea
      • Black tea
      • Green tea
    • Milk
    Notice that we have inserted a tag after the tag in the "correct" code example.

    XHTML Elements Must Always Be Closed Non-empty elements must have an end tag. This is wrong:

    This is a paragraph

    This is another paragraph This is correct:

    This is a paragraph

    This is another paragraph



    Empty Elements Must Also Be Closed Empty elements must either have an end tag or the start tag must end with />. This is wrong:

    A break:
    A horizontal rule:
    An image: Happy face This is correct:

    A break:
    A horizontal rule:
    An image: Happy face

    XHTML Elements Must Be In Lower Case The XHTML specification defines that the tag names and attributes need to be lower case. This is wrong:

    This is a paragraph

    This is correct:

    This is a paragraph



    XHTML Documents Must Have One Root Element All XHTML elements must be nested within the root element. All other elements can have sub (children) elements. Sub elements must be in pairs and correctly nested within their parent element. The basic document structure is:

    ... ...

    XHTML Syntax

    Some More XHTML Syntax Rules • • • • •

    Attribute names must be in lower case Attribute values must be quoted Attribute minimization is forbidden The id attribute replaces the name attribute The XHTML DTD defines mandatory elements

    Attribute Names Must Be In Lower Case This is wrong:

    This is correct:



    Attribute Values Must Be Quoted This is wrong:

    This is correct:



    Attribute Minimization Is Forbidden This is wrong:



    Defines attributes for table columns

    STF



    Defines groups of table columns

    STF



    Defines a definition description

    STF

    <del>

    Defines deleted text

    STF



    Deprecated. Defines a directory list

    TF



    Defines a section in a document

    STF



    Defines a definition term

    STF



    Defines a definition list

    STF



    Defines a definition term

    STF

    <em>

    Defines emphasized text

    STF



    Defines a fieldset

    STF



    Deprecated. Defines text font, size, and color

    TF



    Defines a form

    STF



    Defines a sub window (a frame)

    F



    Defines a set of frames

    F

    to



    Defines header 1 to header 6

    STF



    Defines information about the document

    STF




    Defines a horizontal rule

    STF



    Defines an html document

    STF



    Defines italic text

    STF

    <iframe>

    Defines an inline sub window (frame)

    TF



    Defines an image

    STF



    Defines an input field

    STF



    Defines inserted text

    STF



    Deprecated. Defines a single-line input field

    TF



    Defines keyboard text

    STF



    Defines a table caption

    STF



    Deprecated. Defines centered text

    TF



    Defines a citation

    STF



    Defines computer code text

    STF



    Defines a table

    STF



    Defines a table body

    STF



    Defines a table cell

    STF