@Aggressive-Mohammed
Posted
Hello Soy-Ibrag!!!
Congratulations for completing this challenge. Your HTML for the recipe page is clean and well-structured. Here are some suggestions for improvements:
- Accessibility: Alt Text The alt text for your omelette image can be more descriptive for screen readers:
<img src="assets/images/image-omelette.jpeg" alt="A simple omelette on a plate">
- Consistent Heading Levels For better semantic structure, ensure that heading levels follow a logical order: You are using an h1 for the recipe title, followed by an h4 for the preparation time, which might break the logical flow. Consider using h2 for sections like "Preparation time," "Ingredients," "Instructions," and "Nutrition":
<h2>Preparation time</h2>
- Use <strong> Instead of <span class="bold"> You are using a span with the class "bold" to make text bold. Instead, use the semantic <strong> tag for emphasis:
<p><strong>Total:</strong> Approximately 10 minutes</p>
- Table Structure Your table looks fine but consider using <th> elements for the first column (Calories, Carbs, etc.) to improve semantic meaning:
<tr class="border">
<th scope="row">Calories</th>
<td class="value">277kcal</td>
</tr>
- Add Meta Description Adding a meta description helps with SEO and provides a summary of the content:
<meta name="description" content="A simple and easy-to-follow recipe for making a classic omelette with optional fillings.">
These minor adjustments will improve accessibility, performance, and SEO for your recipe page!. Generally you did great. Keep it up!!!
Marked as helpful
@Soy-Ibrag
Posted
@Aggressive-Mohammed Tysm for the suggestions and for taking your time to help me.