search

HTML

hashtag
Topic 1 (HTML): Document Structure & Semantics

hashtag
Core Concepts

  • HTML = structure + meaning (semantics)

  • Proper doc: <!doctype>, <html>, <head>, <body>

  • Use semantic tags: header/nav/main/section/article/footer

hashtag
Common Interview Questions (1–10)

1) What is HTML?

Answer: HTML structures web content using elements like headings, paragraphs, links, images, and forms.

2) Why do we use <!DOCTYPE html>?

Answer: It tells the browser to use standards mode so modern HTML renders correctly.

3) What’s the job of <head>?

Answer: It stores metadata: title, charset, viewport, SEO tags, CSS links, scripts.

4) What’s the job of <body>?

Answer: It contains everything visible on the page: text, media, layout elements.

5) What is a semantic tag?

Answer: A tag that describes meaning (e.g., <nav>, <main>, <article>), improving SEO + accessibility.

6) Difference between <section> and <div>?

Answer: <section> is semantic grouping; <div> is generic container without meaning.

7) Difference between <article> and <section>?

Answer: <article> is self-contained content (blog post/card). <section> is a themed grouping inside a page.

8) Why should <h1> usually be used once?

Answer: It represents the main page heading; multiple can confuse structure for SEO/screen readers (exceptions exist in complex layouts).

9) What is the lang attribute used for?

Answer: It helps screen readers and search engines understand the page language. Example: <html lang="en">.

10) What is HTML5?

Answer: The modern HTML standard with semantic tags, better forms, audio/video support, and APIs.

hashtag
Pitfalls / Traps

  • Using only <div> everywhere (no meaning)

  • Skipping heading levels (h1 → h4)

  • Missing lang, missing charset

hashtag
Short Examples

hashtag
Mini Cheat Sheet

  • Structure: doctype → html → head + body

  • Semantics: header/nav/main/section/article/footer

  • Accessibility baseline: lang, headings order

hashtag
Topic 2 (HTML): Text, Links, and Media

hashtag
Core Concepts

  • Use semantic text tags (strong/em) not just visual (b/i)

  • Links via <a href="">

  • Images need alt for accessibility

hashtag
Common Interview Questions (11–20)

11) <strong> vs <b>?

Answer: <strong> = important meaning; <b> = visual bold only.

12) <em> vs <i>?

Answer: <em> adds emphasis meaning; <i> is visual italics.

13) src vs href?

Answer: src loads a resource (img/script). href points to a destination (link/css).

14) What is alt and why critical?

Answer: It describes the image for screen readers and shows if image fails—also helps SEO.

15) How to open links in a new tab safely?

Answer: target="_blank" plus rel="noopener noreferrer" for security.

16) <figure> and <figcaption> use case?

Answer: They group media with a caption in a semantic way.

17) How do you embed video/audio?

Answer: Use <video controls> / <audio controls> with <source> for formats.

18) What is an iframe used for?

Answer: Embedding external pages (YouTube/maps). Use carefully for security/performance.

19) Relative vs absolute URLs?

Answer: Relative depends on current location (/about). Absolute includes full domain.

20) loading="lazy" for images?

Answer: Defers loading offscreen images to speed up page load.

hashtag
Pitfalls / Traps

  • Missing alt

  • Using <br> repeatedly instead of proper paragraphs

  • Opening new tab without rel

hashtag
Short Examples

hashtag
Mini Cheat Sheet

  • Links: href, New tab: target="_blank" rel="noopener noreferrer"

  • Images: always alt

  • Performance: loading="lazy"

hashtag
Topic 3 (HTML): Lists, Tables, and Data Display

hashtag
Core Concepts

  • Lists: ul/ol/dl

  • Tables: only for tabular data

  • Use thead/tbody/th/caption for semantics

hashtag
Common Interview Questions (21–30)

21) Types of HTML lists?

Answer: ul (unordered), ol (ordered), dl (description list).

22) When to use a table?

Answer: Only for structured data (rows/columns), not layout.

23) <th> vs <td>?

Answer: <th> is header cell (semantic). <td> is normal data cell.

24) Why use <caption> in tables?

