7
\$\begingroup\$

Is this the good way to create a portfolio article in HTML5 or do you have any suggestions?

Not sure about the section but I need it as overlay over the image. Is it better to use a DIV instead?

<article class="three columns remove-all project">
   <section class="project-information">
     <header>
       <h4>Ski Trail</h4>
       <time datetime="2010-03-20">20th March, 2010</time>
     </header>

     <p>
       <span class="tag">Graphic</span>
     </p>
   </section>

   <img src="http://placehold.it/291x216" class="img-scale" alt="">
</article>
\$\endgroup\$
3
\$\begingroup\$

A good reference for element semantics would be HTML5 Doctor. You can read all about the tags and their intended purposes. From their overview for <section>, <article> and <div>:

Section

Represents a generic document or application section. In this context, a section is a thematic grouping of content, typically with a header, possibly with a footer. Examples include chapters in a book, 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, news items, contact information.

Article

Represents a section of a page that consists of a composition that forms an independent part of a document, page, or site. This could be a forum post, a magazine or newspaper article, a Web log entry, a user-submitted comment, or any other independent item of content.

Div

The div element has no special meaning at all. It represents its children. It can be used with the class, lang, and title attributes to mark up semantics common to a group of consecutive elements.

Their analogy of <section> is a chapter, an <article> is a section of the page. Chapters contain articles, not the other way around. A <div> might be more appropriate, since it has no meaning.

\$\endgroup\$
1
\$\begingroup\$
  • You probably don’t want to use a section there, as it’s a sectioning content element which creates an entry in the outline. If you need a wrapping element, use div.
  • The tags would typically be part of a footer element of this article, unless you’d consider them part of this article’s main content.

So it could look like:

<article>
  <div>
    <header>
      <h4>Ski Trail</h4> <!-- you could also use <h1> instead -->
      <time datetime="2010-03-20">20th March, 2010</time>
    </header>

    <footer>
      <span>Graphic</span> <!-- may want to use a <ul> -->
    </footer>
  </div>

  <img src="…" alt="…">
</article>

Note that the main content of this article (which is a sectioning content element) would be the image, as the content in header and footer would be considered metadata.

\$\endgroup\$

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.