Introducing XHTML: Module C: Document Structure

Introducing XHTML:Module C: Document Structure

Goals

• Understand how to use DTDsUnderstand how to use DTDs• Understand the importance of Understand the importance of

backward compatibilitybackward compatibility• Understand how to use block-Understand how to use block-

level elementslevel elements• Understand how to use inline Understand how to use inline

elementselements

• This is accomplished through the use This is accomplished through the use of three DTDs: Transitional, of three DTDs: Transitional, Frameset, and StrictFrameset, and Strict

• Even though the XHTML DTDs are Even though the XHTML DTDs are an improvement over HTML, they an improvement over HTML, they may still be too large for many types may still be too large for many types of user agentsof user agents

Creating XHTML Documents

• This is accomplished through the use This is accomplished through the use of three DTDs: Transitional, of three DTDs: Transitional, Frameset, and StrictFrameset, and Strict

• Even though the XHTML DTDs are Even though the XHTML DTDs are an improvement over HTML, they an improvement over HTML, they may still be too large for many types may still be too large for many types of user agentsof user agents


• Many of the elements found in Many of the elements found in XHTML 1.0, such as graphics, tables, XHTML 1.0, such as graphics, tables, and frames, may not be useable on and frames, may not be useable on many user agents, such as PDAs or many user agents, such as PDAs or mobile phonesmobile phones


• One big difference between XML and One big difference between XML and XHTML:XHTML:– Whereas XML does not contain any Whereas XML does not contain any

predefined elements, XHTML contains almost predefined elements, XHTML contains almost all the elements that are available in HTMLall the elements that are available in HTML


Backward Compatibility

• To be backward compatible with older To be backward compatible with older browsers, you save XHTML browsers, you save XHTML documents with an extension of .html documents with an extension of .html or .htm, just like HTML documentsor .htm, just like HTML documents


• You must follow several rules to You must follow several rules to ensure that the code within your ensure that the code within your XHTML documents is also backward XHTML documents is also backward compatiblecompatible

• XML requires that empty elements XML requires that empty elements include a slash before the closing include a slash before the closing bracket to close the elementbracket to close the element


• Older browsers that do not support Older browsers that do not support XML ignore the element when they XML ignore the element when they see the slash immediately following see the slash immediately following the element name in an empty the element name in an empty elementelement


• You can ensure that older browsers You can ensure that older browsers are able to read empty elements in a are able to read empty elements in a well-formed XHTML document by well-formed XHTML document by adding a space between the element adding a space between the element name and the closing slashname and the closing slash

The <!DOCTYPE> Declaration

• An XHTML document must include a An XHTML document must include a <!DOCTYPE><!DOCTYPE> declaration and the declaration and the <html><html>, , <head><head>,, and and <body><body> elementselements

The <!DOCTYPE> Declaration

• The The <!DOCTYPE><!DOCTYPE> declarationdeclaration states states the XHTML version of the document the XHTML version of the document and the XHTML DTD (Transitional, and the XHTML DTD (Transitional, Frameset, or Strict) with which the Frameset, or Strict) with which the document compliesdocument complies

XHTML DTDs

• The World Wide Web Consortium The World Wide Web Consortium (W3C) created XHTML to make the (W3C) created XHTML to make the transition to XML-based Web pages transition to XML-based Web pages easiereasier

• To facilitate the transition, the W3C To facilitate the transition, the W3C provided three types of XHTML DTDs: provided three types of XHTML DTDs: Transitional, Frameset, and StrictTransitional, Frameset, and Strict

Transitional DTD

• Elements and attributes that are Elements and attributes that are considered to be obsolete and that will considered to be obsolete and that will eventually be eliminated are said to be eventually be eliminated are said to be deprecateddeprecated..

• The The Transitional DTDTransitional DTD allows you to allows you to continue using deprecated elements along continue using deprecated elements along with the well-formed document with the well-formed document requirements of XML.requirements of XML.

Transitional DTD

Frameset DTD

• The The Frameset DTDFrameset DTD is identical to the is identical to the transitional DTD, except that it transitional DTD, except that it includes the includes the <frameset><frameset> and and <frame><frame> elements elements

Frameset DTD

• Allows you to split the browser Allows you to split the browser window into two or more frames, window into two or more frames, which are independent, scrollable which are independent, scrollable portions of a Web browser window, portions of a Web browser window, with each frame capable of displaying with each frame capable of displaying a separate URLa separate URL

Strict DTD

• The The Strict DTDStrict DTD eliminates the eliminates the elements that were deprecated in the elements that were deprecated in the Transitional DTD and Frameset DTDTransitional DTD and Frameset DTD

Strict DTD

• The The <!DOCTYPE><!DOCTYPE> declaration for the declaration for the Strict DTD is as follows:Strict DTD is as follows:<!DOCTYPE html PUBLIC<!DOCTYPE html PUBLIC

““-//W3C//DTD XHTML 1.0 Strict//EN”-//W3C//DTD XHTML 1.0 Strict//EN”

http://www.w3.org/TR/xhtml1/DTD/xhtml1-http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>strict.dtd>

Validating Web Pages