Answer: Helps accessibility—explains what the table is about.

25) What is scope in <th>?

Answer: Improves accessibility by telling if header applies to row/col (scope="col").

26) What is <thead>, <tbody>, <tfoot>?

Answer: They organize table sections for readability and styling.

27) What is nesting lists?

Answer: Putting a list inside another list item for hierarchy.

28) What is <dl> used for?

Answer: Name–value pairs: terms (dt) and descriptions (dd).

29) How to make tables accessible quickly?

Answer: Use <caption>, <th>, scope, and meaningful headers.

30) What is the biggest table trap in interviews?

Answer: Using tables for page layout—modern layout should be CSS (Flex/Grid).

hashtag
Pitfalls / Traps

  • Missing headers (th)

  • Tables used for layout

  • No <caption> for complex data tables

hashtag
Short Examples

hashtag
Mini Cheat Sheet

  • Lists: ul/ol/dl

  • Tables: caption + thead/tbody + th(scope)

  • Rule: table only for data

hashtag
Topic 4 (HTML): Forms & Validation

hashtag
Core Concepts

  • Forms collect input and submit via GET/POST

  • label + id improves accessibility

  • HTML validation is helpful but server validation is mandatory

hashtag
Common Interview Questions (31–40)

31) What is the purpose of <form>?

Answer: To collect user input and submit it to server or handle with JS.

32) GET vs POST?

Answer: GET puts data in URL (search). POST sends in body (safer for sensitive data).

33) Why is name attribute important?

Answer: Without name, the input value won’t be submitted.

34) Why use <label for="">?

Answer: Increases click area and helps screen readers.

35) required does what?

Answer: Stops submission if field is empty (basic client validation).

36) placeholder vs value?

Answer: Placeholder is hint; value is actual submitted content.

37) Radio vs checkbox?

Answer: Radio = select one in group; checkbox = multiple selections.

38) What is autocomplete?

Answer: Helps browser autofill (e.g., autocomplete="email").

39) How do you validate emails quickly?

Answer: Use type="email" plus extra checks in JS/server.

40) Biggest form security rule?

Answer: Always validate on the server; client validation can be bypassed.

hashtag
Pitfalls / Traps

  • Inputs without name

  • Labels not connected to inputs

  • Trusting only client-side validation

hashtag
Short Examples

hashtag
Mini Cheat Sheet

  • Submit keys = name

  • Accessibility = label + for + id

  • Validation: client for UX, server for security

hashtag
Topic 5 (HTML): Accessibility, SEO, Performance Basics

hashtag
Core Concepts

  • Semantic tags + labels + alt = baseline accessibility

  • Metadata supports SEO

  • Load assets efficiently

hashtag
Common Interview Questions (41–50)

41) What is web accessibility?

Answer: Making web usable for everyone, including screen readers and keyboard users.

42) What is ARIA?

Answer: Accessibility attributes for cases where native HTML isn’t enough—use native first.

43) What is tab order and why matters?

Answer: Keyboard navigation should be logical; don’t break it with random tabindex.

44) What is a meaningful link text?

Answer: Avoid “click here”; use descriptive text like “Download report”.

45) Why is <title> important?

Answer: Appears in browser tab and helps SEO/search results.

46) Meta description purpose?

Answer: Summarizes page for search snippets (not ranking directly but improves click-through).

47) What is defer in script tags?

Answer: Loads script without blocking HTML parsing; runs after parse.

48) async vs defer?

Answer: async runs ASAP (order not guaranteed). defer preserves order.

49) What causes slow pages in HTML?

Answer: Huge images, too many scripts, render-blocking CSS, no lazy loading.

50) Quick performance fixes in HTML?

Answer: Compress images, use loading="lazy", defer scripts, minimize third-party embeds.

hashtag
Pitfalls / Traps

  • Removing focus outline without replacement

  • Missing alt/labels

  • Too many heavy scripts early

hashtag
Short Examples

hashtag
Mini Cheat Sheet

  • A11y: semantic + alt + label + focus

  • SEO: title + meta description

  • Perf: lazy images + defer scripts

Last updated