HTML100: Structural Architecture

Master semantic HTML5, modern form validation, accessibility (a11y), media optimization, and advanced metadata for the perfect frontend interview.

Level

Structural Scale

Questions

100+

Focus

Modern Semantics

Format

Tech-Standard

🏗️

HTML Basics

🏷️

Semantic HTML

📝

Forms & Input

🖼️

Media & Links

📊

Tables

🛡️

Metadata & The <head>

♿

Accessibility (a11y)

🚀

Advanced & HTML5 Features

Next Topic

CSS

HTML100: Structural Architecture

HTML Basics

What does HTML stand for?

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

What does <!DOCTYPE html> do?

What is the basic structure of an HTML page?

What is the difference between block and inline elements?

What are void elements (self-closing tags)?

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

What is the difference between HTML attributes and properties?

Semantic HTML

What is semantic HTML and why does it matter?

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

What do <main>, <header>, <footer>, and <aside> mean?

When do you use <b> vs <strong>, and <i> vs <em>?

What are <figure> and <figcaption> used for?

What is the <nav> element for?

Forms & Input

What is the difference between GET and POST in a form?

What does the <label> element do?

What new input types did HTML5 add?

What is the difference between <input type="submit"> and <button>?

What do name, id, and placeholder do on an input?

What are <fieldset> and <legend>?

How does HTML5 form validation work?

What is enctype="multipart/form-data" and when do you need it?

Media & Links

What is the alt attribute on images and why is it important?

What is the difference between absolute and relative URLs?

What does target="_blank" do and what danger does it create?

How do you add video and audio to a page in HTML5?

What is the srcset attribute on images?

What is the <picture> element and when do you use it?

Tables

What is the correct way to build an HTML table?

What is the difference between colspan and rowspan?

Why should you NOT use tables for page layout?

Metadata & The <head>

What does the viewport meta tag do?

Should <link> go in <head>, and <script> before </body>?

What are Open Graph meta tags?

What is the difference between async and defer on scripts?

What is the charset meta tag?

Accessibility (a11y)

What are ARIA roles and when should you use them?

What is aria-label, aria-labelledby, and aria-describedby?

What is keyboard accessibility?

What is a "skip to main content" link?

What is the difference between aria-hidden="true" and display:none?

Why do you put lang="en" on the <html> tag?

Advanced & HTML5 Features

What is the difference between localStorage, sessionStorage, and cookies?

What are data-* attributes?

What is <canvas> and how is it different from SVG?

What is IndexedDB vs localStorage?

What is the Shadow DOM?

What is the difference between reflow and repaint?

What is a CDN?

What is the Critical Rendering Path?

What is lazy loading and how do you use it?

What is Content Security Policy (CSP)?

What are HTML entities like &amp; and < ?

What is XSS (Cross-Site Scripting)?

What is progressive enhancement?

Why should <script> tags go at the bottom of the page?

What does rel="stylesheet" do on a <link> tag?

What is the difference between <ol>, <ul>, and <dl>?

What is the <template> element?

What is the difference between the DOM and the BOM?

What is the difference between innerHTML, textContent, and innerText?

How should you use heading tags (h1–h6)?

What does <meta name="robots"> do?

What is resource hinting (preload, prefetch, preconnect)?

What is the <details> and <summary> element?

What is the <dialog> element?

What is the <progress> vs <meter> element?

What are Web Components?

What is the difference between HTML and XHTML?

What is the contenteditable attribute?

What is CORS?

What are HTML entities like & and < ?