HTML interview questions and answers for beginners

HTML looks simple, so interviewers use it to see whether you really understand how pages are built or only copy markup. The questions below are the ones asked most often in fresher and junior front-end interviews, with answers short enough to say aloud and examples that show you have used the feature. They follow the order of the free HTML course, so each answer has a lesson to go deeper.

The basics

1. What is HTML?

HyperText Markup Language: the language that describes the structure and meaning of a web page using elements (tags). It is not a programming language; it marks up content, and the browser turns the markup into a page. CSS styles it and JavaScript adds behaviour.

2. What is the basic structure of an HTML document?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Page title</title>
</head>
<body>
  <h1>Hello</h1>
</body>
</html>

<!DOCTYPE html> puts the browser in standards mode, <head> holds information about the page, and <body> holds what is shown.

3. What is the difference between an element, a tag and an attribute?

A tag is the markup (<p> and </p>). An element is the whole thing: the opening tag, the content and the closing tag. An attribute gives extra information inside the opening tag: <a href="/about/">.

4. What are void (empty) elements?

Elements with no content and no closing tag: <br>, <hr>, <img>, <input>, <meta>, <link>.

5. What does <!DOCTYPE html> do?

It tells the browser to render in standards mode. Without it, browsers fall back to "quirks mode", which imitates old browser behaviour and makes layout unpredictable.

6. What is the purpose of the lang attribute and the charset meta tag?

lang declares the language of the page for screen readers, translation tools and search engines. <meta charset="utf-8"> tells the browser how to decode the text so that accented letters and non-Latin scripts display correctly.

7. What does the viewport meta tag do?

<meta name="viewport" content="width=device-width, initial-scale=1"> makes the page use the device's width, which is required for responsive design on phones.

Text, links and lists

8. What is the difference between <strong> and <b>, and <em> and <i>?

<strong> and <em> carry meaning (strong importance, stress emphasis) and are announced differently by screen readers. <b> and <i> are presentational (bold, italic) with no added meaning. Prefer the meaningful ones.

9. How many heading levels are there, and how should they be used?

Six, <h1> to <h6>. Use them to outline the page in order, without skipping levels for looks. A page normally has one <h1>. Headings are how screen-reader users and search engines scan a page.

10. How do you create a link, and what does target="_blank" need?

<a href="https://example.com" target="_blank" rel="noopener noreferrer">Example</a>

target="_blank" opens a new tab; rel="noopener" stops the new page from controlling the old one. Link text should say where the link goes ("Read the pricing guide"), not "click here". See the links lesson.

11. What is the difference between absolute and relative URLs?

An absolute URL includes the scheme and host (https://example.com/a.html). A relative URL is resolved against the current page (a.html, ../img/x.png, /about/).

12. How do you make ordered, unordered and description lists?

<ol> (numbered), <ul> (bulleted) and <dl> with <dt> terms and <dd> descriptions. Items of <ol> and <ul> go in <li>. Use lists for lists: navigation menus are lists of links.

Block, inline and semantics

13. What is the difference between block and inline elements?

Block elements start on a new line and take the full width (<div>, <p>, <h1>, <ul>, <section>). Inline elements flow within a line and take only the space they need (<span>, <a>, <strong>, <img>). CSS display can change this.

14. What is the difference between <div> and <span>?

Both are generic containers with no meaning. <div> is block-level, <span> is inline. Use them only when no semantic element fits.

15. What is semantic HTML, and why does it matter?

Using elements that describe their purpose: <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>, <figure>. It helps accessibility (screen readers can jump between landmarks), SEO (search engines understand the page) and maintainability (the code explains itself).

16. What is the difference between <article> and <section>?

<article> is self-contained content that makes sense on its own (a blog post, a comment). <section> is a thematic grouping within a page, normally with a heading.

17. What are the HTML5 semantic and new features worth naming?

New semantic elements, <audio> and <video>, <canvas> and inline SVG, form input types and validation (email, date, required), <picture> for responsive images, and local storage in the browser's APIs.

Images and media

18. How do you add an image, and why is alt important?

<img src="loaf.jpg" alt="A sourdough loaf cut open on a wooden board" width="800" height="600">

alt describes the image for screen readers, shows if the image fails to load, and is used by search engines. Decorative images get an empty alt="" so assistive technology skips them. width and height reserve space and prevent the page from jumping as it loads.

19. How do you serve different images for different screens?

Use srcset and sizes on <img>, or <picture> with several <source> elements. The browser picks the best file. See responsive images.

20. What are <figure> and <figcaption>?

<figure> wraps self-contained content such as an image, diagram or code listing, and <figcaption> gives it a caption.

Forms and tables

21. How do you create a form?

<form action="/subscribe" method="post">
  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>
  <button type="submit">Join</button>
</form>

action is where the data goes, method is get or post, and each field needs a name to be submitted.

22. What is the difference between GET and POST?

GET puts the data in the URL: use it for searches and anything safe to bookmark. POST sends the data in the request body: use it for logins and changes, and for data that should not appear in the address.

23. Why use <label>?

It names the input for screen readers and makes the label clickable, enlarging the click area. Connect them with for and id, or wrap the input in the label.

24. What are some input types and validation attributes?

Types: text, email, password, number, date, checkbox, radio, file, search, tel, url, color. Validation: required, min, max, minlength, maxlength, pattern. Browser validation is a convenience: always validate again on the server.

25. How is a table structured, and when should you use one?

<table> with <caption>, <thead>, <tbody>, <tr> rows, <th> header cells (with scope) and <td> data cells. Use tables for tabular data, never for page layout.

Head, SEO and accessibility

26. What goes in the <head>?

The <title>, <meta> tags (charset, viewport, description), <link> to stylesheets and icons, and <script> and <style> where needed. Nothing in <head> is displayed except through the title.

27. How do you make a page SEO-friendly with HTML?

A unique <title> and meta description per page, one clear <h1>, a logical heading outline, semantic elements, descriptive link text, alt text, fast-loading images and a mobile-friendly viewport. See HTML for search engines.

28. What is accessibility, and how does HTML help?

Making pages usable by people with disabilities. HTML helps when you use native elements (buttons, links, form controls), label every input, give images alt text, keep a logical heading order and make everything reachable by keyboard. ARIA attributes fill gaps but should not replace native elements. See accessibility basics.

29. What is the difference between <script>, <script async> and <script defer>?

A plain script blocks HTML parsing while it downloads and runs. async downloads in parallel and runs as soon as it is ready (order not guaranteed). defer downloads in parallel and runs after parsing, in order. Prefer defer for most scripts.

30. What are HTML entities?

Codes for characters that are reserved or hard to type: < for <, > for >, & for &, " for ",   for a non-breaking space, © for ©. Use < to show a tag as text.

Questions to ask yourself before the interview

• Can I write a complete page from a blank file without help?
• Can I explain three semantic elements and where they go?
• Can I build an accessible form with labels and validation?
• Can I describe how I would make a page work on a phone?

If any answer is no, build that piece. The 30-day HTML and CSS plan lays out a schedule, the HTML tags cheat sheet is a quick reference, and the CSS interview questions cover the styling side. You can preview any snippet from this post safely in the HTML Viewer.