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

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.

• Please include the full code you would like reviewed in the body of your post, rather than just small stubs of the code. Apr 11 '17 at 1:41
• ok, i meant to ask about div vs ul vs section and article, and leave the minor details out. But if you wanted it, here there are Apr 11 '17 at 5:41
• In my opinion, the ul-li type of design would have been inappropriate for any structure which is not, well, a list of things (which these are not). The session-article design I think can make sense, although in the greater context of a page as a whole, it may or may not be more appropriate than generic divs. Apr 11 '17 at 6:16
• I also have seen some people do it almost in such fashion: whenever it is iterating through an array of something, such as an array of comments, they use ul and li. I think you can say that it is a "list" of (profilePicture + comments). One mind-boggling markup I have seen were the star-rating system. It was a list of 5 items: 1 to 5 stars which are radio buttons, and then it is styled to be the horizontal star-rating bar such as the one you see on Amazon.com or Apple.com Apr 11 '17 at 7:34
• That's creative, to say the least! Apr 11 '17 at 8:31

1 Answer

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!

• let me make a comment about <h4> first... it does have semantic meaning, because just as an author may use <h1> for the search engines and screen reader (for the visually challenged), then the <h1> can be taken as the main topic of the document, and then even <h3> for "users' comments" and <h4> for each heading of comment. Say, if a search engine found "fish oil healthy" in an <h4> or <h3>, it will have higher weights (than <p>) to associate with it when providing search results Apr 11 '17 at 17:51
• <img> with alt... that's good. I think if we do care a lot about the markup, really, the HTML linting will tell us what is missing. Besides, this is for a mainly Object Oriented JavaScript programming with React / Redux. Don't know why they so nit pick on HTML and disqualify people just based on HTML. In my experience, good JavaScript people are difficult to find... many JS developer don't understand prototypal inheritance or closure too well. If they hire a so-so JS developer for OO JS dev, and expert in HTML, I think they got the priority reversed. Apr 11 '17 at 17:58
• Can they find expert OO JS dev and also expert in HTML. They can, but if expert in OO JS dev is hard to find to begin with, it is like a wild goose chase to find the person who is also expert in HTML Apr 11 '17 at 18:00
• Agree about h4, if properly placed then it's perfectly valid and meaningful there. About their selection process...well I'd say it's little bit weird, new HTML5 semantic elements have been taken wrong by almost everyone, specs are (obviously) vague and...I don't know what they're looking for. Apr 11 '17 at 18:08
• yes, I see on Glassdoor.com that many companies do that... not sure why, maybe just the recruiting dept just want to keep itself busy so that they don't get laid off. They can phone screen you, ask you to do the same small project they ask everyone to do that can take 5 to 8 hours, and then after you submit it, say that they already filled all the positions or their engineers thought you did well, give you a tech phone interview, told you that you did well, but two days later tell you they will consider other candidates. Apr 11 '17 at 23:30