HTML Conventions

Utilize widely-supported HTML5 elements when available for a more semantic and valid layout. This will help maximize SEO potential and ensure support for accessibility.

HTML5 elements should be lowercase (not camelcase or capitalized). For example: <header> instead of <Header> or <HEADER>.

Major Structural Elements

A number of these larger layout elements, core to the theme/layout, will replace many <div> elements that have traditionally been used.


The <header> element will specify a header for a page or section.


The <nav> element is the newest way to define your main navigation. This does not require the use of list elements and simply includes a set of <a> links inside of it.

Nav may have any necessary classes attached to it. For example: <nav class="main-navigation">.


The <section> element represents a standalone section (which doesn't have a more specific semantic element to represent it). This element will be a container for major sections of a custom page.

For example, this could be a homepage that has a unique layout unlike many other standard interior pages. You might also find <section> within <article> or <main> (or replacing it).

The <main> element will be a container for the main content column/portion of your document. The <article> element may also commonly be found within <main> just before the beginning of your article (wrapping the headings and paragraph content). For example, on a blog or news post page, this would be your actual article content. If you have multiple headings grouped together (ex. a main h2 heading and an h3 sub-heading), use <hgroup> to wrap all headings.


The <aside> element will define content sections that will accompany your main content areas. The most common usage would be for a sidebar.


The <footer> element will specify a footer in your layout.

Self-Closing Tags

HTML5 does not require void elements (elements that cannot have any contents) to contain their own closing tag. For example: instead of using <br/>, <hr/>, or <img src=""/>, you may now use just <br>, <hr>, and <img src=""> while still being considered valid.

Validation

When and where reasonable, the base theme core HTML should be 100% valid.

See examples for HTML conventions here: https://github.com/DivcomWebTeam/platform_base_theme#8-html-conventions