What is semantic HTML?

Answer

Semantic HTML uses elements for their intended meaning—such as nav, main, button, and article—rather than styling generic div elements. It gives browsers, search engines, and assistive technology a reliable structure without adding ARIA by hand.

Context

HTML supplies the document’s meaning and structure. Prefer native elements first, then add only the attributes needed to connect controls, describe state, or support responsive delivery.

Example

<label for="email">Email address</label>
<input id="email" name="email" type="email" autocomplete="email" />

The explicit label gives the input an accessible name and makes the label itself clickable.

Practical considerations

1. Choose the approach from the requirement and constraints, not from habit.
2. Include validation, error handling, and cleanup where the boundary requires them.
3. Verify the observable result with focused tests or measurement.

Follow-up prompts

• What failure mode would you expect if this were implemented incorrectly?
• How would you test this behaviour?
• What changes when the feature must scale to a larger application or team?

In practice

For this easy-level topic, make assumptions explicit, choose the smallest safe implementation, and verify the behavior at the relevant boundary.