Upcoming Changes in HTML5 Version of Suffusion

I have more or less completed the changes for the HTML5 version of Suffusion (probably Suffusion 4.1.0 or 4.2.0). A lot of folks think that HTML5 compatibility simply means that your site has to pass HTML5 validation. That would be doing HTML5 for all the wrong reasons. Here is why:

  1. The W3C markup validation service for HTML5 is still in its experimental stages, because a lot of aspects haven’t been finalized yet. Getting a “valid” or “invalid” result doesn’t really mean much. Just like the ampersand validation errors in XHTML were more of an irritation rather than something indicative of serious errors in your markup, HTML5 has its own quirks, some of which haven’t been worked out in the WordPress core (E.g. Category links fail on validation).
  2. One significant advantage of HTML5 is semantic markup. What is semantic markup? Simply put, it is markup that is context-aware. Here are some examples:
    1. This site’s header in a prior version of the HTML would use an H1 or H2 tag enclosed in a <div>. That works fine for your layout, but what about the site tagline? Isn’t that a part of your header too? HTML5 solves this by letting you define a separate <header> tag.
    2. In the older standard the widgets in your site were <div>s, as were the post contents. Again, from the point of view of your layout this is fine, but to a robot your post content is probably as relevant as your widgets. To address this HTML5 gives you <article>, <section> and <aside> tags.

    There are several other new tags that support semantic markup.

  3. Several new tags can be used in your posts, such as <video>, eliminating the need for Flash-based players on compliant browsers.

Coming to the true point of this post, to take advantage of the semantic markup tags, the following changes will be made:

  1. Changed from <div> to <header>
    1. The site header (#header)
    2. The title container for posts (.title-container)
  2. Changed from <div> to <nav>
    1. The navigation bars: Navigation Bar Above Header (#nav-top) and Navigation Bar Below Header (#nav)
    2. Page links (.page-links) which show up when you put <!--nextpage--> in posts
    3. Post navigation (.post-nav), which shows the previous and next post
  3. Changed from <div> to <footer>
    1. The post / page footer, that shows up at the bottom of each post / page (.post-footer)
    2. The site footer (#page-footer, #cred) is enclosed in new <footer> tags
  4. Changed from <div> to <article>
    1. Post content (.post)
    2. Page content (div.page)
    3. Posts in the tile layout (.suf-tile)
  5. Changed from <div> to <section>
    1. Author Profiles (.author-profile), shown at the top of author archives or in the “Authors” template
    2. Category Information (.info-category), shown at the top of category archives
    3. Tag information (.info-tag), shown at the top of tag archives
    4. Search preface, shown at the top of search results
    5. The comments section for each post or page (#comments)
    6. The different sections of the Magazine layout, for headlines (.suf-mag-headlines), excerpts (.suf-mag-excerpts) and categories (.suf-mag-categories)
    7. Widgets in the Custom Layout widget areas (.cl-widget)
  6. Changed from <div> to <aside>: Widgets in the following widget areas:
    1. Sidebar 1 (#sidebar-1) – boxed and flattened styles
    2. Sidebar 2 (#sidebar-2) – boxed and flattened styles
    3. Sidebar 1 Bottom (#sidebar-1-b)
    4. Sidebar 2 Bottom (#sidebar-2-b)
    5. Widget Area Below Header (#horizontal-outer-widgets-1) – boxed and flattened styles
    6. Widget Area Above Footer (#horizontal-outer-widgets-2) – boxed and flattened styles
    7. Top Bar Right Widgets (#top-bar-right-widgets) – if the widgets are displayed as a sliding panel
    8. Wide Sidebar Top (#wsidebar-top) – boxed and flattened styles
    9. Wide Sidebar Bottom (#wsidebar-bottom) – boxed and flattened styles
    10. Adhoc Widgets (#ad-hoc-1, …, #ad-hoc-5)

    Note that the widget areas are still <div> elements, but the widgets in these areas are <aside> elements instead of div.

The above list may be changed further.

How does all of this affect you?

Two words: Custom Styles. Very often you use a custom style to override some theme setting. Sometimes in order to be very specific you might rely on a setting that will no longer work. E.g. If you wanted to set the background for a widget, there is a high likelihood that you used this:

div.suf-widget { background-color: #abcdef; }

This will not work any more. You can try knocking off the "div" above, or say:

aside.suf-widget { background-color: #abcdef; }

If you wish to have your site work seamlessly for the next major version, you might want to include the additional CSS above.

From what I have observed on the forums, div.suf-widget, div.suf-horizontal-widget, div.suf-flat-widget, div.post and div.page seem to be common usages. These will need to be modified to either aside.suf-widget, aside.suf-horizontal-widget, aside.suf-flat-widget, article.post and article.page respectively or to .suf-widget, .suf-horizontal-widget, .suf-flat-widget and .post (you will still need to qualify .page with article, because otherwise .page might refer to the body element as well).

And there are two other words why this affects you: Child Themes. If you have a child theme where you have made a copy of a core file, you will need to tweak the tags in the file to suit the new changes. Some files that you may have changed would be single.php or layout-blog.php or layout-list.php or layout-tiles.php or layout-mosaic.php or index.php. In fact, any template file you have copied is likely to get affected.

If you have any questions regarding this do let me know.

I will probably require help beta-testing this release, so I will keep you posted.

6 Responses to “Upcoming Changes in HTML5 Version of Suffusion”

  1. Looking forward to the HTML5. Thanks for all your hard work Sayontan in makin Suffusion such an awesome Theme.

  2. Thanks Sayontan.

    Ready for beta testing when it’s ready.

  3. […] If you are wondering what semantic markup means, I explained the term and the attendant changes in a post in March. If you go through that post, you can see the list of markup element changes as […]

  4. Hello Sayontan,

    Thank you for all your commendable work on Suffusion. I am new studying web design and enjoying your theme immensely.

    I have however a small problem in that I can’t seem to center text/widgets within their widget areas…I have followed your above guidelines but I must be doing something wrong…What would you recommend?

    Thanking you in advance,

    Anne

    p.s: I don’t have a live website yet so cannot provide a link.

  5. Sayontan, does this mean that if we have custom CSS for a plugin we need to change the div to aside or do we wait for the plugin to be HTML5 compatible?

    • You can change the div to an aside. The containers of widget data are determined by the theme, and the widget data itself is determined by the plugin. So you don’t have to wait for the plugin to become HTML5 compatible (it would be, by default).