80%
HTML Structure, semantics, forms, accessibility and SEO basics0/25 questions known
1. What is HTML?
DefinitionHTML (HyperText Markup Language) describes the structure and meaning of a web page using elements (tags).
FlowHow a page becomes pixels (the critical rendering path)HTML text→Parser→DOM tree→+ CSSOM→Render tree→Layout→Paint
<!DOCTYPE html> switches the browser to standards mode (no quirks).
lang helps screen readers and translation.
The viewport meta tag makes the page responsive on phones.
2. Semantic HTML
DefinitionSemantic elements describe what content is, not how it looks.
<header> / <footer>: Intro / closing content of a page or section
<nav>: Main navigation links
<main>: The unique main content (one per page)
<article>: Self-contained content: a post, a product card
Common mistake"Div soup": <div class="button" onclick=…> is not focusable and is not announced as a button.
3. Block vs inline, and common elements
Starts on a new line, takes full width: Flows inside text, only as wide as content
div, p, h1–h6, ul, section, form: span, a, strong, em, img, code, label
<strong> = important (bold), <em> = emphasis (italic) — semantic; <b>/<i> are only visual.
<img src alt> — alt is required for accessibility; use alt="" for decorative images.
Lists: <ul> unordered, <ol> ordered, <li> items, <dl> description list.
Tables for tabular data only: <table> <thead> <tbody> <tr> <th scope="col"> <td>.
4. Forms and validation
Every input needs a <label> (linked with for/id or by wrapping).
Input types (email, number, date, tel, url) give free validation and the right mobile keyboard.
Attributes: required, min/max, minlength, pattern, autocomplete.
GET puts data in the URL (search, filters); POST sends it in the body (create, login).
Common mistakeClient-side validation is for UX only — always validate again on the server.
5. Accessibility (a11y)
Use semantic elements first; ARIA only fills gaps ("no ARIA is better than bad ARIA").
One <h1>, then headings in order (don't skip levels for styling).
Everything clickable must work with the keyboard (Tab, Enter, Space) and show a visible focus ring.
Text contrast at least 4.5:1; never use colour alone to carry meaning.
TipQuick test: unplug the mouse and use the page with Tab only, then run Lighthouse / axe.
6. The <head>, SEO and loading scripts
<title> and <meta name="description"> show in search results.
Open Graph tags (og:title, og:image) control link previews on social media.
<link rel="canonical"> avoids duplicate-content issues.
Search engines understand semantic HTML and real links (<a href>).
<script>: blocks parsing · immediately · yes
<script defer>: in parallel · after HTML is parsed · yes
<script async>: in parallel · as soon as downloaded · no
7. Browser storage
Cookie: ~4 KB · Until expiry · Yes, on every request
localStorage: ~5–10 MB · Until cleared · No
sessionStorage: ~5 MB · Until the tab closes · No
IndexedDB: Large (quota) · Until cleared · No
Common mistakeDon't keep auth tokens in localStorage — any XSS can read them.
ReviseHTML = structure + meaning.
Most asked (8)
QWhat does <!DOCTYPE html> do? What happens if you leave it out?The doctype is the first line of the document.
QWhat is semantic HTML and why does it matter?Semantic HTML means using elements that describe the meaning of the content, not just how it looks: <header>, <nav>, <main>, <article>…
QWhat is the difference between block, inline and inline-block elements?Block elements (<div>, <p>, <h1>, <ul>, <section>) start on a new line and take the full width available.
QWhat is the difference between <script>, <script async> and <script defer>?A plain <script> blocks HTML parsing: the parser stops, downloads the file, runs it, then continues.
QCompare localStorage, sessionStorage and cookies.- localStorage: about 5 MB per origin, persists until cleared, never sent to the server - sessionStorage: same API, but scoped to one tab…
QHow do you make a page accessible? When should you use ARIA?Start with native semantic HTML, it covers most needs: - real <button>, <a href>, <label> and form controls - a logical heading order and…
QHow does form validation work in HTML?HTML has built-in constraint validation.
QWhat does the <meta name="viewport"> tag do?Without it, mobile browsers assume the page was built for desktop and render it in a virtual viewport about 980px wide, then zoom out.