Episode 1 — Fundamentals / 1.5 — Semantic HTML and Browser Rendering
1.5 — Exercise Questions: Semantic HTML & Browser Rendering
Practice questions for all nine subtopics in Section 1.5. Mix of short-answer, markup reasoning, and DevTools drills. Try each without reopening the lesson files first.
How to use this material (instructions)
- Read lessons in order —
README.md, then1.5.a→1.5.iin sequence. - Answer closed-book first — write an answer (bullets or short paragraphs), then compare to the matching lesson.
- Hands-on DevTools — use Performance, Rendering (layout shift regions), Lighthouse, and Accessibility panels where indicated.
- Redo misses — retry the next day; mark weak subtopics (
1.5.bCLS,1.5.eARIA, etc.). - Interview prep — pair with
1.5-Interview-Questions.md.
1.5.a — Rendering Pipeline (Q1–Q7)
Q1. List the seven stages from HTML/CSS bytes to pixels using the names from the lesson (download → DOM/CSSOM → … → composite).
Q2. What is the render tree, and why is display: none content absent from it?
Q3. Why can JavaScript invalidate layout even if you are "only changing classes"?
Q4. What is the critical rendering path (CRP), and what makes it "critical"?
Q5. Why is CSS called a render-blocking resource?
Q6. Compare defer and async on a <script> tag — when does each execute, and which preserves document order?
Q7. Hands-on: Open any site → DevTools Performance → record a short reload. Name three different activities you see in the flame chart (e.g. Parse HTML, Layout, Paint, Evaluate Script).
1.5.b — Reflow & Repaint (Q8–Q14)
Q8. Define reflow, repaint, and composite in one sentence each.
Q9. Give four concrete CSS property changes that typically force reflow.
Q10. Give two CSS property changes that trigger repaint only (no reflow).
Q11. What is layout thrashing, and what coding pattern causes it?
Q12. How does requestAnimationFrame help avoid layout thrashing?
Q13. Name four CLS causes and one fix for each.
Q14. Hands-on: Open DevTools → Rendering panel → enable Layout Shift Regions. Reload a page with ads or lazy-loaded images. Where do blue flashes appear? Why?
1.5.c — Landmarks (Q15–Q21)
Q15. Why is <nav> preferable to <div class="nav"> for primary navigation?
Q16. How many <main> elements should a typical document expose, and what belongs inside?
Q17. Contrast <section> vs <article> with an example of each.
Q18. You have two navigation regions (header + footer). What attribute(s) help users distinguish them in assistive tech?
Q19. When is <aside> appropriate vs a generic <div class="sidebar">?
Q20. Write a document skeleton (just the tags, no content) for a blog homepage with: branding header, primary nav, main content area with two article cards, a sidebar, and a footer.
Q21. What is the anti-pattern of wrapping every UI widget in <article> "for SEO"? Why is it harmful?
1.5.d — SEO & Semantics (Q22–Q28)
Q22. Why is semantic HTML not a substitute for high-quality content in SEO?
Q23. What is a canonical URL, and when is it useful?
Q24. List four honest HTML-level signals that help search engines understand a page.
Q25. What is JSON-LD used for at a high level, and what is one risk of incorrect structured data?
Q26. Name three SEO anti-patterns that can lead to manual actions or trust damage.
Q27. How does hreflang help with internationalized content?
Q28. Why does fast, stable page performance (Core Web Vitals) correlate with better search ranking?
1.5.e — Accessibility & ARIA (Q29–Q38)
Q29. State the first rule of ARIA in your own words.
Q30. Why is <button> better than <div role="button"> for a clickable control? List at least three things <button> provides automatically.
Q31. Name four accessibility tests you can run without paid tools.
Q32. When might aria-live be appropriate? What is the difference between polite and assertive (one sentence each)?
Q33. What does aria-hidden="true" do, and what is one dangerous misuse?
Q34. Why should you never remove outline: none on focus without providing a replacement?
Q35. Explain the inclusive design spectrum — give one example of a permanent, temporary, and situational motor disability.
Q36. What is a skip link, and who benefits from it?
Q37. Why is placeholder text not a substitute for a <label>? Give two reasons.
Q38. Hands-on: On any site, press Tab repeatedly through the page. Note: (a) Can you reach all interactive elements? (b) Is focus order logical? (c) Is focus visible?
1.5.f — Headings (Q39–Q44)
Q39. Why should headings not be chosen based on default browser font size?
Q40. What goes wrong when you skip from h2 to h5 without structural reason?
Q41. How does the document <title> differ from h1 in purpose and location?
Q42. Give an example where an h2 inside <main> improves both SEO structure and screen reader navigation.
Q43. In a design system, every card component renders an <h3> title. The page has no <h1> or <h2>. What is the problem, and how would you fix it?
Q44. How does aria-labelledby connect a <section> to its heading for assistive tech?
1.5.g — Lists (Q45–Q50)
Q45. When is <ol> more appropriate than <ul>? Give two examples.
Q46. Write (sketch) nested list markup: outer ordered steps, inner unordered tools needed for each step.
Q47. Why do many sites use ul > li > a inside <nav> even when bullets are hidden?
Q48. What does reversed on <ol> do? Give one real-world example.
Q49. When would you use a description list (<dl>, <dt>, <dd>) instead of <ul>?
Q50. What does a screen reader typically announce when entering a list? Why is this useful?
1.5.h — Responsive Images (Q51–Q57)
Q51. Explain srcset with w descriptors + sizes in plain English — who chooses the file?
Q52. When do you reach for <picture> instead of a single <img srcset>?
Q53. Compare WebP and AVIF at a high level — compression, browser support, and encode cost.
Q54. Why should the LCP hero image not use loading="lazy"?
Q55. What does fetchpriority="high" do, and when should you use it?
Q56. When is SVG a better choice than responsive raster images?
Q57. Hands-on: Find a hero image on any site. In DevTools, check whether width/height or CSS aspect-ratio is present. Predict CLS risk if removed.
1.5.i — Links & Forms (Q58–Q67)
Q58. Why pair target="_blank" with rel="noopener"?
Q59. Contrast id vs name on a text input — what is each used for?
Q60. List five useful type values on <input> and what each hints to the browser/user.
Q61. Explain client vs server validation — which is authoritative for security, and why?
Q62. What is the purpose of <fieldset> and <legend> in a form?
Q63. Write a minimal accessible login form with email, password, and submit button. Include proper labels and autocomplete.
Q64. What is the difference between method="get" and method="post" on a <form>?
Q65. Why is autocomplete important for accessibility and usability? Give two examples of autocomplete values.
Q66. What does the novalidate attribute on <form> do? When is it useful?
Q67. Hands-on: Create a simple form with required, type="email", and minlength. Submit with invalid data. What does the browser show? Now add novalidate — what changes?
Practical Exercises (Q68–Q74)
Q68. Hands-on: Open DevTools Performance tab. Record a page load. Find the Layout and Paint events. How long does the longest layout take?
Q69. Hands-on: Run Lighthouse on any page (Accessibility audit). What is the score? Pick two failing items and explain what each means.
Q70. Hands-on: Open DevTools → Elements → Accessibility panel. Inspect a <button> and a <div>. Compare their role, name, and keyboard focusable properties.
Q71. Hands-on: On a site with images, inspect the hero <img> element. Does it have srcset? Does it have width/height? Does it have loading="lazy" (and should it)?
Q72. Hands-on: Use a screen reader (VoiceOver on macOS: Cmd+F5; NVDA on Windows). Navigate a page using landmarks (VO+U → Landmarks rotor). How many landmarks appear? Are they labeled?
Q73. Exercise: Take a page built entirely with <div> elements. Rewrite the markup using proper semantic elements (header, nav, main, section, article, footer, h1–h3). List what changed and why.
Q74. Exercise: Given this image tag, add responsive image support with three sizes and WebP format:
<img src="photo.jpg" alt="Team photo" />
Reflection (Q75–Q76)
Q75. Draw the rendering pipeline from memory (boxes + arrows). Mark where CLS can appear and where JavaScript can force re-computation.
Q76. Which subtopic (1.5.a–1.5.i) is weakest for you? List three follow-up actions (read, build, test).
Answer hints
(Short reminders — expand in your own words when studying.)
| Q | Hint |
|---|---|
| Q1 | Download → DOM + CSSOM → render tree → layout → paint → composite |
| Q2 | Combined DOM + computed styles; display: none = not visible = excluded from painting |
| Q3 | Class changes can alter layout-affecting properties (width, padding) → forces reflow |
| Q4 | Minimum work for first meaningful pixels — HTML + critical CSS + layout + paint |
| Q5 | Browser won't paint until CSSOM is complete — late CSS = late first paint |
| Q6 | defer: after parsing, in order. async: when ready, no order guarantee |
| Q8 | Reflow = geometry; repaint = pixels; composite = layer assembly |
| Q9 | width, height, padding, border, font-size, DOM insert/remove |
| Q10 | color, background-color, visibility (not display) |
| Q11 | Write→read geometry interleaving in loops; forces sync layout each iteration |
| Q12 | Aligns visual work with display refresh; batches changes into one frame |
| Q13 | Missing dimensions → add width/height; fonts → font-display; banners → fixed position; injected content → skeleton |
| Q15 | <nav> exposes navigation landmark to assistive tech; <div> has no role |
| Q16 | One; primary content the user came for |
| Q17 | section = thematic grouping (chapter); article = self-contained (blog post) |
| Q18 | aria-label on each <nav> (or visible heading tied with aria-labelledby) |
| Q21 | Noise in screen reader article list; confuses search engine structure signals |
| Q22 | Semantics reduce ambiguity but don't create value — content quality drives ranking |
| Q23 | Tells search engines the preferred URL; useful for duplicate pages (www vs non-www, params) |
| Q25 | Describes entities for rich results; incorrect data → manual actions from search engines |
| Q29 | Use native HTML elements when they have the right role/behavior |
| Q30 | Keyboard handling (Enter/Space), focus, accessible role, disabled state |
| Q33 | Removes subtree from accessibility tree; dangerous if put on focusable/interactive elements |
| Q37 | Placeholder disappears on input; low contrast; not announced reliably as label |
| Q39 | Headings define outline/hierarchy, not visual size — CSS controls appearance |
| Q40 | Outline depth breaks; screen reader users lose mental model of structure |
| Q41 | <title> in <head> for tab/snippet; <h1> in <body> for visible page topic |
| Q44 | aria-labelledby="heading-id" gives the section an accessible name matching visible text |
| Q45 | Steps in a recipe; ranking of top players — sequence carries meaning |
| Q47 | Preserves list semantics — screen readers announce count and position |
| Q48 | Descending numbering — e.g. "Top 10 countdown" starting from 10 |
| Q49 | Term–definition pairs: glossaries, product specs, metadata tables |
| Q51 | Browser picks the best candidate using viewport + sizes + DPR — author provides options |
| Q52 | Format negotiation (AVIF→WebP→JPEG) or art direction (different crops per breakpoint) |
| Q54 | loading="lazy" delays download — LCP element needs to load ASAP |
| Q56 | Logos, icons, illustrations — scales perfectly without resolution variants |
| Q58 | Prevents opened tab from accessing window.opener (tab-nabbing class of attacks) |
| Q59 | id = DOM identifier (label association, JS targeting); name = form submission key |
| Q61 | Server — clients can bypass HTML5/JS checks via DevTools, curl, disabled JS |
| Q62 | Groups related controls (radio buttons, address fields); legend labels the group |
| Q64 | GET appends data to URL (bookmarkable); POST sends in body (credentials, writes) |
| Q66 | Disables browser constraint validation UI; useful when JS handles validation UX |
| Q73 | Replace div with header, nav, main, etc. — each carries semantic role |