|
Home >> FAQs/Tutorials >> XHTML Tutorials and Tips >> Index
XHTML Tutorials - Introduction To Element Content Syntax
By: FYIcenter.com
A collection of 17 tutorial tips on XHTML 1.0 element content syntax and basics. Clear answers are provided with tutorial exercises on XHTML element content models, EMTPY and PCDATA element contents, sub-element only contents, mixed contents, XHTML entities and CDATA, nested elements, white space characters.
Topics included in this collection are:
Please note that all tutorials in this collection are based on XHTML 1.0 specification.
What Is the XHTML Element Content?
The content of an XHTML element is everything you entered between the opening tag and
the closing tag of the element.
Here are some good examples of XHTML element contents:
<!-- An empty table cell -->
<td></td>
<!-- "title" content: A simple text string -->
<title>My First XHTML Document</title>
<!-- "head" content: Another XHTML element -->
<head>
<title>My First XHTML Document</title>
</head>
<!-- "p" content: Text and another element -->
<p>The nature of <em>yin and yang</em> is relative.</p>
What Are the XHTML Element Content Models?
There are 4 content models defined for XHTML elements:
1. EMPTY - No content. Nothing between the opening tag and the closing tag. For example:
<br/> - "br" element has no content.
<br></br> - Same as above.
<meta name="Author" content="FYICenter.com"/>
2. PCDATA - Parsed Character DATA. A string of characters and character entities.
Empty content is allowed in this model.
But no other XHTML elements are allowed in the content.
<!-- PCDATA: Pure character string -->
<title>My First XHTML Document</title>
<!-- PCDATA: Empty string -->
<textarea rows="4" cols="40"></textarea>
<!-- PCDATA: Characters mixed with entities -->
<textarea rows="4" cols="40">
while ($i=0; $i<3; %i++) print "Knock ";
</textarea>
3. Sub-elements only - A sequence of sub-elements. No character strings are allowed
in the content.
<!-- Sub-elements only:
"head" can only take sub-elements like "title"
and "meta" -->
<head>
<title>My First XHTML Document</title>
<meta name="Author" content="FYICenter.com"/>
</head>
<!-- Sub-elements only:
"tr" can only take sub-elements like "td" -->
<tr>
<td>Author:</td>
<td>FYIcenter.com</td>
</tr>
<!-- Sub-elements only:
"ul" can only take sub-elements like "li" -->
<ul>
<li>My First XHTML Document</li>
</ul>
4. Mixed - A mixture of PCDATA and sub-elements.
Empty content is also allowed in this model.
<!-- Mixed content: "p" is having
text strings mixed an "em" element -->
<p>The nature of <em>yin and yang</em> is relative.</p>
<!-- Mixed content: "td" is having
text strings mixed with a "p" element -->
<td>Dear Visitor,
<p>Welcome to FYIcenter.com!</p>
Thank you.
</td>
What Are the XHTML Elements Defined with EMPTY Contents?
The following XHTML elements are defined to use the EMPTY content model:
- <meta ... /> - Element to provide meta data to the document.
- <link ... /> - Element to provide a link to a CSS file.
- <br/> - Element to break a line.
- <hr/> - Element to insert a horizontal line.
- <img/> - Element to insert an image.
- <input/> - Element to provide input control in a form.
Remember that EMPTY content elements can not have any content and must be closed
immediately.
What Are the XHTML Elements Defined with PCDATA Contents?
The following XHTML elements are defined to use the PCDATA content model:
- <title> - Element to provide a title to the document.
- <style> - Element to provide a CSS to the document.
- <script> - Element to provide a client side scripts.
- <option> - Element to provide an option of a selection control.
- <textarea> - Element to provide a text area control in a form.
Remember that PCDATA content elements can not have any other XHTML elements
in their contents.
What Are the XHTML Elements Defined with Sub-elements Contents?
The following XHTML elements are defined to use the sub-element content model:
- <html> - The root element of the document.
- <head> - Element to provide head information to the document.
- <ul> - Element to provide an un-numbered list.
- <ol> - Element to provide an ordered list.
- <form> - Element to provide an input form.
- <select> - Element to provide a selection control in a form.
- <table> - Element to provide a table structure in the document.
- <tr> - Element to provide a row to a table.
Remember that sub-element content elements can only have other XHTML elements
in their contents. You can not include any test strings directly in their contents.
What Are the XHTML Elements Defined with Mixed Contents?
The following XHTML elements are defined to use the mixed content model:
- <p> - Element to insert a paragraph.
- <pre> - Element to insert a pre-formatted text.
- <li> - Element to insert an item into a list.
- <td> - Element to insert a cell into a table.
- <h1> - Element to insert a first level heading.
- <a> - Element to insert an anchor.
- <div> - Element to insert a block container.
- <span> - Element to insert an inline container.
Remember that mixed content elements can have text strings and sub-elements
in their contents.
What Is PCDATA?
PCDATA stands for Parsed Character DATA. Here are some basic rules about PCDATA:
- PCDATA is a string of characters and XHTML entities.
- XHTML entities are escape sequences used to refer to special characters that
are not so easy to enter them in a text document. For example, "©" is XHTML
entity referring to the copyright character: "©".
- 3 special characters: "<", ">", and "&" can not be used directly in PCDATA.
They must be replaced by the corresponding XHTML entities: "<",
">", and "&".
- If "<" is used in PCDATA, it will be parsed as the beginning of a XHTML tag.
- If "&" is used in PCDATA, it will be parsed as the beginning of a XHTML entity.
Below you will see some good examples of PCDATA:
c FYICENTER
© FYICENTER
© FYICENTER
What Is an XHTML Entity?
An XHTML entity is escape sequence used to represent a special character that
is hard to enter via a normal keyboard. For example, you can not find a key
on your keyboard to enter the copyright character, "©" directly. You need
to use the XHTML entity "©" to represent the copyright character in your
XTHML document.
Valid XHTML entities are defined in the following 3 files:
What Is CDATA?
CDATA stands for Character DATA, which is used to define a section of data that should not go
through the XHTML entity translation (parsing) process. In other words,
3 special characters: "<", ">", and "&" can be directly used in CDATA.
They will not be "parsed".
CDATA must starts with "<![CDATA[" and ends with "]]>".
Here are some good examples:
<![CDATA[Adam & Eve]]>
<![CDATA[
Sample XHTML code:
<p>1</p>
<p>1 1</p>
<p>1 2 1</p>
<p>1 3 3 1</p>
<p>1 4 6 4 1</p>
]]>
What Is a Sub-element?
A sub-element is an XHTML element that is included inside the content of another XHTML element.
The inner element is called the sub-element or child element. The outer element is called the
parent element. Together they are called nested elements.
Note that which element is allowed to be included inside another element is defined by
the XHTML specification. For example, element "p" is allowed inside "body", but it is
not allowed inside "head".
Can Two Elements Partially Overlap Each Other?
No, two elements can not partially overlap each other. One element must be completely
enclosed inside the other element. See the following two examples:
<!-- Valid: "em" is enclosed inside "strong" -->
<p>There was once upon <strong>a time a <em>peasant-
woman</em> who had a daughter</strong> and a step-
daughter.</p>
<!-- Invalid: "em" is partially overlapped
with "strong" -->
<p>There was once upon <strong>a time a <em>peasant-
woman</strong> who had a daughter</em> and a step-
daughter.</p>
What Is the Sequence of Sub-elements?
The sequence of sub-elements is the order of how each sub-element is placed
inside the parent element. For most parent elements, their sub-elements can be
placed in any order. But some parent elements require you to follow a predefined
sequence.
For example, element "html" requires that "head" to be placed first, and
"body" to be placed second.
What Is a Required Sub-element?
A required sub-element is a sub-element that you must included in the parent
element. Most sub-elements are optional. But there are some sub-elements that
are required by their parent elements.
Here are two good examples:
<!-- Valid: "head" requires "title" -->
<head>
<title>XHTML FAQs by FYIcenter.com</title>
</head>
<!-- Valid: "ul" requires "li" -->
<ul>
<li>Hope you like it.</li>
</head>
What Is a White Space Character?
A white space character is a character that leaves nothing on your screen.
There are 4 known white space characters:
- " " - The space character.
- "\t" - The tab character.
- "\n" - The new line character.
- "\r" - The carriage return character.
White space characters are generally ignored in XHMTL documents
except for element "pre" and CDATA.
How Exactly White Space Characters Are Ignored?
White space characters will be processed (ignored) based where they are located:
- White space characters will be ignored between block elements.
- White space characters will be preserved in element "pre".
- White space characters will be preserved in CDATA.
- Multiple consecutive white space characters will be replaced by
a single space character in PCDATA.
- White space characters will be ignored in EMPTY content elements.
How To Get an Extra White Space?
As you know that white space characters will be ignored in elements like "p".
So how to get some extra white space to show up in your text paragraphs?
On easy solution is to use XHTML entity: " ", which stands for
"non-breaking space".
Here is an example of using "nbsp":
<!-- 4 white spaces at the beginning of the paragraph -->
<p> There was once upon a time
a peasant-woman who had a daughter and a step-
daughter.</p>
|