لطفا منتظر باشید ...
Divisions and Centering
The <div> tag is used to structure HTML documents into sections or divisions. A <div> is a logical block tag that has no predefined meaning or rendering. Under traditional HTML, the only major value of the <div> tag is to align sections of content by setting the align attribute to left, right, or center. By default, content within the <div> tag is left-aligned. Divisions are more significantly useful when used in conjunction with style sheets (see Chapter 10).Aside from using the <div> tag to align blocks of text, it is possible to center text using a difficult-to-characterize proprietary tag: <center>. Under HTML 2.0-based browsers, centering text was impossible. One of the major additions introduced by Netscape was the <center> tag. HTML 3.2 adopted this element because of its widespread use, which continues today. To center text or embedded objects (such as images), simply enclose the content within <center> and </center>. In this sense, <center> appears to be a text- formatting style element, but under the HTML 3.2 and transitional 4.0 specification (and beyond), <center> is defined as an alias for a block-level structuring element and eventually will be deprecated under strict versions of HTML. Under the HTML 4.01 DTD, <center> is supposed to be simply an alias for <div align="center"> and is treated exactly the same way. Specification or not, the <center> tag is unlikely to go away, considering its simplicity and widespread use. The following example shows the use of <center> and <div>. (Figure 3-4 shows their screen rendering.)
Figure 3-4: Example rendering of <div> and <center>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Center and Division Example</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
</head>
<body>
<center>
<h1>This heading is centered.</h1>
<p>This paragraph is also centered.</p>
</center>
<br /><br />
<div align="right">
<h1>Division Heading</h1>
<p>Many paragraphs and other block elements
can be affected by a DIV at once.</p>
<p>Notice all the paragraphs are right aligned.</p>
</div>
</body>
</html>
Spans
Although the <div> tag can be used to group large sections of a document for later application of a style sheet or various other formatting, it is not appropriate to put everything within a division. Because div is a block element, it will induce a return. If you want to group text without using a block element, use a <span> tag, as it provides logical grouping inline with no predefined look. Consider the following markup:
<p>In this sentence <span class="important">some of the text is
important!</span></p>
In this markup fragment, the <span> tag wouldn't necessarily cause any particular presentation under plain HTML. However, as shown, using the class attribute, it could be related to a style sheet to make the enclosed text look different, while at the same time providing no particular logical meaning. We could do something directly, like so:
<p>In this sentence <span style="color: red; font-size: xx-large;">some of the text
is big and red</span>!</p>
but that would defeat the value of separating presentation from document structure with styles. It would seem at this point the use of <div> and <span> tags might not make a great deal of sense, but they are some of the most useful of the core elements of XHTML. Their use with style sheets is discussed in Chapter 10.
