Review of HTML markup for this blog concept

Question

I am creating a blog concept with this layout on CodePen

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.