Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

The target is to provide the proper semantic for a page that briefly lists existent articles.

At the moment my idea is the following:

<body>
  <article>
    <header>
      <h1>Latest Articles</h1>
    </header>
    <article>
      <header>
        <h1><a href="/article-1">First Article's Heading</a></h1>
        <p>First article's brief description.</p>
      </header>
    </article>
    <article>
      <header>
        <h1><a href="/article-2">Second Article's Heading</a></h1>
        <p>Second article's brief description.</p>
      </header>
    </article>
    <article>
      <header>
        <h1><a href="/article-3">Third Article's Heading</a></h1>
        <p>Third article's brief description.</p>
      </header>
    </article>
  </article>
</body>

The page (let's call it an archive page) has the main article element containing children articles.

Each child has only header because the article does not represent the full version but just a brief.

Please, tell me if my version is semantically right (and why it is). Otherwise, propose your version.

UPDATED (AFTER THE ANSWER WAS ACCEPTED)

Example above is not full what may confuse and cause misunderstanding.

I'll try to clear this providing a fuller example with comments.

<body>
  <!-- Header is the same for all pages. -->
  <header>
    <h1>Website Title</h1>
    <p>Website description.</p>
  </header>
  <!-- Article presents the main content of specific page. -->
  <article>
    <header>
      <h1>Latest Articles</h1>
      <p>Last three articles in chronological order.</p>
    </header>
    <!-- This page lists existent articles. -->
    <!-- They are not inside a section element because it isn't a section of something larger but independent articles. -->
    <article>
      <header>
        <h1>First Article's Heading</h1>
        <p>Supplement to the first article's heading.</p>
        <p><a href="/article-1" rel="bookmark">Read more</a></p>
      </header>
    </article>
    <article>
      <header>
        <h1>Second Article's Heading</h1>
        <p>Supplement to the second article's heading.</p>
        <p><a href="/article-2" rel="bookmark">Read more</a></p>
      </header>
    </article>
    <article>
      <header>
        <h1>Third Article's Heading</h1>
        <p>Supplement to the third article's heading.</p>
        <p><a href="/article-3" rel="bookmark">Read more</a></p>
      </header>
    </article>
    <footer>
      <nav>
        <h1>Navigate Through Pages</h1>
        <p><a href="/page/1" rel="next">Newer</a></p>
        <p><a href="/page/3" rel="prev">Older</a></p>
      </nav>
    </footer>
  </article>
  <!-- Footer is the same for all pages. -->
  <footer>
    <p><small>Copyright (c) ...</small></p>
  </footer>
</body>

I just wanted to ensure if the semantic is corrent. It is. The question is clear.

share|improve this question
    
typo alert : article not atricle. –  Andiih May 1 '12 at 21:09
    
Thanks. It was misspelling caused by fast typing :) But you understand what I mean. –  evgenypavlyuk May 1 '12 at 21:15
    
Moved to Webmasters? Why? –  ThinkingStiff May 3 '12 at 18:40
add comment

migrated from stackoverflow.com May 3 '12 at 12:50

This question came from our site for professional and enthusiast programmers.

3 Answers

up vote 1 down vote accepted

Frankly, I'd do it exactly the same as I would in HTML4.

<body>
    <h1>Latest Articles</h1>
    <h2><a href="/article-1">First Article's Heading</a></h2>
    <p>First article's brief description.</p>
    <h2><a href="/article-2">Second Article's Heading</a></h2>
    <p>Second article's brief description.</p>
    <h2><a href="/article-3">Third Article's Heading</a></h2>
    <p>Third article's brief description.</p>
</body>

That's all you need. All your extra markup is providing no new information. This contains the same semantic information and the document outline is identical. If you need wrappers for styling, add <div>s as necessary.

share|improve this answer
    
I divide an article by sections like in the second part of the example. And if I have the heading element it must be inside a section or a header or other section element. But if I follow your example I can say my example is wright (I'd only place brief articles inside a section element like comments in this example). –  evgenypavlyuk May 2 '12 at 5:43
1  
@evgenypavlyuk - <body> is a sectioning root element. So the h? heading elements are inside a section element. h? elements implicitly start a section which ends when the next h? at the same or higher level is encountered. So the semantic structure is the same. To be clear, your approach is neither semantically wrong, nor HTML5 invalid, it's just a whole bunch of extra typing for no gain, and you're tying yourself in semantic knots completely unnecessarily. –  Alohci May 2 '12 at 6:42
    
It's not in my example, but I use the single body > header containing information related to the website itself (name, logo, etc.) on all pages. Thus body > article contains the page related data. That's why I use body > article as the root section element for content related to specific page. If my solution isn't wrong the question is clear. Thank you! –  evgenypavlyuk May 2 '12 at 9:18
add comment

Alright, I stole this from html5doctors.

html5 sectioning

From what this image says, I'd add a <nav> tag to surround your <article> tags.

The <header> tags don't make much sense since there is nothing below them. They're not needed. See here how to use them: http://html5doctor.com/the-header-element/

share|improve this answer
    
I think nav element cannot be used in this case. On the one hand W3C says the nav should be used for "links to other pages", but on the other hand "not all groups of links on a page need to be in a nav element" and "the nav element is appropriate for only sections that consist of major navigation blocks." I use header because it shows the heading of the article (alongside with a supplementation paragraph). Body is empty because it is presented on the article's page. Maybe put a link to the page ("read more") there? –  evgenypavlyuk May 1 '12 at 22:31
add comment

I would change your outermost <article> to a <section>, or remove it entirely. I would move your inner <p> elements outside of <header>, thus making them the body of the <articles>.

share|improve this answer
    
I've just thought of placing child articles inside section element. Basically that's wright (almost the same solution as a section for comments inside a regular article). But I want to keep the parent article element to provide heading for the archive (for example, "Latest Articles"). p element inside an article is not a part of its body. It's a supplementation for the heading, so this is okay. –  evgenypavlyuk May 1 '12 at 22:15
    
@evgenypavlyuk There is no reason to put an <h1> inside a <header> inside an <article> if there is nothing else in the <article>. <h1> already semantically denotes a header. So, <article><h1></h1><p></p></article> works, as does <article><header><h1></h1></header><p></p></article>. <article><header><h1></h1><p></p></header></article> adds no semantic value. –  ThinkingStiff May 1 '12 at 23:27
    
I use strict section semantic for a regular article (the second part of the example) avoiding usage of old practice (the first part of the mentioned example). I agree the header itself does not provide much semantic value. But brief description in my case is a supplement to the header (like here) and it is marked in the same way in the article. –  evgenypavlyuk May 2 '12 at 5:29
    
I apologize for confusing example. Brief description there is not a separate part from the header. It has a slightly different meaning for me. But it's not what I'm looking for. The real question is how the brief articles should be surrounded? Is the markup I provided wright (I'd only add there a section) or not? –  evgenypavlyuk May 2 '12 at 5:35
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.