Review of HTML markup for this blog concept

Question

I am creating a blog concept with this layout on CodePen

screenshot

Here is my current code in development

<article class="post">
 <h2>Skating Down Venice Beach</h2>
 <img src="http://s1.favim.com/orig/20/skate-skateboard-skinny-jeans-vans-Favim.com-205640.jpg"> 
 <a href="#" class="readMore">
 <i class="fa fa-list-ul"></i>
 </a>
 <div class="hide">
 <h4>Venice Beach</h4>
 <p>Literally trust fund Helvetica dreamcatcher selfies. Pinterest aesthetic organic Echo Park artisan meggings tousled Tumblr, Pitchfork gentrify raw denim yr you probably haven't heard of them banjo. Street art Wes Anderson ethnic ethical authentic, High Life swag ennui. Wolf cardigan fingerstache gentrify, PBR&B cray XOXO vegan deep v tote bag ethnic. Banh mi you probably haven't heard of them seitan meh Austin iPhone. High Life wolf Tonx, dreamcatcher lo-fi seitan ethnic pop-up fingerstache whatever. Trust fund Portland ethnic church-key, Tumblr squid hoodie dreamcatcher +1 seitan.</p>
 </div>
</article>

When I move to production, I will use a MustacheJS template in Meteor. So was planning on this

<template name="posts">
 <article class="post">
 <h2>{{title}}</h2>
 <img src="{{{imgUrl}}}"> 
 <a href="#" class="readMore">
 <i class="fa fa-list-ul"></i>
 </a>
 <div class="hide">
 <h4>{{city}}</h4>
 {{{content}}}
 </div>
 </article>
</template>

Is there any room for improvement here? for example, will I be better off using <li>s? or should I perhaps change anything else?

Answer 1

Your img is missing the alt attribute.

---

<a href="#" class="readMore">
 <i class="fa fa-list-ul"></i>
</a>

I assume that here a graphic will be inserted via CSS? Then this will not be accessible by users without CSS support, and it will probably not be accessible by screen reader and/or keyboard users. The link should have content, i.e., an img (with alt attribute) or text ("Read more") (which can be visually hidden, if required).

Also, you shouldn’t use the i element in such a case (as your use doesn’t match i’s definition). Go with span if you need an element.

---

Why did you skip a heading level (from h2 to h4)? Either use h3 for the second heading, or go with h1 everywhere (but then you need to use sectioning elements explicitly!):

<article>
 <h1>Skating Down Venice Beach</h1>
 <section>
 <h1>Venice Beach</h1>
 </section>
</article>

If the text titled "Venice Beach" is just some general information about it (not unique to this image), consider to use the aside element instead of section.

• JGallardo: aside instead of section ? I never used it. And i sued i because that is common with font awesome, but I will look into it.
• unor: @JGallardo: i is often used by icon fonts, yes, but I’d say they are all wrong (some say it sounds so nice: i → icon; others say it’s for saving bytes: 1 char in i vs. 4 chars in span ... ha, ha). AFAIR Bootstrap did use i in previous version, too, but now they go with span (as they should! ;)).

Answer 2

<a href="#" class="readMore">
 <i class="fa fa-list-ul"></i>
</a>

Nowadays the standard way to implement semantic icons is:

1. Hide the icon itself from screen readers via ARIA, i.e., aria-hidden="true"
2. Show a text label that's only visible to screen readers via CSS/classes, e.g., class="fa-sr-only" in Font Awesome

Also make sure to choose meaningful icons. Currently you're using .fa-list, which is moreso associated with menus/sidebars. Since it looks like your idea is for this icon to expand/unhide some text, consider .fa-circle-info, .fa-expand, .fa-maximize, etc.

Nit: class names are generally kebab-case, not camelCase.

<a href="#" class="read-more">
 <i class="fa fa-circle-info" aria-hidden="true"></i> <!-- hide icon from screen readers -->
 <span class="fa-sr-only">Read more</span> <!-- show label to screen readers -->
</a>