Indicating a Shift in Themes
<hr>
A horizontal rule
If you want to indicate that one topic or thought has completed and another one is beginning, you can insert what is called in HTML5 a “paragraph-level thematic break” using the hr element. It is used as a logical divider between sections of a page or paragraphs of text. The hr element adds a logical divider between sections or paragraphs of text without introducing a new heading level. In HTML versions prior to HTML5, hr was defined as a “horizontal rule” because it inserted a horizontal line on the page. Browsers still render hr as a 3D shaded rule and put it on a line by itself with some space above and below by default, but it now has a new semantic purpose. If a decorative line is all you’re after, it is better to create a rule by specifying a colored border before or after an element with CSS. hr is an empty element—you just drop it into place where you want the thematic break to occur. Note that in XHTML, the hr element must be closed with a slash: <hr />.
example:
<h3>Times</h3>
<p>Description and history of the Times typeface.</p>
<hr>
<h3>Georgia</h3>
<p>Description and history of the Georgia typeface.</p>
<hr>
Lists
Humans are natural list makers, and HTML provides elements for marking up three types of lists:
• Unordered lists. Collections of items that appear in no particular order.
• Ordered lists. Lists in which the sequence of the items is important.
• Description lists. Lists that consist of name and value pairs, including but not limited to terms and definitions.
All list elements—the lists themselves and the items that go in them—are displayed as block elements by default, which means that they start on a
new line and have some space above and below, but that may be altered with CSS. In this section, we’ll look at each list type in detail.
Unordered lists
<ul>...</ul>
Unordered list
<li>...</li>
List item within an unordered list Just about any list of examples, names, components, thoughts, or options qualify as unordered lists. In fact, most lists fall into this category. By default, unordered lists display with a bullet before each list item, but you can change that with a style sheet, as you’ll see in a moment. To identify an unordered list, mark it up as a ul element. The opening <ul> tag goes before the first list item, and the closing tag </ul> goes after the last item. Then, each item in the list gets marked up as a list item (li) by enclosing it in opening and closing li tags, as shown in this example. Notice that here are no bullets in the source document.
Example:
<ul>
<li><a href="">Serif</a></li>
<li><a href="">Sans-serif</a></li>
<li><a href="">Script</a></li>
<li><a href="">Display</a></li>
<li><a href="">Dingbats</a></li>
</ul>
NOTE
The only thing that is permitted within an unordered list (that is, between the start and end ul tags) is one or more list items. You can’t put other elements in there, and there may not be any untagged text. However, you can put any type of flow element within a list item (li).
But here’s the cool part. We can take that same unordered list markup and radically change its appearance by applying different style sheets.
Nesting Lists
Any list can be nested within another list; it just has to be placed within a list item. This example shows the structure of an unordered list nested
in the second ordered list item.
<ol>
<li></li>
<li>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>
</ol>
When you nest an unordered list within another unordered list, the browser automatically changes the bullet style for the second-level list. Unfortunately, the numbering style is not changed by default when you nest ordered lists. You need to set the numbering styles yourself using style sheets.
Ordered lists
<ol>...</ol>
Ordered list
<li>...</li>
List item within an ordered list
Ordered lists are for items that occur in a particular order, such as step-bystep instructions or driving directions. They work just like the unordered
lists described earlier, except they are defined with the ol element (for ordered list, of course). Instead of bullets, the browser automatically inserts
numbers before ordered list items, so you don’t need to number them in the source document. This makes it easy to rearrange list items without renumbering them.
Ordered list elements must contain one or more list item elements.
<ol>
<li>Gutenburg develops moveable type (1450s)</li>
<li>Linotype is introduced (1890s)</li>
<li>Photocomposition catches on (1950s)</li>
<li>Type goes digital (1980s)</li>
</ol>
The default rendering of an ordered list. The numbers are added automatically by the browser.
If you want a numbered list to start at a number other than “1,” you can use the start attribute in the ol element to specify another starting number, as shown here:
<ol start="17">
<li>Highlight the text with the text tool.</li>
<li>Select the Character tab.</li>
<li>Choose a typeface from the pop-up menu.</li>
</ol>
The resulting list items would be numbered 17, 18, and 19, consecutively.
Changing Bullets and Numbering
You can use the list-style-type style sheet property to change the bullets and numbers for lists. For example, for unordered lists, you can change the shape from the default dot to a square or an open circle, substitute your own image, or remove the bullet altogether. For ordered lists, you can change the numbers to roman numerals (I., II., III. or i., ii., iii.), letters (A., B., C., or a., b., c.), and several other numbering schemes.
In fact, as long as the list is marked up semantically, it doesn’t need to display with bullets or numbering at all.
Description lists
<dl>...</dl>
A description list
<dt>...</dt>
A name, such as a term or label
<dd>...</dd>
A value, such as a description or definition
Description lists are used for any type of name/value pairs, such as terms and their definitions, questions and answers, or other types of terms and their associated information. Their structure is a bit different from the other two lists that we just discussed. The whole description list is marked up as a dl element. The content of a dl is some number of dt elements indicating the names and dd elements for their respective values. I find it helpful to think of them as “terms” (to remember the “t” in dt) and “definitions” (for the “d” in dd), even though that is only one use of description lists in HTML5.
Here is an example of a list that associates forms of typesetting with their descriptions.
<dl>
<dt>Linotype</dt>
<dd>Line-casting allowed type to be selected, used, then recirculated
into the machine automatically. This advance increased the speed of
typesetting and printing dramatically.</dd>
<dt>Photocomposition</dt>
<dd>Typefaces are stored on film then projected onto photo-sensitive
paper. Lenses adjust the size of the type.</dd>
<dt>Digital type</dt>
<dd><p>Digital typefaces store the outline of the font shape in a
format such as Postscript. The outline may be scaled to any size for
output.</p>
<p>Postscript emerged as a standard due to its support of
graphics and its early support on the Macintosh computer and Apple
laser printer.</p>
</dd>
</dl>
The default rendering of a definition list. Definitions are set off from the terms by an indent.
The dl element is only allowed to contain dt and dd elements. It is OK to have multiple definitions with one term and vice versa. You cannot put headings or content-grouping elements (like paragraphs) in names (dt), but the value (dd) can contain any type of flow content.
happy coding season
0 comments:
Post a Comment