Forum Moderators: Robert Charlton & goodroi
Trick to Google Ranks - Using Semantic Best Practices
This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
Semantic HTML is quite complex, and often not very intuitive. ... correctly using H1 to H6 should have the same effect in a most cases... <section> and <aside> seem to add complexity for little gain, and seem to be quite ambiguous.
<section>
<h1>Widgets</h1>
<p>....</p>
<section>
<h1>Red Widgets</h1>
</section>
</section>
<section>
<h1>Gadgets</h1>
section h1section section h1If one or more of the above <section>s is an article [basically: the topic is completely contained within], then it's called an <article> rather than <section>.
<main>
H1
H2
H2
H2
</main>
<footer>
H1
</footer>
The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page.
blockquote
The schema.org markup, which allows you to mark the main article as an article and comments as comments seems preferable to me.
The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.
The article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
Schema.org, microformatting, rDFA, etc. *do not* impact the document outline.
I don't find the definition of an aside nearly as confusing as you make it sound when I read the first paragraph that leads into the one you cited:
...The outline is:
1. Widgets
1.1 Red Widgets
2. Gadgets
but the visual appearance will show headings with the same appearance unless you add CSS to make section h1 different from section section h1
How often are quotes tangentially related in the way that ads usually are?
Does it mean you have to train users to markup quotes as blockquotes or asides depending on how important they are to the content?
You're right, just call everything a div and teach your CMS users to use schema.org markup -- Much easier.
H1
H2
H2
H2
<section>
H1
<section>
H2
</section>
<section>
H2
</section>
<section>
H2
</section>
</section>
So why bother with the latter?
Does it mean you have to train users to markup quotes as blockquotes or asides depending on how important they are to the content?
The average user typing stuff into a CMS finds it hard to understand the difference between an indented para and a blockquote, let alone between blockquote and an aside.
The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element, and optionally with in-line changes such as annotations and abbreviations.
http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-blockquote-element
The [aside] element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page.
The following example shows how an aside is used to mark up a pull quote in a longer article.
...
<p>He later joined a large company, continuing on the same work.
<q>I love my job. People ask me what I do for fun when I'm not at
work. But I'm paid to do my hobby, so I never know what to
answer. Some people wonder what they would do if they didn't have to
work... but I know what I would do, because I was unemployed for a
year, and I filled that time doing exactly what I do now.</q></p>
<aside>
<q> People ask me what I do for fun when I'm not at work. But I'm
paid to do my hobby, so I never know what to answer. </q>
</aside>
<p>Of course his work — or should that be hobby? —
isn't his only passion. He also enjoys other pleasures.</p>
http://www.w3.org/html/wg/drafts/html/master/sections.html#the-aside-element
Why an aside? So a screen reader, bot, etc. doesn't "flow" the quote into the section of content twice [once in the paragraph it's in and once where it's highlighted as a "pull quote"] like it would if it wasn't marked up correctly in the HTML. The structure indicates "move the content to the side" so the section's content reads/flows like it should.
That's the kind of insight that makes Webmaster World worth visiting.
A section forms part of something else. An article is its own thing. But how does one know which is which? Mostly the real answer is "it depends on author intent".
<nav itemscope itemtype="http://schema.org/SiteNavigationElement" role="navigation">
<aside role="complementary" itemscope itemtype="http://schema.org/WPAdBlock">
Even in your example above the <aside> makes sense, but the <section> tags make no difference to the outline.
Sections may contain headings of any rank, and authors are strongly encouraged to use headings of the appropriate rank for the section's nesting level.
Authors are also encouraged to explicitly wrap sections in elements of sectioning content, instead of relying on the implicit sections generated by having multiple headings in one element of sectioning content.
1. Are you styling your HTML5 elements or you just add HTML5 tags to the page while styling with divs?
"It depends on author intent" seems difficult to implement to me.
For example, should WW posts be inside <section> or <article> tags?
A comment on an article is not part of the article on which it is commenting, therefore it is its own article.
<nav itemscope itemtype="http://schema.org/SiteNavigationElement" role="navigation">
That does not seem right - but if we do not do that, which do we use?
Is this the correct structure?
Authors are also encouraged to explicitly wrap sections in elements of sectioning content, instead of relying on the implicit sections generated by having multiple headings in one element of sectioning content.
If you're looking for "the easy days of old" where throwing some text on a page, stuffing the keyword meta tag, then getting a bulk of links with what you wanted to rank for as the text, is the answer, then you're looking in the wrong place
A comment on an article is not part of the article on which it is commenting, therefore it is its own article
Schema.org and ARIA are to "further define", "redefine", "add granularity to" elements as "other than" or "more than" their default HTML meaning.
A world where ARIA is not necessary and where accessibility developers would be out of a job because the normal markup that everyone writes already creates accessible Web sites/applications would be much preferable over the current world of band-aids.
Therefore, to me, the primary use case for a <main> element is to achieve exactly this better world and not require specialized markup to tell a user (or a tool) where the main content on a page starts
You make the three sound as if they are coordinated much better than they are...
Is quoting a section of the standard draft marked "non-normative".
So I am back with using all three.
Also, regarding the relationship between the three types of semantic markup: sematic HTML5 is attempting to replace ARIA and schema.org.
WARNING: I am seeing new Google SERPS layouts that contain NO traditional results at all, they're pushing the envelope even further and now our content IS their results page. The entire page(below the ads) is just content from various sites with a footer credit link containing only your homepage url as anchor text(no link to the page the content was taken from, no title, no words in anchor text).
Don't be in such a hurry to give Google your content, you'll know why when you see one of these new results pages where the "google knowledge" entirely replaces the search results.
1. Are you styling your HTML5 elements or you just add HTML5 tags to the page while styling with divs?
I am asking because if you style HTML5 and an old browser (such as IE7, IE8 and even IE9] ignores an element it might probably drop its styling altogether.
There are scripts that add semantic HTML5 (NOT full HTML5, just makes a few elements show) support to older versions of IE. That is probably the best solution for now.
If Google can display a sentence of your content or even a paragraph and it fully satisfies the consumer causing you to go broke, then your business strategy needs rethinking.
...the <main> tag, which isn't an HTML 5 tag...
