10 modules · 100 questions

HTML interview questions and answers

These 100 HTML interview questions cover what frontend and full-stack interviews actually test, from fundamentals such as the DOCTYPE and the difference between HTML, CSS and JavaScript to forms and validation, semantic HTML, accessibility, SEO metadata and how browsers parse and render a page. Questions are grouped into 10 modules and tagged Beginner, Intermediate or Advanced, so freshers and experienced developers can both find the right starting point.

How each answer is written

Every answer starts with a short version you could say in an interview, followed by a deeper explanation, a code example with its output, common mistakes to avoid and an interview tip. The first three answers are below in full; sign in to read all 100.

Sample questions with full answers

Question 1 · Beginner

What is HTML, and what is its role in web development?

HTML (HyperText Markup Language) is the standard markup language that describes the structure and meaning of web content. It is the foundation layer of every web page, on top of which CSS adds presentation and JavaScript adds behaviour.

HTML is not a programming language: it has no variables, loops or logic. It is a markup language that annotates content with elements so that browsers, search engines and assistive technologies know what each piece of content is — a heading, a paragraph, a link, a form control, a table.

Its role in web development:

  • Structure – defines the document outline (headings, sections, lists).
  • Semantics – conveys meaning, which drives accessibility and SEO.
  • Hypertext – links documents together via <a href>, which is what makes the web a web.
  • Embedding – loads images, media, styles and scripts.
  • Interaction primitives – forms and native controls that work without JavaScript.

HTML is maintained by WHATWG as the HTML Living Standard, so there are no more numbered versions after HTML5.

Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>My first page</title>
  </head>
  <body>
    <h1>Hello, world</h1>
    <p>This is a paragraph with a <a href="/about">link</a>.</p>
  </body>
</html>

Result: The browser displays a large heading and a paragraph containing a clickable link. The markup describes what the content is; it does not describe colours or behaviour.

Question 2 · Beginner

What is the difference between HTML, CSS, and JavaScript?

HTML defines structure and meaning, CSS defines presentation and layout, and JavaScript defines behaviour and interactivity. Together they form the three core layers of the front end.

Layer Responsibility Example
HTML Content and structure <button>Save</button>
CSS Visual presentation, layout, responsiveness button { color: white; }
JavaScript Behaviour, data, dynamic updates button.addEventListener('click', save)

This separation of concerns is called progressive enhancement: a page should be usable with HTML alone, look good with CSS, and become richer with JavaScript. Keeping the layers separate makes code easier to maintain, cache and test.

Example

<button id="save" class="btn-primary">Save</button>

