Congratulations, your code is very good!
Analyzing your code, I realized that to create the nutritional table you used tags and markings that would not be semantically correct.
here is an example explaining the correct way to form a table:
<table class="nutrition-table">
<caption>Nutritional Information</caption>
<thead>
<tr>
<th>Component</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>Calories</td>
<td>277kcal</td>
</tr>
<tr>
<td>Carbs</td>
<td>0g</td>
</tr>
<tr>
<td>Protein</td>
<td>20g</td>
</tr>
<tr>
<td>Fat</td>
<td>22g</td>
</tr>
</tbody>
</table>
<table class="nutrition-table">: Defines a table and applies the nutrition-table class for styling with CSS.
<caption>: Provides a descriptive title for the table, useful for accessibility and understanding the table contents.
<thead>: Contains the table header.
<tr>: Defines a row in the table.
<th>: Defines a header cell, which by default is styled in bold and centered. Header cells are important for accessibility, as they help assistive technologies describe the table contents.
<tbody>: Contains the body of the table, where the data is actually listed.
<td>: Defines a data cell in the table.
Reasons for this Structure:
Semantics:
Using <table>, <thead>, <tbody>, <th>, <td>, and <caption> ensures that the table is interpreted correctly by browsers and assistive technologies.
Elements such as <caption> and <th> improve accessibility by allowing screen reader users to better understand the table's contents.
Clarity and Organization:
Separating <thead> and <tbody> improves code readability and makes it easier to maintain and style.
Stylization:
Applying a class to the table (class="nutrition-table") makes it easier to style with CSS, allowing you to customize the appearance of the table without affecting other tables on the page.
ATTENTION
In this project it is not necessary to use the tags <caption>, <thead>, <tr>, <th>, because the design does not present these elements.
