• Home
  • Sustainable Design
• A Sustainable Web?
  • A Foreign Concept
  • Glossary of Terms
• Design Concept
  • The Importance of Visual Design
  • Design Impact
  • Potential Harm of Good Design
  • Getting Started Designing
• Material Treatment
  • You Are How You Treat
  • Naming Files and Folders
  • Naming for Indexing and Clarity
  • Naming for Versioning
  • Mistreating Your Images: 7 Deadly Sins
• Document Structure (XHTML)
  • The Concept of a Markup Language
  • A Brief History of HTML
  • Basic XHTML Rules
  • XHTML DOCTYPE Declarations
  • XHTML Tag Types: Block and Inline
  • The Basic XHTML Tag Set: Block-level Tags
  • The Basic XHTML Tag Set: List Tags
  • The Basic XHTML Tag Set: In-line Tags
• Advanced Document Structure
  • Working with Classes and IDs
  • Classes in Action
  • IDs in Action
• Document Presentation (CSS)
  • Introduction to Cascading Style Sheets
  • Some CSS Vocabulary
  • CSS Selectors
  • CSS Properties: Text and Font
  • CSS Properties: Margin, Padding, and Border
• CSS for Design and Layout
  • Background Images
  • Image Replacement Techniques
• Introduction to PHP
  • What is PHP?
  • Repeating Content Across Pages

The Basic XHTML Tag Set: Block-level Tags

The basic set of block-level XHTML tags is actually pretty small; and the names of most of the tags actually match up with the typical language used to describe documents: headers, paragraphs, and lists.

Headers

There are six headers in XHTML 1.0: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Basically, the lower the number, the higher the semantic importance of the header. While there are no rules or guidelines on the use of headers per se, it's good practice to limit the use of <h1> to once or twice per page; I tend to think of Header 1 as sort of like the overall title of a work, with Header 2 as a subheadings, and Header 3 as sub-subheadings (I rarely find myself going all the way out to 4, 5, or 6). But that's just my own strategy, and it changes based on the rhetorical purpose of whatever document I'm marking up. If one header will do, I'll go with it, and adjust as more are needed.

Again, in the old days, people would choose header 1 because it made the text really big; but as we'll see with CSS, size doesn't matter. On certain pages of sites I make, header 1 might be visually smaller than header 2. That is, header 1 might be used for the name of a chapter which is made up of many sections, but I use header 2 for the names of the chapter sections, which is visually more important than the name of the chapter, which my readers will have seen many times.

The Paragraph

Although the paragraph tag (<p>) is sort of the catch-all tag (for instance, when you hit the Enter key in most WYSIWYG Web editors, it creates a new paragraph tag), semantically the paragraph tag should be limited to paragraph text, which for most text-heavy pages makes up the bulk of the content. Each paragraph should be marked up in its own set of paragraph tags, and as with all XHTML Strict tags, the paragraph tag must be closed.

The Blockquote Tag

Although technically a block-level tag, the blockquote tag (<blockquote>) must contain another set of block level tags (usually the paragraph tag). It is useful for marking up long passages of quoted material, set off from the main text (as in APA or MLA style).

Updated on Mon. Feb. 20 2006 at 12:05AM