Assets: attributes (class,id) and its purpose 

Sure! Here's a list of commonly used HTML tag attributes, organized by category and purpose, with practical examples — especially useful for interactive web apps like your food ordering system.

---

🔷 1. Global Attributes (usable on almost any element)

Attribute	Purpose	Example
class=""	Assign CSS classes (styling/behavior)	<div class="item-card">
id=""	Unique identifier (for JavaScript or CSS)	<div id="item1">
style=""	Inline styling	<div style="color: red;">
title=""	Tooltip text on hover	<button title="Click to order">
hidden	Hides the element from display	<div hidden>
tabindex=""	Sets tab order for keyboard navigation	<input tabindex="1">
contenteditable	Makes element text editable by user	<div contenteditable="true">
data-*	Custom data attributes for JavaScript	<div data-id="123" data-name="Onion">

---

🔷 2. Event Attributes (JavaScript interaction)

Attribute	Purpose	Example
onclick	Trigger function on click	<button onclick="submitOrder()">
onchange	Fires when value changes (e.g., <select>)	<select onchange="filterItems()">
oninput	Fires as user types	<input oninput="updatePreview()">
onmouseover	When mouse enters the element	<div onmouseover="highlight(this)">
onmouseout	When mouse leaves the element	<div onmouseout="unhighlight(this)">
onsubmit	Fires when form is submitted	<form onsubmit="handleForm()">

---

🔷 3. Form-Related Attributes

Attribute	Purpose	Example
name=""	Name for the input (used in form submission)	<input name="customerName">
value=""	Predefined value	<input value="Onion Salad">
placeholder=""	Hint text	<input placeholder="Enter Name">
required	Makes field mandatory	<input required>
type=""	Defines input type	<input type="number">
checked	Pre-check checkbox or radio	<input type="radio" checked>
readonly	Makes input uneditable	<input readonly value="123">
disabled	Disables the field	<button disabled>
min / max	Min/Max value (numbers/dates)	<input type="number" min="1">

---

🔷 4. Media & Link Attributes

Attribute	Purpose	Example
src=""	Image, video, or audio source	<img src="salad.jpg">
alt=""	Alternate text for images	<img alt="Onion Salad">
href=""	Link destination (for <a>)	<a href="menu.html">
target="_blank"	Opens link in new tab	<a href="menu.html" target="_blank">
controls	Adds video/audio player controls	<video controls>
autoplay	Starts media automatically	<video autoplay>

---

🔷 5. Table-Specific Attributes

Attribute	Purpose	Example
colspan=""	Merge columns in a table cell	<td colspan="2">
rowspan=""	Merge rows in a table cell	<td rowspan="3">
scope=""	Specifies if header is for row or column	<th scope="row">

---

🔷 6. Button-Specific Attributes

Attribute	Purpose	Example
type="button"	Plain button	<button type="button">Click</button>
type="submit"	Submits a form	<button type="submit">Order</button>
type="reset"	Resets form fields	<button type="reset">Reset</button>

---

If you're building interactive item cards or menus like in your system, here’s a sample use case combining all:

<div class="item-card"
     id="NVGS101"
     data-name="Green Salad"
     data-price-id="NVGSPrice"
     style="background-color: #ffeecc;"
     onclick="selectItem(this)"
     title="Click to select item">
  <!-- inner content -->
</div>

Would you like a table of only data-* attributes you're using? Or more advanced ones for modals, images, or navigation?