What is the purpose of classes and IDs in Underscores starter theme?

The Underscores starter theme offers a specific HTML structure. Most parts of it are understandable. But there is one part that seems either unclear or superfluous.

Here is the outline:

div.site
header#masthead.site-header

div#content.site-content
div#primary.content-area
main#main.site-main
/* Here goes either article or archive content */

aside#secondary.widget-area
section.widget /* Multiple widgets */

footer#colophon.site-footer

So, all of the tags, IDs and classes more or less are understandable, except for this part:

div#content.site-content
div#primary.content-area
main#main.site-main

This same structure is used on both singular type pages and archives. Why on earth did they use three DIVs to wrap content?

Also aside#secondary.widget-area seems to be out of place. Looks like it should be inside div#content.site-content. Is there a specific reason why they’ve done it?

My hypothesis is that it’s just a kind of semi-phylosophical intention: it is a starter theme, and a developer has to move the aside#secondary.widget-area inside div#content.site-content, just for the sake of making a change.

Can anyone give a more pragmatic explanation of why they’ve structured their theme’s HTML this particular way?

Read more here:: What is the purpose of classes and IDs in Underscores starter theme?

Leave a Reply

Your email address will not be published. Required fields are marked *