• 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

XHTML Tag Types: Block and Inline

Before we get into the details of the basic tag sets for XHTML 1.0 Strict, we should cover briefly the two different types of tags in terms of document flow.

Block Tags

Block tags will take the tagged text, and separate it from the rest of the document flow. Examples of block level tags are headers, paragraphs, and divisions (the <div> tag). Certain block level tags can only be nested inside one another under specific circumstances. For example, we can't run a header tag inside of a paragraph, as the tagged header text would be yanked out from the rest of the paragraph itself, and cause an error in our document. However, all block-level tags can be nested inside of a div. It sounds a little confusing, but as we look at the structure and meaning of the tag sets, it will make more sense.

In-line/Phrase Tags

In-line tags, sometimes called phrase tags, are much easier to understand, in that they can be nested almost anywhere within a block-level tag. Examples of inline tags are strong, emphasis, and the anchor (linking) tag. These can go inside of paragraphs, headers, etc., and will not remove the tagged text out of the document flow.

However, in-line tags cannot stand on their own; we can't just have a set of <strong> tags as the first children of the body element somewhere (we'll talk more about parents, children, and siblings regarding tags in the CSS section).

A Great Web Resource of All Tags

Although I'll talk about basic tags in the following sections, the W3Schools has probably the best listing of all tags in HTML and XHTML.

Mixing it Up

One of the things that we'll discover in CSS is that we can change the display properties of tags to make them either block or inline; so even these definitions are fluid—we can, for example, make a list display inline, or a strong tag separate from the rest of the text; what's at issue are the visual and rhetorical reasons for doing so.

Updated on Mon. Apr. 9 2007 at 09:47PM