XF 1.0 Semantic HTML

From the outset, XenForo has been built with semantic HTML in mind in order to facilitate styling, boost SEO and give a helping hand to screen reading software.

The W3C provides a useful Semantic data extraction tool that allows the efficacy of this approach to be tested.

Take a look at how easily the tool extracts the important content from an example thread here on XenForo.com:

Semantic Data Extraction for 'Multi-page Navigation Enhancement' thread

 

[Dismounted]

as a certain ghastly browser is still unable to apply styling to HTML5-specific tags, even in version 8

No hint there at all as to which browser this is...

 

[welshstew]

Absolutely right - although you will find that XenForo uses conventions such as

<header>
    <div id="header">
    ...
    </div>
</header>

as a certain ghastly browser is still unable to apply styling to HTML5-specific tags, even in version 8

Why not use html5shiv - which will enable it in IE: http://code.google.com/p/html5shiv/

More info available on Remy Sharps blog: http://remysharp.com/2009/01/07/html5-enabling-script/

 

[Mike]

If you disable JS, it breaks. And this was IE6, but I did run into a situation where the shiv concept failed on dynamically included content.

 

[simbolo]

Absolutely right - although you will find that XenForo uses conventions such as

<header>
    <div id="header">
    ...
    </div>
</header>

as a certain ghastly browser is still unable to apply styling to HTML5-specific tags, even in version 8

I noticed you're using the <nav> tag twice. Once within the header and once within breadcrumbs. Since one of semantic markup's goals is for seo purposes and, as has been pointed out, some believe that google may penalize for duplicate content within a page. Is this an attempt at preventing google from seeing duplicate content and if so do you have anything to support this notion? Or is it simply following proper markup according to W3C and hoping that Google/Bing/etc use it correctly? (I've employed it the same way, but just curious on your thoughts.)

 

[Forsaken]

I noticed you're using the <nav> tag twice. Once within the header and once within breadcrumbs. Since one of semantic markup's goals is for seo purposes and, as has been pointed out, some believe that google may penalize for duplicate content within a page. Is this an attempt at preventing google from seeing duplicate content and if so do you have anything to support this notion? Or is it simply following proper markup according to W3C and hoping that Google/Bing/etc use it correctly? (I've employed it the same way, but just curious on your thoughts.)

<header>, <nav>, <section>, <article>, <aside> are meant to be re-used.

nav
The nav element does exactly what you think it does. It contains
navigation information, usually a list of links.

Actually, I’d better clarify that. The nav element is intended for
major navigation information. Just because a group of links
are grouped together in a list isn’t enough reason to use the
nav element. Site-wide navigation, on the other hand, almost
certainly belongs in a nav element.

Quite often, a nav element will appear within a header element.
That makes sense when you consider that the header
element can be used for “navigational aids.”

From the ebook HTML5 for Web Designers.

 

[simbolo]

This I know, as I noted with the W3C mention. I suppose my real question is if there was any knowledge that search engines already pick up on this as a way to segregate out duplicate content that should be ignored preventing a potential penalty?

 

[Floris]

Google has expressed themselves about this already that a page can simply have multiple navigation elements, and they do not punish for this (SEO wise). It's another one of those SEO-myths.

 

[Forsaken]

Really, there are few things that will get you penalized out of blackhat seo methods, and thats just asking to be penalized.

Google has been involved with the HTML5 implementation with the W3C and WhatWG for a while (Either as a company, or through many of their employee's).

 

[Anthony Parsons]

Absolutely right - although you will find that XenForo uses conventions such as

<header>
    <div id="header">
    ...
    </div>
</header>

Yer... that's not your fault though. Whilst I would love to think things will change rapidly once IE9 is released, I know it won't due to the backwards compatibility issues with IE8 < that people will hang onto for another decade, just like every designers best friend, IE6.

I really don't like Microsoft some days. The next decade will be just as annoying as the last due to IE6, with the change to HTML5. It will be difficult to fully implement HTML5 due to backwards compatibility issues, let alone the nightmare with CSS3 and the joys it opens up to us, yet will also remain totally useless due to the above IE issues. Kind off frustrating...

 

[Brendon Meynell]

This is fantastic and a great thing for SEO. I think this is a winner when it goes to market.

 

[Erdi İşgören]

SuperB system...

 

[Gravity]

I had a question on this. It would be nice if paragraphs had the <p> around them, which would let me use padding before/after in my stylesheet. That looks really nice typographically. Also, I think it's in HTML 5. Currently, <p> is not used. I presume that's a decision, not oversight, so am curious to see if it could be reviewed so that paragraph spacing could be implemented.
Here is a post's current HTML in xenforo:

<article><blockquote class="messageText ugc baseHtml">I'll be using xenforo posts as <i>content</i>, with articles written inside them (context: we're going to use xenforo for the new site instead of WordPress). It will be very helpful to keep revisions of posts so I can revert to an earlier version if necessary.<br />
</blockquote></article>

 

[karrott]

You could just use some simple css to change the top and bottom padding of HTML 5 tags. You can actually simulate paragraph tags quite easily.

I still don't know why they used <blockquote> though.

 

[Gravity]

I also wondered about blockquote, since there was no quote, it's the article.

 

[c270774]

HTML, their is both advanced and basic. Good system, I want to adopt it!

 

[Kier]

You could just use some simple css to change the top and bottom padding of HTML 5 tags. You can actually simulate paragraph tags quite easily.

I still don't know why they used <blockquote> though.

Blockquote is the closest semantic tag to what we want that will allow styling under Internet Explorer. It's meaning us interpreted well by that w3c test.

 

[karrott]

Blockquote is the closest semantic tag to what we want that will allow styling under Internet Explorer. It's meaning us interpreted well by that w3c test.

I see; that makes sense. I'm glad that you guys are still developing with IE in mind.

 

[zZJoennZz]

Loos nice!

 

[DRE]

will custom skins have an effect on this?

That depends what you edit of course. If you only change CSS, it will have no effect at all. If you edit the HTML you would need to be careful to maintain the presence of specific tags in order to retain the semantic meaning of the page.

*is glad I don't touch the templates when creating styles after reading this*