Blog Preview Card Solution using Plain HTML and CSS

Community feedback

• 

  Adriano•39,190

  @AdrianoEscarabotePosted about 2 months ago

  Hey Hrid Chakraborty, how’s it going? I was really impressed with your project’s result, though I have some advice that could be helpful:

  Using only <div> to structure your code, as in the example below, can be problematic for both accessibility and HTML semantics. While div elements are generic containers, they don’t provide meaning to the content. This can make it harder for screen readers and accessibility tools to understand and present the content correctly.

  This code lacks semantic tags such as header, article, section, time, and footer, which help organize and provide meaning to the content. Using these tags improves accessibility, SEO, and makes the code easier to maintain and understand.

  Example with semantic tags:

  <article class="container">
    <img src="assets/images/illustration-article.svg" alt="blog-illustration" />
    <header>
      <span class="blog-tag">Learning</span>
      <time class="publish-date" datetime="2023-12-21">Published 21 Dec 2023</time>
    </header>
    <h1 class="blog-title">HTML & CSS foundations</h1>
    <p class="blog-desc">
      These languages are the backbone of every website, defining structure,
      content, and presentation.
    </p>
    <footer class="blog-author">
      <img src="assets/images/image-avatar.webp" alt="Author face" />
      <span class="blog-author-name">Greg Hooper</span>
    </footer>
  </article>
  

  In this example, semantic tags like article, header, time, and footer help describe the content clearly and accessibly. This improves the navigation experience for everyone, especially for people using assistive technologies.

  Everything else looks great.

  Hope this helps! 👍

  Marked as helpful

  1

  ---

  

  Hrid Chakraborty•70

  @hrid-chakrabortyPosted about 1 month ago

  @AdrianoEscarabote Thank you so much for your feedback

  1