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.