Layout
Semantic Containers
Article Element
The article element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable.
Examples of articles would be: a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
Section Element
The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading. Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis.
Header and Footer
Header Element
The header element represents a container for introductory content or a set of navigational links. A header typically contains:
- One or more heading elements
- Logo or icon
- Authorship information
Navigation
Figure and Details
Figure Element
Details Element (Click to expand)
The details element creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state.
A summary element provides a summary, caption, or legend for the details.
Divs and Generic Containers
Div Element
The div element is a generic container for flow content. It has no effect on the content or layout until styled using CSS.
Another Div
Divs can be nested and used to create complex layouts.
Card Pattern
Using divs with appropriate CSS styling, you can create common UI patterns like cards.