<style>
  .btn-primary { background: #2563eb; color: #fff; }
</style>

<script>
  document.getElementById('save')
    .addEventListener('click', () => alert('Saved!'));
</script>

Result: HTML creates a real, focusable button; CSS paints it blue; JavaScript shows an alert on click.

Question 3 · Beginner

What is the purpose of the DOCTYPE declaration?

`<!DOCTYPE html>` tells the browser to render the page in standards mode rather than quirks mode. It is not an HTML element and must be the very first line of the document.

Historically, DOCTYPEs referenced a DTD (Document Type Definition) such as HTML 4.01 Strict. Browsers used the presence and form of the DOCTYPE to pick a rendering mode:

  • Standards mode – follows modern CSS and HTML specs.
  • Quirks mode – emulates old, non-standard browser behaviour (e.g. the IE5 box model).
  • Limited-quirks (almost standards) mode – a few quirks around table cell images.

In HTML5 the declaration was simplified to <!DOCTYPE html>; it is case-insensitive and exists only to trigger standards mode.

Example

<!DOCTYPE html>
<html lang="en">
  <head><title>Standards mode</title></head>
  <body></body>
</html>

Result: Running document.compatMode in the console returns "CSS1Compat" (standards mode). Without the DOCTYPE it returns "BackCompat" (quirks mode).

All 100 questions by topic

  1. Module 1. HTML Fundamentals

    • What is HTML, and what is its role in web development? (Beginner)
    • What is the difference between HTML, CSS, and JavaScript? (Beginner)
    • What is the purpose of the DOCTYPE declaration? (Beginner)
    • What is the difference between HTML and HTML5? (Beginner)
    • Explain the basic structure of an HTML document. (Beginner)
    • What is the purpose of the html, head, and body elements? (Beginner)
    • What are HTML elements, tags, and attributes? (Beginner)
    • What are void elements? Give examples. (Beginner)
    • What is the difference between block-level and inline elements? (Beginner)
    • How does a browser parse and render an HTML document? (Intermediate)
  2. Module 2. HTML Elements and Attributes

    • What is the difference between id and class attributes? (Beginner)
    • What are global HTML attributes? (Beginner)
    • What is the difference between the strong and b elements? (Beginner)
    • What is the difference between em and i elements? (Beginner)
    • What is the purpose of the data-* attributes? (Intermediate)
    • What are HTML entities, and when should they be used? (Beginner)
    • What is the purpose of the lang attribute? (Beginner)
    • What is the difference between semantic and non-semantic elements? (Beginner)
    • How do HTML comments work, and what should not be stored in them? (Beginner)
    • What is the difference between the hidden attribute and CSS display: none? (Intermediate)
  3. Module 3. Links, Images and Media

    • What is the purpose of the anchor element? (Beginner)
    • What is the difference between absolute and relative URLs? (Beginner)
    • How do you link to a section within the same page? (Beginner)
    • What is the difference between opening a link in the same tab and a new tab? (Beginner)
    • Why are rel="noopener" and related link security attributes important? (Intermediate)
    • What is the purpose of the alt attribute on images? (Beginner)
    • What is the difference between img, picture, and source elements? (Intermediate)
    • How do audio and video elements work in HTML? (Intermediate)
    • What are responsive images, and how do srcset and sizes help? (Advanced)
    • How can external content be embedded in an HTML page safely? (Advanced)
  4. Module 4. Lists and Tables

    • What is the difference between ordered and unordered lists? (Beginner)
    • When should you use a description list? (Beginner)
    • How do you create nested lists? (Beginner)
    • What is the basic structure of an HTML table? (Beginner)
    • What are the purposes of the thead, tbody, and tfoot elements? (Intermediate)
    • What is the difference between colspan and rowspan? (Beginner)
    • How do you create an accessible HTML table? (Intermediate)
    • When should you use a table instead of CSS layout techniques? (Intermediate)
  5. Module 5. HTML Forms and Validation

    • What is the purpose of the form element? (Beginner)
    • What is the difference between GET and POST form methods? (Beginner)
    • What is the purpose of the label element? (Beginner)
    • Why should form labels be associated with their input controls? (Beginner)
    • What is the difference between radio buttons and checkboxes? (Beginner)
    • What is the difference between input types text, email, password, and number? (Beginner)
    • What are the purposes of required, minlength, maxlength, min, and max? (Beginner)
    • How do select, option, and textarea work? (Beginner)
    • What is the difference between a button with type submit and type button? (Beginner)
    • What are fieldset and legend used for? (Beginner)
    • How does native HTML form validation work? (Intermediate)
    • Why must server-side validation still be implemented even when HTML validation exists? (Intermediate)
  6. Module 6. Semantic HTML

    • What is semantic HTML, and why is it important? (Beginner)
    • What are the purposes of header, nav, main, and footer? (Beginner)
    • What is the difference between section and article? (Intermediate)
    • When should the aside element be used? (Beginner)
    • What is the difference between div and section? (Beginner)
    • How should heading levels h1 through h6 be used? (Beginner)
    • Can a page contain multiple article elements? (Beginner)
    • What are the benefits of semantic HTML for search engines and accessibility? (Intermediate)
    • What is the purpose of the figure and figcaption elements? (Beginner)
    • How would you choose semantic elements for a blog article layout? (Intermediate)
  7. Module 7. Metadata, SEO and Document Structure

    • What is the purpose of the title element? (Beginner)
    • What does the meta charset="UTF-8" declaration do? (Beginner)
    • Why is the viewport meta tag important for responsive websites? (Beginner)
    • What is the purpose of a meta description? (Beginner)
    • How do you add a favicon to an HTML page? (Beginner)
    • What is a canonical URL, and why is it useful? (Intermediate)
    • What are Open Graph metadata tags? (Intermediate)
    • How do you link an external CSS stylesheet? (Beginner)
    • What is the difference between defer and async on script elements? (Intermediate)
    • Where should important metadata and resource links be placed in an HTML document? (Intermediate)
  8. Module 8. Accessibility and Best Practices

    • What is web accessibility, and how does semantic HTML support it? (Beginner)
    • What makes alternative text effective? (Intermediate)
    • How do you make an HTML form accessible to screen-reader users? (Intermediate)
    • Why is keyboard navigation important? (Beginner)
    • What is ARIA, and when should ARIA attributes be used? (Intermediate)
    • What is the difference between native HTML semantics and ARIA roles? (Advanced)
    • Why should interactive elements have accessible names? (Intermediate)
    • How do you ensure sufficient heading structure and meaningful link text? (Intermediate)
    • What are common HTML accessibility mistakes? (Intermediate)
    • How would you test an HTML page for accessibility? (Intermediate)
  9. Module 9. Advanced HTML and Browser Concepts

    • What is the purpose of the details and summary elements? (Intermediate)
    • What is the dialog element, and how can it be used? (Advanced)
    • What is the template element? (Advanced)
    • What are the progress and meter elements, and how do they differ? (Intermediate)
    • What is the contenteditable attribute? (Intermediate)
    • What is the difference between the DOM and the original HTML source? (Intermediate)
    • What happens when the browser encounters malformed HTML? (Advanced)
    • What are custom elements and Web Components? (Advanced)
    • What are the security risks of rendering untrusted HTML? (Advanced)
    • What are obsolete HTML elements, and how should legacy markup be modernized? (Intermediate)
  10. Module 10. Practical and Scenario-Based Questions

    • How would you build a semantic and accessible navigation bar? (Intermediate)
    • How would you structure an accessible registration form? (Intermediate)
    • How would you create a responsive image gallery using HTML? (Intermediate)
    • How would you build a timetable using accessible table markup? (Intermediate)
    • How would you structure a multi-section portfolio page semantically? (Intermediate)
    • How would you improve the HTML metadata of a page for SEO and social sharing? (Intermediate)
    • How would you prevent an HTML code example from executing when displaying it in a tutorial? (Intermediate)
    • How would you debug a form that submits unexpected values? (Intermediate)
    • How would you identify and fix accessibility issues in an existing HTML page? (Advanced)
    • How would you review an HTML page for semantic structure, performance, security, and maintainability? (Advanced)

Frequently asked questions

What HTML questions are asked in interviews?
Common ones include the purpose of the DOCTYPE, semantic elements, block versus inline elements, forms and input types, the difference between id and class, accessibility with alt text and ARIA, meta tags for SEO, and how the browser loads scripts.
Are these HTML questions suitable for freshers?
Yes. Every question is tagged Beginner, Intermediate or Advanced. Freshers can start with HTML fundamentals and elements, then move on to forms, semantics and accessibility.
How should I prepare for an HTML interview?
Learn why each element exists, not just its syntax. Practise explaining semantic HTML and accessibility, write small pages in an HTML editor, and be ready to discuss how HTML affects SEO and performance.

More interview questions

Read all 100 answers

Sign in to Webhise for every answer, code example and interview tip, plus coding practice and the online compiler.