I noticed two main areas for improvement in your HTML structure. First, you're using <div> tags instead of semantic HTML tags. It's generally better to use semantic tags, like <header>, <footer>, <main>, <article>, and <section>. These tags not only enhance SEO by making your content more meaningful to search engines but also improve accessibility for screen readers, allowing users with disabilities to navigate your content more effectively.
For example:
<main> <article class="container"> <figure> <img class="blog-image" src="assets/images/illustration-article.svg" alt="Image description" width="336" height="200" /> </figure><a href="#" class="card-btn">Learning</a>
<time datetime="2024-09-01">Published: 01 September 2024</time>
<div>
<h1>HTML & CSS foundations</h1>
<p>
These languages are the backbone of every website, defining structure, content, and presentation.
</p>
</div>
<footer>
<figure>
<img src="assets/images/image-avatar.webp" alt="Greg Hooper" />
<figcaption>Greg Hooper</figcaption>
</figure>
</footer>
Regarding the <article> tag, its use here is somewhat debatable since this is a single webpage. While it's not strictly necessary for a single item, it might be useful if you envision this card as part of a series of multiple blog post previews on a page. In a real-world scenario, using <article> would make more sense if there were multiple cards representing different blog posts.
The second point is your use of IDs for styling in your CSS. It’s uncommon to use IDs for styling in modern web development because IDs are unique and can’t be reused, which limits flexibility. Instead, classes are typically used because they are reusable and allow for more scalable and maintainable code.
If you were to add another card to the page, using IDs would require creating a whole new set of unique IDs for each element in the new card and duplicating your CSS. This quickly becomes unmanageable, especially if you have multiple cards. For example, having six cards would mean creating six different sets of IDs, resulting in a cluttered stylesheet with repetitive CSS rules.
By using classes instead, you can define a single set of styles in your CSS and apply them to any number of cards. This approach is much more efficient because you only need to write your CSS once and then reuse the same classes across all similar elements, significantly reducing repetition and improving maintainability.
On a positive note, you've done a fantastic job with the overall structure of your HTML and CSS! It's clear that you have a solid understanding of web development fundamentals, and your approach to organizing content shows good logical thinking. With just a few tweaks to use more semantic HTML tags and rely on reusable classes in CSS, your code will be even more efficient and accessible.
Keep up the great work! Each challenge like this helps you sharpen your skills, and you're definitely on the right track. Well done!
