patternhtmlMinor
Review of HTML markup for this blog concept
Viewed 0 times
thisconceptmarkupforblogreviewhtml
Problem
I am creating a blog concept with this layout on CodePen
Here is my current code in development
When I move to production, I will use a MustacheJS template in Meteor. So was planning on this
Is there any room for improvement here? for example, will I be better off using
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
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
Also, you shouldn’t use the
Why did you skip a heading level (from
If the text titled "Venice Beach" is just some general information about it (not unique to this image), consider to use the
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.