Underscores step by step – Step 3, HTML layout

Before getting into the nitty gritty of applying CSS it’s worth taking some time to understand the HTML structure of the page in _s.

Conceptually I always think of an HTML page as a series of boxes each nested inside one another – each having a unique name with different types of boxes sharing characteristics.
In HTML terms there are three important ways of identifying and categorising these boxes:-

  • ID – a unique name used to identify a specific element on a page/document
  • Class – used to assign general properties to one or many elements on a page/document
  • Role –  ARIA “role” attribute helps make it easier for those using assisitive technology devices to navigate through the page

So for _s and most WP themes

  • Page container  <div id=”page” class=”hfeed site”>
    • Site header <header id=”masthead” class=”site-header” role=”banner”>
      • <hgroup>
      • navigation <nav class=”site-navigation main navigation” role=”navigation”>
    • Main content <div id=”main” class=”site-main”>
      • main area – primary <div id=”primary” class=”content-area”>
        • site content <div id=”content” class=”site-content” role=”main”>
      • widget area – secondary <div id=”secondary” class=”widget-area” role=”complimentary”>
      • widget are – tertiary <div id=”tertiary” class=”widget-area” role=”supplementary”>
    • Site footer <footer id=”colophon” class=”site-footer” role=”contentinfo”>
      • site info <div class=”site-info”>

Or to more easily visualise it https://themeshaper.files.wordpress.com/2012/10/html-visual1.png



Leave a Reply