RSRobince Studio

HTML interview revision notes

Core HTML concepts for frontend interviews. Written for developers preparing for an interview who want to refresh their HTML fast. Free, no sign-up.

4 topics in these notes

  1. What is HTML? Structure of a page
  2. Semantic HTML elements
  3. Forms & inputs
  4. Accessibility & basic SEO in HTML

What is HTML? Structure of a page

Simple real-life example (Understand first — very important for understanding)

  • Think of HTML as the skeleton of a web page: it defines the sections (head, header, main content, footer) and what each part is (heading, paragraph, image, button).
  • CSS is how it looks; JavaScript is how it behaves. HTML is the foundation that both attach to.

Real-world idea: HTML gives structure and meaning to content so browsers and assistive technologies know what each piece is.

Technical definition

  • HTML (HyperText Markup Language) describes the structure of web pages using elements (tags) and attributes.
  • Basic document structure: <!DOCTYPE html>, <html>, <head>, <body>.
  • <head> contains metadata (title, meta tags, links, scripts). <body> contains visible content.

Simple practical example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My Page</title>
  </head>
  <body>
    <h1>Hello</h1>
    <p>Welcome to my page.</p>
  </body>
</html>

Why it matters

Strong HTML fundamentals make everything else easier: styling, JS behavior, SEO, and accessibility all depend on correct structure.

Interview tip

Be ready to write a minimal HTML page from memory and explain the roles of <head> and <body>.

Semantic HTML elements

Simple real-life example (Understand first — very important for understanding)

  • Like labeling boxes in a warehouse: "books", "tools", "clothes" instead of just "box1", "box2".
  • Semantic elements (header, nav, main, section, article, footer) describe what the content means, not just how it looks.

Real-world idea: semantic HTML helps browsers, screen readers, and search engines understand the structure and importance of content.

Technical definition

  • Semantic elements: <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>, <figure>, <figcaption>, <time>, <mark>, etc.
  • They convey meaning and structure: e.g. <nav> for primary navigation, <main> for central content, <footer> for page/footer info.
  • Non-semantic containers like <div> and <span> have no meaning by themselves; use them when no semantic tag fits.

Code example

<header>
  <h1>Blog</h1>
  <nav>...</nav>
</header>
<main>
  <article>
    <h2>Post title</h2>
    <p>Content...</p>
  </article>
</main>
<footer>© 2026</footer>

Why it matters

Semantic HTML improves accessibility, SEO, and maintainability. Many front-end interview questions check if you use semantic tags instead of only <div>.

Interview tip

If asked about accessibility or SEO, mention semantic HTML and give examples of replacing generic <div> with <header>, <nav>, <main>, <section>, <article>, <footer>.

Forms & inputs

Simple real-life example (Understand first — very important for understanding)

  • Forms are like paper forms: labeled fields, validation rules, and a submit button.
  • HTML provides many input types and validation so the browser can help you before JavaScript runs.

Real-world idea: using proper form elements and input types gives you built-in browser validation, mobile keyboard hints, and better accessibility.

Technical definition

  • <form> wraps controls; key attributes: action, method, autocomplete, novalidate.
  • Input types: text, email, number, password, checkbox, radio, date, file, etc.
  • Attributes like required, min, max, pattern, and placeholder help with basic validation and UX.

Code example

<form action="/signup" method="post">
  <label>Email
    <input type="email" name="email" required />
  </label>
  <label>Password
    <input type="password" name="password" minlength="8" required />
  </label>
  <button type="submit">Sign up</button>
</form>

Why it matters

Forms are at the core of almost every app. Good HTML form usage reduces JS complexity and improves usability and accessibility.

Interview tip

Describe how you’d build an accessible form: labels tied to inputs, proper input types, required attribute, and minimal JS for validation.

Accessibility & basic SEO in HTML

Simple real-life example (Understand first — very important for understanding)

  • Accessibility: like adding ramps, signs, and audio cues in a building so more people can use it.
  • SEO: like writing clear titles and chapter headings so an index or librarian can find things easily.

Real-world idea: attributes like alt, aria-*, and heading levels make sites usable with assistive technologies; title and meta tags help search engines index content.

Technical definition

  • Accessibility: <label> for inputs, alt text on images, correct heading hierarchy, role and aria-* where needed.
  • SEO/meta: <title>, <meta name=\"description\">, proper <h1> per page, logical structure, semantic tags.
  • Avoid using only color to convey meaning; ensure focus states and keyboard navigation work (tab order based on DOM).

Code example

<head>
  <title>Best currency converter</title>
  <meta name="description" content="Convert 170+ currencies with live rates." />
</head>
<img src="chart.png" alt="Line chart of currency over time" />

Why it matters

Many companies care about accessibility and SEO. HTML is the first and cheapest place to get them right.

Interview tip

If asked about accessibility, mention: semantic HTML, labels, alt text, focus order, and ARIA as a last resort. For SEO, mention title, meta description, and heading hierarchy.

Practise the questions

Read the top 50 HTML interview questions and answers to test yourself after revising.

More Frontend notes

CSS · JavaScript · JavaScript in the Browser · TypeScript · React · Angular · All developer notes