Pro HTML5 and CSS3 Design Patterns

CHAPTER 2 HTML DESIGN PATTERNS

HTML Structure

Problem You want to know how HTML elements work together to create an HTML document.

Solution HTML is a strict hierarchical nesting of elements. Elements may be nested within each
other, but they cannot overlap each other. HTML organizes elements into three major
categories: structural, block, and inline elements.
The core structural elements are , , and . Information about a
document goes in and document content goes in . Header elements are
covered in the Header Elements design pattern discussion.
There are three types of block elements: structural, multi-purpose, and terminal. These are
covered in the following design pattern discussions: Structural Block Elements, Terminal
Block Elements, and Multi-purpose Block Elements.
There are three major types of inline elements: semantic, flow, and inline-block. These are
covered in the Inline Elements design pattern discussion.

Pattern HTML Core Structure

<!DOCTYPE DOCUMENT_TYPE_DEFINITION_USED_FOR_VALIDATION >^

Example The example contains the simplest expression of each common HTML element.
The concept behind the