Semantic HTML and Forms
Semantic elements, forms structure, inputs, controls, validations, and accessibility (ARIA) basics.
Study Notes: Semantic HTML and Forms
💡 Easy English Concept Guide
Semantic HTML tags tell the browser exactly what a layout section is (like <nav> for link rows). HTML forms let users type information and send it to our database.
1. Semantic Layout vs Standard Divs
Semantic HTML elements declare their structural purpose clearly to search engines and screen readers, replacing generic dividers:
| Semantic Tag | Purpose | Accessibility Benefit |
|---|---|---|
<header> |
Introductory content or navigation links | Identified as banner landmark |
<nav> |
A section dedicated to navigation links | Allows screen readers to skip directly to links |
<main> |
The primary, unique content of the page | Only one allowed per document |
2. User Input Forms Structure
Forms gather user inputs. They require correct input types, helper labels, and submit controls:
<form action="/register" method="POST" class="space-y-4">
<div>
<label for="email">Email Address:</label>
<input type="email" id="email" name="email" required placeholder="you@example.com">
</div>
<div>
<label for="gender">Select Gender:</label>
<select id="gender" name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
<button type="submit">Submit Form</button>
</form>💡 Quick Revision Guide
Ensure your layouts adapt cleanly across responsive viewport widths. Double-check script sequences to verify that DOM selections happen after nodes are parsed by the browser.
Expected University & Placement Questions
- Q1: Outline the accessibility (ARIA) benefits of utilizing semantic layout tags.
Answer: Semantic tags (like <nav>, <main>, <footer>) act as visual structural anchors. Assistive device software (like screen readers) lets users jump directly to specific content layout sections using these landmarks. - Q2: Contrast GET vs POST methods when submitting user authentication data.
Answer: GET encodes credentials inside the browser address URL parameters (completely insecure). POST embeds credentials invisibly inside the request payload body, keeping them out of site histories.
Last reviewed: July 2026