Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Structure and naming patterns

Structure and naming patterns

A working document for more consistent naming patterns and document structures.

Landmark blocks

The structural landmark roles make up the outer containers within a site. These are the building blocks and SHOULD contain attributes describing the role they serve.

  • banner: site-oriented content may include the logo, primary navigation and site-specific search, ONE of these per page
  • navigation: a collection of navigational elements for navigating the document or related documents
  • form: yeah so, don't really think we need to explain this one
  • search: search tool used to find documents related to the site, associated with an input, ONE of these per page
  • main: the main content that is directly related to the page, ONE of these per page
  • complementary: supporting section of content related to the document
  • contentinfo: metadata that applies to the parent document and site, ONE of these per page

Document components

  • region: block or element: a section of a page or document that may be included in a page summary
  • article: block or element: section of a page that consists of a composition that forms an independent part of a document
  • header: block or element: associated with header content of a component
  • summary: block or element: summarizing the content of a component
  • note: block or element: a section whose content is parenthetic or ancillary to the main content of the resource
  • footer: block or element: hosting the contentinfo of a component
  • directory: block or element: list of references to members of a group
  • group: block or element: a set of UI objects not intended to be included in a page summary
  • list: block or element: a group of non-interactive list items
  • listitem: block or element: a single item as a descendent of a list
  • heading: block: typically one of the h1-h6 elements
  • figure: block or element: a container with an image and related contents
  • img: element: a container for a collection of elements that form an image

Navigation components

  • menubar: block or element: container for navigation similar to a desktop GUI
  • menu: block or element: typically the ul or ol and a descendent of menubar
  • menuitem: block: an option in a group contained by a menu or menubar
  • separator: block or element: a divider that separates and distinguishes sections of content or groups of menuitems
  • navbar: block or element: container for site level navigation
  • nav: block or element: typically the ul or ol and a descendent of a navbar
  • tabbar: block or element: container for tab navgiation
  • tablist: block or element: typically the ul or ol and a descendent of a tabbar
  • tab: block or element: an option in a group contained by a tablist
  • tabpanel: block or element: a container for resources associated with tabs in a tablist
  • tree: block or element: container for tree style navigation
  • treeitem: block or element: an option in a group contained by a tree
  • toolbar: block or element: a collection of commonly used function buttons represented in compact visual form
  • link: block or element: a static element similar to the anchor tag
  • button: block or element: an input that allows for discrete user-triggered actions

Window components

  • dialog: block or element: a window designed to interrupt the application in order to prompt the user for a response
  • alertdialog: block: a type of dialog that contains an alert
  • status: block or element: a container whose content is advisory information
  • alert: block or element: a specialized status message, with important and usually time-sensitve information

Widget components

  • progressbar: block: a component that displays progress
  • slider: block or element: a component where a user selects a value within a given range
  • tooltip: block: a contextual popup that displays a description for an object

Notes

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.