CODEWITHSUNDEEP
htmlsemantic-markup
ximi
ximi

Reputation: 596

Is the HTML5 <article> tag appropriate for the text on this home page?

I had a little disagreement with a friend yesterday and rather than continuing a never-ending discussion I thought I'll just ask here.

I recently coded a site using HTML5 semantics. The page has relatively little content and I wrapped it in an article tag.

You can check out the page and it's source here: http://inneresauge.co/

And here is the lowdown for those that don't like clicking links...

<div id="container">
    <header>
    <h1 id="logo"><a href="index.html">Inneres Auge Co.</a></h1>
    <nav id="main-nav">
        ...
        </nav>
        ...
    </header>
    <article id="main">
        <p>We're <strong>Inneres Auge Company</strong>, a creative media company that knows no limits.</p>
        <p>We do everything and more, from mobile games and apps to web sites and platforms to video and audio production.</p>
        <p>The best thing about it?<br />
        We're amazing at all of them!</p>
        <p>Don't believe us?<br />
        Just see for yourself...</p>
    </article>
</div>

I figured section wouldn't be appropriate, because it really isn't an individual section of the page that could stand on its own, the text alone can however stand on its own without feeling out of place, that's why I figured article is the best choice.

What's the best choice here? article, section or maybe just a plain div because neither is a good match?

Please feel also free to mention if there is any other unsemantic/unproper usage of html elements.

Upvotes: 1

Views: 1262

Answers (4)

Paul D. Waite
Paul D. Waite

Reputation: 98886

Doesn’t look like an article to me. As per the spec:

The article element represents a 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.

http://dev.w3.org/html5/spec-author-view/the-article-element.html#the-article-element

I don’t think the text is really a self-contained composition that’s reusable. It’s marketing blurb, an introduction to the company.

Whereas <section>, I think, would be fine:

The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.

Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site's home page could be split into sections for an introduction [emphasis mine], news items, and contact information.

http://dev.w3.org/html5/spec-author-view/the-section-element.html#the-section-element

I don’t think it matters that you’d only have one section — the spec doesn’t say you need multiple <section>s. (And the company may well add additional sections to the page later on.)

It’s all a matter of interpretation, of course. And it doesn’t have a lot of practical consequences.

Upvotes: 1

juankysmith
juankysmith

Reputation: 12458

W3C Specification

The article element represents a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be 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.

Examples here

The article element is a specialised kind of section; it has a more specific semantic meaning than section in that it is an independent, self-contained block of related content. We could use section, but using article gives more semantic meaning to the content.

Upvotes: 1

Raynos
Raynos

Reputation: 169491

Whenever you ask yourself "Is this semantically correct?" you should consult "the oracles". They are

The important thing that W3 and WHATWG state is

independently distributable or reusable

So in your case <article> is not semantic.

The [WHATWG <section>] states

A section, in this context, is a thematic grouping of content, typically with a heading

Does the group of content have a header? I say yes. It is

We're Inneres Auge Company

If you don't think that content has a header then use <div> if you do think it has a header then wrap it in <header>

As a further aside you have <div><header></header><article></article></div> I think that outer div should be a <section>

Upvotes: 0

Ian Devlin
Ian Devlin

Reputation: 18880

To me it looks like div would be best fit here. An article generally actually has a heading, which yours doesn't. section would be appropriate if the site was actually split into more than one section, but as you said, yours isn't but I think it could still be used.

I wrote a bit about it: HTML5: Section or Article? which might help.

Upvotes: 0

Related Questions