What Is the Body Tag/Element?
The body element is used to provide content of the XHTML document. Here are some rules about the body tag/element:
- The body element is a second level element. The body element must be the second child element of the html element.
- You can only place a single body element in an XHTML document.
- The body element must be coded with the body opening tag, <body>, and the body closing tag, </body>.
- The body element can not be empty. The body must have one or more block-type elements
- The body element can not have any text information directly included between the opening and closing tags.
What Is Wrong with My Body Elements?
If you are having trouble with your body elements, it could be caused by one of the following common mistakes:
<!-- Text can not be used in body directly --> <body> Hello world! </body> <!-- "title" is not allowed in body element --> <body> <title>XHTML FAQ</title> </body> <!-- "img" is not a block level eleent --> <body> <img src="images/fyi.gif" alt="FYI" /> </body> <!-- "p" element is missing closing tag --> <body> <p>Welcome to FYIcenter.com! </body> <!-- body element can not be empty --> <body> </body>
What Elements Are Allowed as Body Sub-Elements?
The content model of the body element is sub-element only. Character data is not allowed as body element's content. You can only enter sub elements inside the body element. But not all elements can be entered inside the body element. Strict XHTML document only allow block type elements to be included directly inside the body element.
Here are some commonly used block type elements:
- p - Specifying paragraphs of text.
- pre - Specifying pre-formatted text.
- blockquote - Specifying quoted paragraphs of text.
- h1, h2, h3, h4, h5, h6 - Specifying headings of different levels.
- hr - Specifying horizontal rules.
- ul, ol, dl - Specifying lists of items.
- table - Specifying tables of columns and rows.
- form - Specifying forms with input fields.
- script - Specifying client-side script codes.
- div - Specifying structural divisions.
What Attributes Are Allowed in the Body Element?
XHTML 1.0 strict version does not allow some attributes that were commonly used in early versions of HTML specification. For example: "background" can be used to specify a background image, and "bgcolor" can be used to specify the background color.
Both "background" and "bgcolor" are not allowed as "body" attributes now. If you want set background image and color, you need to use the "style" attribute to specify CSS properties, as shown the tutorial example below:
<?xml version="1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Style Attribute in Body Element</title> </head> <body style="background-color: #dddddd"> <p>Hello world!</p> </body> </html>
If you save the above document as style.html, and view it with Internet Explorer, you will see a gray background specified by the style attribute as shown below:
What Is a P Tag/Element?
A p element is a block level element that can be used directly as a sub-element in the body element. You can use p elements to specify paragraphs of text and in-line elements. Here are basic rules about p elements:
- "p" elements are mixed content elements.
- "p" elements can have empty contents.
- "p" elements can have PCDATA as contents.
- "p" elements can have in-line elements as contents.
- "p" elements can not have block elements as contents.
- "p" elements can not have "p" elements as contents.
- "p" elements are block elements. They can not be used as in-line elements.
- "p" elements will be displayed by browsers as paragraphs with some leading and trailing vertical spaces.
Here is a good example of p elements:
<p>Learning XHTML is like learning any new language, computer or human. Most students first immerse themselves in examples. Studying others is a natural way to learn, making learning easy and fun.</p>
Can I Mix Images with Text in a Paragraph?
Yes. "img" elements are in-line elements. You can use "img" elements to mix images with text in any paragraph defined by a "p" element'. Below is a good tutorial example of image mixed with text:
<?xml version="1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>The XHTML Validation Icon</title> </head> <body> <p>If you know your Web page is a valid XHTML document, you should include this image, <img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" /> on your page to show your readers that you have taken care to create an interoperable page.</p> </body> </html>
If you save the above document as validator.html, and view it with Internet Explorer, you will see an image icon mixed nicely with other text in a paragraph as shown below:
How To Control Line Breaks in a Paragraph?
By default line breaks within a paragraph are controlled by the browser. Lines will be wrapped at the right edge of the display area of the paragraph. If you want to force a line break in middle of a line, you can use the "br" elements. Below is a good tutorial example of using "br" elements:
<?xml version="1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Line Breaks in a Paragraph</title> </head> <body> <p>I love the way you look at me,<br/> Your eyes so bright and blue.<br/> I love the way you kiss me,<br/> Your lips so soft and smooth.</p> </body> </html>
If you save the above document as line_break.html, and view it with Internet Explorer, you will see that the paragraph is broken in multiple lines as shown below:
How To Highlight One Part of a Paragraph?
If you want to hightlight one part of a paragraph, you can use the "strong" element with the "p" element. Below is a good tutorial example of using "strong" elements:
<?xml version="1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Using "strong" in a Paragraph</title> </head> <body> <p>I love to use <strong>dev.FYIcenter.com</strong> to learning XHTML. It is easy and fun.</p> </body> </html>
If you save the above document as strong.html, and view it with Internet Explorer, you will see that dev.FYIcenter.com is highlighted in bold within the paragraph as shown below:
How To Get Extra Space between Paragraphs?
By default, browsers will give a predefined white space between two paragraphs. But if you want some extra white space between two paragraphs, you can enter an extra paragraph with a entity.
Note that a true empty paragraph will not give any extra white space. See the following tutorial XHTML document:
<?xml version="1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Extra Space between Paragraphs</title> </head> <body> <p>Row, row, row your boat, Gently down the stream.</p> <p></p> <p>Merrily, merrily, merrily, merrily, Life is but a dream.</p> <p> </p> <p>Frère Jacques, Frère Jacques, Dormez vous? Dormez vous? Sonnez les matines, Sonnez les matines, Din, din, don! Din, din, don!</p> </body> </html>
If you save the above document as space.html, and view it with Internet Explorer, you will see that the empty paragraph gives no extra white space. But the paragraph with a entity does give the extra white space you wanted as shown below:
What Is Wrong with My P Elements?
If you are having trouble with your p elements, it could be caused by one of the following common mistakes:
<!-- Missing closing tags --> <body> <p>I love the way you look at me. <p>I love the way you kiss me. </body> <!-- "blockquote" is not allowed in a p element --> <body> <p><blockquote> "You don't love a woman because she is beautiful, but she is beautiful because you love her." </blockquote></p> </body> <!-- "form" is not allowed in a p element --> <body> <p><form action=""> Take in this survey to win $10,000.00! </form></p> </body>
What Is a PRE Tag/Element?
A pre element is a block level element that can be used directly as a sub-element in the body element. You can use pre elements to specify blocks of pre-formatted text with white space characters preserved. Here are basic rules about pre elements:
- "pre" elements are mixed content elements.
- "pre" elements can have empty contents.
- "pre" elements can have PCDATA as contents.
- "pre" elements can have in-line elements as contents.
- "pre" elements can not have block elements as contents.
- "pre" elements are block elements. They can not be used as in-line elements.
- "pre" elements will be displayed by browsers without line wrapping. So long lines in the document will be displayed as long lines.
- "pre" elements will be displayed in monospacing fonts in browsers by default.
- "pre" elements preserve white space characters.
Here is a good example of pre elements:
<body>
<pre>
1
1 1
1 2 1
1 3 3 1
1 4 6 4 1
</pre>
</body>
Are Tab Characters Preserved in a PRE Element?
Yes. Tab characters are preserved in pre elements like other white space characters. Below is a good tutorial example of using "pre" elements:
<?xml version="1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Tab Characters in PRE Elements</title> </head> <body> <pre> XHTML Extensible Hyper-Text Markup Language HTML Hyper-Text Markup Language XML Extensible Markup Language </pre> </body> </html>
If you save the above document as tab.html, and view it with Internet Explorer, you will see that tab characters are well preserved by the browser. Line feed characters are also preserved as shown below:
Can Images Be Included in PRE Elements?
Yes. In-line elements can be included pre elements. So images can be included in pre elements with img elements. Here is a good example of img elements in pre elements:
<?xml version="1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>The XHTML Validation Icon</title> </head> <body> <pre> If you know your Web page is a valid XHTML document, you should include this image, <img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" /> on your page to show your readers that you have taken care to create an interoperable page. </pre> </body> </html>
If you save the above document as image.html, and view it with Internet Explorer, you will see that an impage is displayed in the pre-formatted text paragraph as shown below:
What Is a BLOCKQUOTE Tag/Element?
A blockquote element is a block level element that can be used directly as a sub-element in the body element. You can use blockquote elements to specify a block of paragraphs to be displayed in a quotation format. Here are basic rules about blockquote elements:
- "blockquote" elements can only have block elements as contents.
- "blockquote" elements can have empty contents.
- "blockquote" elements can not have PCDATA as contents.
- "blockquote" elements can not have in-line elements contents.
- "blockquote" elements are block elements. They can not be used as in-line elements.
- "blockquote" elements are displayed with extra left margin and right margin.
Here is a good example of blockquote elements:
<body> <blockquote><p> "You may never know what results come of your action, but if you do nothing there will be no result." </p></blockquote> </body>
Can BLOCKQUOTE Elements Be Nested?
Yes. Blockquote elements can be directly nested. This allows you to include one quote inside another quote. Below is a good example of nested blockquote elements:
<?xml version="1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Nested BLOCKQUOTE Elements</title> </head> <body> <p>William Shakespeare was an English poet and playwright widely regarded as the greatest writer of the English language. One of his best-known and most quoted plays is:</p> <blockquote> <p>Hamlet - The revenge of Prince Hamlet, whose father, the late King of Denmark, victor over the Polish army, died suddenly while Hamlet was away from home at Wittenberg University. The most famous quote of the play:</p> <blockquote><p> "To be or not to be, that is the question." </p></blockquote> </blockquote> </body> </html>
If you save the above document as nest_quotes.html, and view it with Internet Explorer, you will see that nest blockquote elements work nicely giving double extra margins to the inner blockquote element as shown below:
What Are Heading Tags/Elements?
Heading elements are block level elements that can be used directly as a sub-element in the body element. You can use heading elements to specify heading in different sizes. Here are basic rules about heading elements:
- There are 6 heading elements, named as "h1", "h2", "h3", "h4", "h5", and "h6".
- Heading elements are mixed content elements.
- Heading elements can have empty contents.
- Heading elements can have PCDATA as contents.
- Heading elements can have in-line elements as contents.
- Heading elements can not have block elements as contents.
- Heading elements are block elements. They can not be used as in-line elements.
- Browsers display different heading elements with different font sizes. "h1" element will be displayed with a larger font size, and "h6" with smaller font size.
Here is a good example of heading elements:
<?xml version="1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Levels of Headings</title> </head> <body> <h1>XHTML Recipes by FYIcenter.com</h1> <h2>Menu for the HEAD</h2> <h3>Recipe #101 - Creating Doducment Title</h3> <p>Bla bla...</p> <h2>Menu for the BODY</h2> <p>...</p> </body> </html>
If you save the above document as headings.html, and view it with Internet Explorer, you will see that 3 levels of headings as shown below:
What Are HR Tags/Elements?
A "hr" element is a block level element that can be used directly as a sub-element in the body element. You can use "hr" elements to specify horizontal rulers. Here are basic rules about "hr" elements:
- "hr" elements can only have empty contents.
- "hr" elements are block elements. They can not be used as in-line elements.
- "hr" elements will be displayed as solid horizontal rulers (lines).
Here is a good example of "hr" elements:
<?xml version="1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Horizontal Rulers</title> </head> <body> <p>Knock, knock Who's there? ...</p> <hr/> <p>Why did the turtle cross the road? ...</p> </body> </html>
If you save the above document as rulers.html, and view it with Internet Explorer, you will see that a horizontal line is displayed as shown below:
What Are Other Block Elements?
Other block elements that are not covered in this collection:
- ul, ol, dl - Specifying lists of items.
- table - Specifying tables of columns and rows.
- form - Specifying forms with input fields.
- script - Specifying client-side script codes.
- div - Specifying structural divisions.
Tutorial tips on those elements will be included in other collections on this site.
discuss this topic to forum
