HiveBrain v1.2.0
Get Started
← Back to all entries
patternhtmlMinor

Review of HTML markup for this blog concept

Submitted by: @import:stackexchange-codereview··
0
Viewed 0 times
thisconceptmarkupforblogreviewhtml

Problem

I am creating a blog concept with this layout on CodePen

Here is my current code in development


  Skating Down Venice Beach
                  

  
    
  

  
    Venice Beach
    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.
  


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


  
    {{title}}
                    

    
      
    

    
      {{city}}
      {{{content}}}
    
  


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

Solution

Your img is missing the alt attribute.


  


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!):


  Skating Down Venice Beach

  
    Venice Beach
  


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.

Code Snippets

<a href="#" class="readMore">
  <i class="fa fa-list-ul"></i>
</a>
<article>
  <h1>Skating Down Venice Beach</h1>

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

Context

StackExchange Code Review Q#41118, answer score: 2

Revisions (0)

No revisions yet.