Semantic HTML uses elements that describe meaning, such as header, main, article, nav, and footer, instead of generic wrappers everywhere.
It matters because:
id should be unique in a document and is best for one specific element. class can be reused across many elements.
Use class for styling patterns and component states. Use id for unique relationships like label associations or in-page anchors.
<!doctype html> tells the browser to render the page in standards mode.
Without it, some browsers may switch to quirks mode, which can change layout behavior and cause inconsistent rendering.
Block elements usually start on a new line and take full available width by default, such as div, p, and section.
Inline elements flow within text content and take only necessary width, such as span, strong, and a.
data-* attributes let you store custom data directly on HTML elements.
Example:
<button data-product-id="sku_123">Buy</button>
This is useful for connecting markup with JavaScript behavior without creating invalid custom attributes.
The viewport tag controls responsive scaling on mobile devices.
Typical usage:
<meta name="viewport" content="width=device-width, initial-scale=1" />
This ensures the layout width maps to device width and avoids zoomed-out mobile rendering.
defer: downloads in parallel, executes after HTML parsing, keeps script order.async: downloads in parallel, executes as soon as ready, order is not guaranteed.For most app scripts that depend on order, defer is safer.
alt text provides a text alternative for users who cannot see images and is announced by assistive technologies.
It also helps when images fail to load and gives search engines context about image content.
ARIA adds accessibility metadata when native HTML alone cannot express needed semantics.
Rule of thumb: use native semantic elements first. Add ARIA only when necessary for custom widgets.
Use button for actions (open modal, submit form, toggle state). Use a for navigation to another URL.
Using the right element improves keyboard behavior and accessibility by default.
required enforces client-side validation so users cannot submit until the field has a value.
It improves UX, but server-side validation is still mandatory for security and data integrity.
autocomplete helps browsers fill known values like name, email, address, and one-time codes.
Correct tokens (email, given-name, one-time-code) improve speed and reduce user input errors.
GET appends data to the URL and is suitable for search/filter actions. POST sends data in the request body and is used for create/update operations.
Sensitive data should never be sent via query string.
label ties readable text to an input field and improves click targets and screen-reader context.
Best practice:
<label for="email">Email</label> <input id="email" name="email" type="email" />
Question 15
Void elements do not have closing tags because they cannot contain children, e.g., img, input, br, hr, meta, link.
Writing closing tags for void elements is invalid in HTML.