3

I have a home page of a blog where I have the img, title, date, and a brief summary or intro for each post. Then a link to the full text in another page. I am not sure how I should use <article> tags in the home page of the blog.

  1. Should I use article for each post? (remember here I do not have the fulltext)
  2. I shouldn't use article at all? Perhaps I should use only section for each post?
  3. Perhaps the article is the group of all the posts and each post is a section?

I am not sure how to apply what I have found:

W3C says: "The <article> element represents an independent item section of content"

w3schools says: "The tag specifies independent, self-contained content. An article should make sense on its own and it should be possible to distribute it independently from the rest of the site."

<div id="all">

<article id="1">
<img src="img-1.png" alt="alt of the img" > 
<h3>Title 1</h3>
<div>Last update 2017-04-13</div>
<div class="text">Summary or introduction of the post</div>
<a class="more" href="post-1">More</a>
</article>

<article id="2">
<img src="img-2.png" alt="alt of the img" > 
<h3>Title 2</h3>
<div>Last update 2017-04-13</div>
<div class="text">Summary or introduction of the post</div>
<a class="more" href="post-2">More</a>
</article>

</div>
1

Your code sample is a correct use of the article tag. Essentially, it is a semantics thing and can be used whenever you have grouped content with a changing repeatable element.

To be fully (and pedantically) correct, you would also use a main tag around all of the article tags to introduce the main idea/grouping relationship of the articles but I very rarely see that and almost never use it personally.

At the end of the day, semantic markup can help the more advanced search engine spiders classify your content but there are so many other signals involved that forgoing it usually does not produce any significant penalties.

  • You would not put main around an article tag. <main> is used for the significant content within another element and not a parent element, such as article. Using main around article would be similar to putting a div around it. What would be the point of the div? – Rob May 25 '17 at 23:02
  • @Rob: It’s appropriate to put all the article elements in a main element in OP’s case (a blog’s homepage), because the article teasers are (typically) the main content of that page. – unor May 26 '17 at 15:17
  • 1
    @unor Yes. I may have misinterpreted what he wrote as being main around each article – Rob May 26 '17 at 15:35
  • @Rob I never said each in my answer and took pains to specifically say all. If you downvoted me because of that, I would appreciate a correction. – JCL1178 May 27 '17 at 2:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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