Write the HTML markup for several of (profile picture + message heading + message)

Question

I was asked to write the HTML markup and CSS like the following:

1. User's profile picture on the left
2. his message heading
3. his message content

I was so concerned with how to correctly make it displayed (with JavaScript data and render it into HTML, and the HTML would result as:

<div class="comment-section">
  <div class="comment">
    <img src="http://i.imgur.com/IKaRi8s.jpg"><div class="comment-text"><h4>heading</h4><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div></div>
  </div>

  <div class="comment">
    <img src="http://i.imgur.com/972Ww14.png"><div class="comment-text"><h4>heading</h4><div>content...</div></div>
  </div>

  <div class="comment">
    <img src="http://i.imgur.com/kS6KI6K.jpg"><div class="comment-text"><h4>heading</h4><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div></div>
  </div>
</div>

with CSS

.comment-section { width: 400px; font: 13px Arial, sans-serif; }
.comment-section .comment { margin: 10px 0; }
.comment-section img, .comment-section .comment-text { display: inline-block; }
.comment-section img { width: 50px; height: 50px; margin-right: 5px; }
.comment-section .comment-text { vertical-align: top; width: 340px; }
.comment-section h4 { margin: 0 0 2px; }

Example at: https://jsfiddle.net/zayquc9q/2/

Should I actually have used <li> and <p>:

<ul class="comment-section">
  <li>
    <img src ...><div class="comment-text"><h3>heading</h3><p>content...</p></div>
  </li>

  <!-- ... other li like above -->

</ul>

Or <section> and <article> instead?

<section class="comment-section">
  <article>
    <img src ...><div class="comment-text"><h3>heading</h3><p>content...</p></div>
  </article>

  <!-- ... other article like above -->

</section>

So although what I did looked pretty good in the real webpage, I don't know whether it was that it wasn't semantic markup that they disqualified me (for a JavaScript / React / Redux position), after this phone interview.

Answer 1

If it's all about semantic then let's see what HTML5 specs say (emphasis is mine):

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.

In this case it seems that <article> is an appropriate choice for your comments. Is it <section> an appropriate container? I don't think it is, specs says:

The section element represents a generic document or application section…The section element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.

I agree that interpretation can be little bit subjective here but I'd take it literally: you do not have a specific header for this section. In your case if <section> is not to group a section of your document (for example an outer <article> with its list of comments) then I'd use the good old <div>:

<div class="comment-section">
  <article>
  </article>
</div>

If, however, comments are just a part (section) of your main document which you may want to see in document outline and not simply a styling container (remember that it's important for screen-readers and all the others assistive tools) then don't refrain and use <section>.

---

Now let's talk about article content. You're using <h4> for styling purposes. I don't see whole page outline then I can't comment on this but keep in mind that heading elements should be used to denote an hypothetical structure, not for their styling. Imagine to replace your <h4>Title</h4> with <div class="header">Title</div> where div.header is appropriately styled. Does the meaning of your document is lost? If answer is no then you're using heading elements because of styling and you shouldn't.

HTML5 introduced a new element which may be appropriate in your case:

<div class="comment-section">
  <article>
      <header>...</header>
  </article>
</div>

Note that even if you really want to keep because of its meaning in document outline I'd wrap it inside an <header> section.

<div class="comment-section">
  <article>
      <header>
          <h4>Title</h4>
      </header>
  </article>
</div>

What is it useful for? For example if tomorrow you will add subtitle to hold the date and the author of the comment...

Now let's think about <img>. First of all it has to have an alt attribute but I'd also consider to move it into its own <aside> element. It may help screen readers to keep "focus" on the content. About this...do not forget to include all the proper aria- attributes!