This page needs a newer browser to run its tools. You can still read everything here.

HTML Module 1

Getting started with HTML interview questions

Interview questions on getting started with HTML: short warm-ups, then what each harder question tests, the first step of a good answer and its follow-ups.

8 questions: 3 warm-ups and 5 with model answers · Levels: Fresher to senior

Warm-up questions

Short questions with short answers, each answered in full.

Fresher

What is the difference between an HTML element and a tag?

Answered in the lesson What HTML is and how a browser uses it
Fresher

Why serve a page from a local web server instead of opening the HTML file directly?

Answered in the lesson Set up an editor, a local server and DevTools
Fresher

What happens if an HTML page has no doctype?

Answered in the lesson The document skeleton: doctype, head and body

Questions with model answers

What each question tests, the first step of a good answer and the follow-ups to expect.

Fresher to mid

A marketing page looks exactly as designed, but a screen reader user reports that it has no headings to jump between. The section titles were styled with CSS. What is wrong, how do you confirm it, and how do you fix it without changing how the page looks?
What it tests

Knowing that elements carry meaning CSS cannot add, reading the accessibility tree, and replacing styled text with real headings while keeping the design.

First step

Inspect one of the titles in DevTools. If it is a p, div or span whose class makes it large and bold, the accessibility tree shows a paragraph or plain text, not a heading, so a screen reader has nothing to list. Count the h1 to h6 elements on the page to see how far it goes.
Follow-ups
- How do you choose between h1, h2 and h3 for the titles?
- The design wants one heading to look small. Is that a problem?
- How would you stop the same mistake in new pages?
From the lesson What HTML is and how a browser uses it
Model answer, Pro. Model answers open with any pass; prices are in the notice on this page.
Opening the model answers with your pass…
Model answers open with any MySmartCoPilot pass.
Pro pass · 1 week₹79$2.99
30 days₹179$5.99
1 year₹1,699$45
One payment; a pass never renews. The price shown is the total you pay: no fees or charges are added at checkout.
Passes can’t be bought right now, so the model answers can’t be opened at the moment. If you have a pass, enter your licence key.
Choose a pass I have a licence key
It also opens every other in-depth part in Learn and every Pro tool. Sales are final, except where the law gives you a right to withdraw, for example in the EU and the UK (refund policy).
In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 3 minutes
Fresher to mid

A student's site works when they double-click index.html on their laptop, but after uploading it to a host, the home page loads while the logo and the About page return 404. What are the likely causes, and how do you find and fix them?
What it tests

Case-sensitive URL paths and server file systems, paths that only exist on one computer, and using the Network panel and a local server to reproduce the host's behaviour.

First step

Open DevTools on the live site, reload with the Network panel open, and read the exact URLs that failed. Compare each one with the real file name on the server, letter by letter: About.html against about.html, a space against %20, or a link that still points at C:/ or file:// on the laptop.
Follow-ups
- Why did the same links work on the laptop?
- How can you catch these before uploading?
- What naming rules would you give the team?
From the lesson Set up an editor, a local server and DevTools
Model answer, Pro.
In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 3 minutes
Fresher to mid

A developer starts python3 -m http.server in their home folder to show a colleague a page over the office Wi-Fi. What risks does that create, and how should they preview and share the page instead?
What it tests

Knowing what Python's server listens on by default, what it serves and lists, and safer ways to preview and share work in progress.

First step

Work out what is reachable. By default the server listens on every network interface, so anyone on the same network can open the computer's address on port 8000. Started in the home folder, it serves every file below it and lists the contents of any folder that has no index.html.
Follow-ups
- What does --bind 127.0.0.1 change, and what does --directory change?
- How can the colleague see the page without that risk?
- Why does Python's documentation warn against http.server in production?
From the lesson Set up an editor, a local server and DevTools
Model answer, Pro.
In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 3 minutes
Fresher to mid

After a site moved to a new server, product names in Hindi show as strings such as à¤¨à¤®à¤¸à¥ on some pages, though the files were not changed. What happened, how do you prove it, and what is the permanent fix?
What it tests

How a browser chooses the encoding (byte order mark, Content-Type header, meta charset, fallback), reading headers and document.characterSet in DevTools, and fixing it at the source.

First step

Compare the response headers of both servers in the Network panel: the old one probably sent Content-Type: text/html; charset=utf-8, and the new one sends text/html with no charset. Then check a broken page: if it has no meta charset in its first 1024 bytes, the browser falls back to windows-1252.
Follow-ups
- Why are only some of the pages broken?
- Which part of the fix belongs in the HTML, and which on the server?
- How would you catch this before visitors see it?
From the lesson The document skeleton: doctype, head and body
Model answer, Pro.
In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 3 minutes
Mid to senior

An old intranet page is being restyled. With the new CSS, small images inside table cells have gaps below them in one copy of the page but not in another copy that looks identical. How do you find the cause, and what do you change?
What it tests

Rendering modes chosen by the doctype, document.compatMode and its limits, the line height quirk, and fixing image gaps in standards mode with CSS.

First step

Compare the first line and document.compatMode of both copies. Different doctypes put pages in different rendering modes, and images in table cells are the classic symptom: only no-quirks mode leaves room below the baseline, so the copy without gaps is in quirks or limited-quirks mode.
Follow-ups
- Why can two copies that both report CSS1Compat still differ?
- Should you keep the old doctype to avoid the gaps?
- What CSS removes the gap under an image in standards mode?
From the lesson The document skeleton: doctype, head and body
Model answer, Pro.
In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 3 minutes

All HTML interview questions · The HTML track

Warm-up questions

What is the difference between an HTML element and a tag?

Why serve a page from a local web server instead of opening the HTML file directly?

What happens if an HTML page has no doctype?

Questions with model answers

A marketing page looks exactly as designed, but a screen reader user reports that it has no headings to jump between. The section titles were styled with CSS. What is wrong, how do you confirm it, and how do you fix it without changing how the page looks?

A student's site works when they double-click index.html on their laptop, but after uploading it to a host, the home page loads while the logo and the About page return 404. What are the likely causes, and how do you find and fix them?

A developer starts python3 -m http.server in their home folder to show a colleague a page over the office Wi-Fi. What risks does that create, and how should they preview and share the page instead?

After a site moved to a new server, product names in Hindi show as strings such as à¤¨à¤®à¤¸à¥ on some pages, though the files were not changed. What happened, how do you prove it, and what is the permanent fix?

An old intranet page is being restyled. With the new CSS, small images inside table cells have gaps below them in one copy of the page but not in another copy that looks identical. How do you find the cause, and what do you change?