• To ensure that an XHTML document To ensure that an XHTML document is well formed and that its elements is well formed and that its elements are valid, you need to use a are valid, you need to use a validating parservalidating parser


• ValidationValidation checks that your XHTML checks that your XHTML document is well formed, and that the document is well formed, and that the elements in your document are elements in your document are correctly written according to the correctly written according to the element definitions in an associated element definitions in an associated DTD. You are not actually required to DTD. You are not actually required to validate XHTML documents.validate XHTML documents.


• If you do not validate an XHTML If you do not validate an XHTML document and it contains errors, most document and it contains errors, most Web browsers will probably treat it as Web browsers will probably treat it as an HTML document, ignore the an HTML document, ignore the errors, and render the page anywayerrors, and render the page anyway


• Many XHTML validating parsers existMany XHTML validating parsers exist– One of the best available is the W3C MarkUp One of the best available is the W3C MarkUp

Validation Service, a free service that Validation Service, a free service that validates both HTML and XHTMLvalidates both HTML and XHTML

– The W3C MarkUp Validation Service is The W3C MarkUp Validation Service is located at located at http://validator.w3.orghttp://validator.w3.org

XHTML Elements and Attributes

• The data contained within an The data contained within an element’s opening and closing tags is element’s opening and closing tags is referred to as its contentreferred to as its content

• You must close empty elements by You must close empty elements by adding a space and a slash before adding a space and a slash before the tag’s closing bracketthe tag’s closing bracket

Block-Level and Inline Elements

• Two basic types of elements can Two basic types of elements can appear within a document’s appear within a document’s <body><body> element: block-level and inlineelement: block-level and inline– Block-level elementsBlock-level elements are elements that give are elements that give

a Web page its structurea Web page its structure


– InlineInline, or , or text-leveltext-level, , elementselements describe the describe the text that appears on a Web pagetext that appears on a Web page

– Unlike block-level elements, inline elements Unlike block-level elements, inline elements do not appear on their own lines; they appear do not appear on their own lines; they appear within the line of the block-level element that within the line of the block-level element that contains themcontains them


Standard Attributes

• You place attributes before the You place attributes before the closing bracket of the starting tag, closing bracket of the starting tag, and you separate them from the tag and you separate them from the tag name or other attributes with a spacename or other attributes with a space

• Many XHTML attributes are unique to Many XHTML attributes are unique to a specific element or can only be a specific element or can only be used with certain types of elementsused with certain types of elements

Standard Attributes

• XHTML also includes several XHTML also includes several standardstandard, or , or commoncommon,, attributesattributes that are available to almost every that are available to almost every element, with a few exceptionselement, with a few exceptions

Standard Attributes

Standard Attributes

• In order to be a considerate resident In order to be a considerate resident of the international world of the Web, of the international world of the Web, you should designate the language of you should designate the language of your elements using the your elements using the langlang and and xml:langxml:lang attributes attributes

Standard Attributes

• The The langlang attribute is used in HTML attribute is used in HTML documents, whereas the documents, whereas the xml:langxml:lang attribute is used in XML-based attribute is used in XML-based documentsdocuments

Boolean Attributes

• A A Boolean attributeBoolean attribute specifies one of specifies one of two values: true or falsetwo values: true or false

• The presence of a Boolean attribute The presence of a Boolean attribute in an element’s opening tag indicates in an element’s opening tag indicates a value of “true”, whereas its absence a value of “true”, whereas its absence indicates a value of “false”indicates a value of “false”

Boolean Attributes

• When a Boolean attribute is not When a Boolean attribute is not assigned a value, it is referred to as assigned a value, it is referred to as having a having a minimized formminimized form

• Recall that all attribute values must Recall that all attribute values must appear within quotation marksappear within quotation marks

Boolean Attributes

• This syntax also means that an This syntax also means that an attribute must be assigned a valueattribute must be assigned a value– For this reason, minimized Boolean attributes For this reason, minimized Boolean attributes

are illegal in XHTMLare illegal in XHTML

• You can still use Boolean attributes in You can still use Boolean attributes in XHTML provided you use their full XHTML provided you use their full formform

Boolean Attributes

• You create the You create the full formfull form of a Boolean of a Boolean attribute by assigning the name of the attribute by assigning the name of the other attribute itself as the attribute’s other attribute itself as the attribute’s valuevalue

Required Elements

• To better understand how an XHTML To better understand how an XHTML document is structured, in this section document is structured, in this section you study in detail the three elements you study in detail the three elements that must be included in every that must be included in every XHTML document: the XHTML document: the <html><html>, , <head><head>,, and and <body><body> elements elements

The <html> Element

• All HTML documents must include an All HTML documents must include an <html><html> element, which tells a Web element, which tells a Web browser that the instructions between browser that the instructions between the opening and closing the opening and closing <html><html> tags tags are to be assembled into an HTML are to be assembled into an HTML documentdocument

The <html> Element

• The The <html><html> element is required and element is required and contains all the text and other contains all the text and other elements that make up the HTML elements that make up the HTML documentdocument

The <html> Element

