5

If I put the article title (which is also the main title of the page) outside the <article> tag, the document outline has the main title of the page being the article title. Which seems desirable.

i.e.

<h1>My wonderful article</h1> 
<article>   
     <p>Text of my article</p> 
</article>

However the <article> tag specification says

The article element represents a section of content that forms an independent part of a document or site;

My interpretation of that is to be an "independent part" it needs the article title in it. The title is definitely a dependent part of the article.

However, if you put the article title in the <article> tag, the page is untitled in a document outline.

What is best practice here?

Igor Gilyazov
  • 777
  • 1
  • 6
  • 14
DanSingerman
  • 36,066
  • 13
  • 81
  • 92
  • Why not use one title for the page and other title for the article ? Also if the main content of the page contains only single article, then `article` element is redundant. – Igor Gilyazov Jul 25 '14 at 14:02

1 Answers1

3

When the document only contains this article, then omit the article element:

<body>
  <h1>My wonderful article</h1>
  <p>…</p>
</body>

When the document contains also other things (like a site-wide navigation, a sidebar with related articles etc.), then you don’t want the article’s heading to be the document’s heading:

<!-- wrong! -->
<body> 
  <h1>My wonderful article</h1>
  <article></article>
  <nav></nav>
</body>

Why? Because the site-wide navigation should not be in scope of a heading which is only about the article. The document heading should describe the whole content of the document, not only its main part. So you need such an additional document heading.

Either provide a document heading explicitly (typically¹, the site name is used) …

<body> 
  <h1>My wonderful site</h1>
  <article><h1>My wonderful article</h1></article>
  <nav></nav>
</body>

… or omit it (… if you must; which requires you to use sectioning elements wherever appropriate), essentially creating an unlabeled entry in the outline:

<body> 
  <article><h1>My wonderful article</h1></article>
  <nav></nav>
</body>

(¹ Some of my related answers with more details: 1, 2, 3.)

Community
  • 1
  • 1
unor
  • 92,415
  • 26
  • 211
  • 360
  • Semantically I tend to agree. But then displaying this I think it is valid for the primary title on the page to be that of the article, not another title for the site. Which seems contradictory to this. – DanSingerman Jul 25 '14 at 16:25
  • @DanSingerman: *Visually* you mean? Sure, you can give more graphical weight to the article heading; you could even visually hide the document/site title (which would be unusual, as the site name/logo is typically shown all the time, right?). – unor Jul 25 '14 at 16:40
  • If you show a logo but not some text for the site name, then that is going to be no good for a document outline. If you hide the title that is bad for SEO (I think google see it is possibly black hat) – DanSingerman Jul 25 '14 at 17:13
  • @DanSingerman: The document outline does not have to consist of text elements only. In case of an `img`, the `alt` content will be used by user-agents not supporting images (`

    …

    `). --- Visually hiding headings is not per se bad; it’s a common practice for structural headings (for example "Navigation"). It depends on *why* you want to hide *which* heading. But I guess that’s beside the point (discussing SEO is off-topic here), as that was only an example about how the styling doesn’t influence the document outline.     – unor Jul 25 '14 at 22:34