Web Design - Chapter 5.

Program Elements

A number of inline elements are used for describing the parts of technical documents, such as code (code). variables (var), program samples (samp), and user-entered keyboard strokes (kbd).

Unordered Lists

Just about any list of examples, names, components, thoughts, or options qualify as unordered lists.

Line breaks

Occasionally, you may need to add a line break within the flow of text. The br element could be used to break up lines of addressed or poetry.

Ordered Lists

Ordered lists are for items that occur in a particular order, such as step-by-step instructions or driving directions. They work just like the unordered lists, except they are defined with the ol element.

Paragraphs

Paragraphs are the most rudimentary elements of a text document. You indicate a paragraph with the p element by inserting an opening <p> tag at the beginning of the paragraph and a closing </p> tag after it.

Mark up tips 3

Put all attribute values in quotation marks

Addresses

The addresses element that is used to create an area for contact information for the author or maintainer of the document. It is generally placed at the end of the document or in a section or article within a document. An address would be right at home in a footer element.

Aside (sidebars)

The aside element identifies content that is related but tangential to the surrounding content.

Citations

The cite element is used to identify a reference to another document, such as a book, magazine, article title, and so on.

Figures

The figure element is used for content that illustrates or supports some point in the text.

Footers

The footer element is used to indicate the type of information that typically comes at the end of a page or an article, such as its author, copyright information, related documents, or navigation.

Headers

The header element is used for introductory material that typically appears at the beginning of a web page or at the top of a section or article.

Identification with id

The id attribute is used to assign a unique identifier to an element in the document.

Highlighted Text

The new mark element indicates a word that may be considered especially relevant to the reader. One might use it to call out a search term in a page of results, to manually call attention to a passage of text, indicate the current page in a series.

Navigation

The new nav element gives developers a semantic way to identify navigation for a site.

Subscript and Superscript

The subscript and (sub) and superscript (sup) elements cause the selected text to display in a smaller size, positioned slightly below (sub) or above (sup) the baseline.

Word break

The word break (wbr) element lets you mark the place where a word should break if it needs to (a "line break opportunity" according to the spec)>

Abbreviations

Abbreviations are shortened versions of a word ending in a period (Conn. for Connecticut, for example). Acronyms are abbreviations formed by the first letters.

Lists

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.

Mark up tips

Chose the element that best fits the meaning of selected text.

Description Lists

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.

Mark up tips 2

Don't forget to close elements with closing tags

Long Quotations

If you have a long quotation, a testimonial, or a section of copy from another source, you should mark it up as a blackquote element.

Indicating a Shift in Themes

If you want to indicate that one topic or thought has completed and another one is beginning, you can insert what is called HTML5 a "paragraph-level thematic break" using the hr element.

Headings

In the last chapter, we use h1 and h2 elements to indicate headings for the Black Goose Bistro page. There are actually six levels of headings, from h1 to h6.

Performatted Text

It is a unique element in that it is displayed in a constant-width font (one in which all the characters are the same width, also called monospace), such as Courier

Heading Groups

It is common for headlines to have clarifying subheads or taglines.

Defining Terms

It is common to point out the first and defining instance of a word in a document in same fashion. In this book, defining terms are set in blue text. IN HTML, you can identify them with the dfn element and format them visually using style sheets.

More content elements

There are a few more special text elements to add to your HTML toolbox that don't fit into a neat caregory: long quotationts (blackquote), preformatted text (pre), and figures that they are considered "grouping content" in the HTML5 spec (along with p, hr, the list elements, and the generic div, covered later in this chapter).

Sections and articles

To divide long web documents into thematic sections, use the aptly named section element. Sections typically have a heading (inside the section element) and any other content that has a meaningful reason to be grouped together.