• The The <html><html> element is also the root element is also the root element for XHTML documents and is element for XHTML documents and is required for XHTML documents to be required for XHTML documents to be well formedwell formed

The XHTML Namespace

• All of the predefined elements in an All of the predefined elements in an XHTML document are organized XHTML document are organized within the within the XHTML namespaceXHTML namespace that that you declare in the you declare in the <html><html> element element

The XHTML Namespace

• In order to understand what a In order to understand what a namespace is, recall that you must namespace is, recall that you must define your own elements and define your own elements and attributes in an XML documentattributes in an XML document

The XHTML Namespace

• You identify each element by the You identify each element by the namespace to which it belongsnamespace to which it belongs

• A A namespacenamespace organizes the organizes the elements and attributes of an XML elements and attributes of an XML document into separate groupsdocument into separate groups

The XHTML Namespace

• For elements, you add the For elements, you add the namespace and colon before the namespace and colon before the tag name in both the opening and tag name in both the opening and closing tagsclosing tags

The XHTML Namespace

• A A default namespacedefault namespace is applied to is applied to all of the elements and attributes in all of the elements and attributes in an XHTML document, with the an XHTML document, with the exception of elements and exception of elements and attributes to which local attributes to which local namespaces have been appliednamespaces have been applied

The XHTML Namespace

• You specify a default namespace You specify a default namespace for an XHTML document by using for an XHTML document by using the the xmlnsxmlns namespace attribute in namespace attribute in the the <html><html> element element

The Document Head

• The elements within a document’s The elements within a document’s head section contain information head section contain information about the Web page itselfabout the Web page itself

The Document Head

• The document head does not actually The document head does not actually display any information in a browserdisplay any information in a browser– Rather, it is a parent element that can contain Rather, it is a parent element that can contain

several child elementsseveral child elements

• A A parent elementparent element is an element that is an element that contains other elements, known as contains other elements, known as child elementschild elements

Child Elements of the <head> Element

The Document Body

• The document body is represented by The document body is represented by the the <body><body> element and contains element and contains other elements that define all of the other elements that define all of the content a user sees rendered in a content a user sees rendered in a browserbrowser

The Document Body

• XHTML documents consist of XHTML documents consist of elements that contain content, as elements that contain content, as opposed to HTML documents, which opposed to HTML documents, which consist of content that contains consist of content that contains elementselements

The Document Body

• In HTML, you can also use various In HTML, you can also use various attributes in the attributes in the <body><body> element that element that affect the appearance of the affect the appearance of the document, such as the document, such as the bgcolorbgcolor attribute for setting the background attribute for setting the background color and the color and the text text attribute for setting attribute for setting the default color of textthe default color of text

Basic Body Elements

• Basic body elements such as the Basic body elements such as the <p><p> and and <br /><br /> elements are some of the elements are some of the most frequently used elements in Web most frequently used elements in Web page authoringpage authoring

Headings

• Heading elementsHeading elements are used for are used for emphasizing a document’s headings emphasizing a document’s headings and subheadings, which helps and subheadings, which helps provide structure by hierarchically provide structure by hierarchically organizing a document’s contentorganizing a document’s content

• There are six heading elements, There are six heading elements, <h1><h1> through through <h6><h6>

Paragraphs and Line Breaks

• The paragraph The paragraph (<p>)(<p>) and line- and line-break break (<br />)(<br />) elements provide elements provide the simplest way of adding white the simplest way of adding white space to a documentspace to a document


• White spaceWhite space refers to the empty refers to the empty areas on a pageareas on a page– It makes a page easier to read and is more It makes a page easier to read and is more

visually appealingvisually appealing


– It is tempting for beginning Web page It is tempting for beginning Web page authors to try and pack each page with as authors to try and pack each page with as much information as possible, but much information as possible, but experienced Web page authors know that experienced Web page authors know that the presence of white space is critical to the presence of white space is critical to the success of a page, whether you are the success of a page, whether you are creating a Web page or a traditional printed creating a Web page or a traditional printed pagepage

Horizontal Rules

• The empty The empty horizontal-rule horizontal-rule (<hr />)(<hr />) element element draws a draws a horizontal rule on a Web page that horizontal rule on a Web page that acts as a section divideracts as a section divider

Horizontal Rules

• Horizontal rules are useful visual Horizontal rules are useful visual elements for breaking up long elements for breaking up long documentsdocuments

• Although the Although the <hr /><hr /> element is element is technically a block-level element, it technically a block-level element, it cannot contain any content because it cannot contain any content because it is an empty elementis an empty element

Comments

• CommentsComments are nonprinting lines that are nonprinting lines that you place in your code to contain you place in your code to contain various types of remarks. various types of remarks.

• XHTML comments begin with an XHTML comments begin with an opening comment tag opening comment tag <!–<!– and end and end with a closing comment tag with a closing comment tag -->-->

Web Page with Comments

Resources

• Slides were adapted from the Slides were adapted from the following text & companion lectures:following text & companion lectures:XHTML, ComprehensiveXHTML, Comprehensive

First EditionFirst Edition

Dan GosselinDan Gosselin

Published by Course Technology (2004)Published by Course Technology (2004)