Drupal Theme Standards

XHTML Markup Standards

Every New Media Logic template should share nearly identical XHTML structures. They should include each of the following elements. Certain elements may be omitted, but only if the feature is not needed. Do not omit elements in this list while replacing them with an alternately-named element that serves the same purpose.

Required Elements

div#page

This element will usually be the first child of the body tag. It should wrap the entire content of the web page, including the header, footer and content area. Exterior page margins and borders should be defined through styling of this element.

div#header.clearfix

This element will contain the page's masthead, logo and other common content for the page's top. It should have the clearfix class assigned so that floated child elements will cause the #header div to fully contain them.

div#content.clearfix

While the #header and #footer will contain virtually identical contents for every page in the site, the #content div will contain different content for every page in the site. The #content div is usually a wrapper for internal elements that further divide both structure and layout, but it may contain direct descendants of content markup.

div#primary

The #primary div should contain the primary content of the page. If the page is an article, #primary should content the text of the article, the article's title, the byline, and all supporting images and media. In some cases, the #primary div will also contain certain navigation elements (breadcrumbs, related stories, etc). In a four-column layout, #main may be split into two columns, #primary-left and #primary-right.

div#secondary

This div contains content that is of a lower priority than that in the #primary div. It may contain global or local navigation, supporting content (related or unrelated to the #primary div), or just about anything else.

div#tertiary

This div contains content that is of a lower priority than that in the #secondary div. It may contain global or local navigation, supporting content (related or unrelated to the #primary div), or just about anything else.

div#footer.clearfix

This div will usually be the last element contained by the #page div. It should contain content common to all pages, and may contain footer navigation, sitewide privacy or copyright notices, or footer branding.

Optional Elements

div#primary-left

This should only be employed as a means to create a four-column layout by dividing the #primary div into two columns. This div will contain the entirety of the second column's contents.

div#primary-right

This should only be employed as a means to create a four-column layout by dividing the #primary div into two columns. This div will contain the entirety of the third column's contents.

div#extra1

Contains content independent of the rest of the page. For this reason it will sit outside the #page div. This element will likely be absolutely positioned to avoid interfering with #page and its contents.

div#extra2

Contains content independent of the rest of the page. For this reason it will sit outside the #page div. This element will likely be absolutely positioned to avoid interfering with #page and its contents.