Basics

What is HTML?

"Markup language for web structure"

HTML (HyperText Markup Language) is the standard markup language for creating web pages:

Defines structure and content
Uses tags to mark elements
Provides semantic meaning
Works with CSS and JavaScript

"HTML is a markup language that defines the structure and content of web pages using tags and elements."

Document Structure

DOCTYPE → html → head → body

A well-structured HTML document has several key components:

<!DOCTYPE html>: Declares the document type and version of HTML (HTML5). Placing this at the very top ensures browsers use the standard rendering mode.
<html>: The root element containing the entire page.
<head>: Holds metadata (data about the document) that isn’t displayed on the page itself.
- <meta charset="UTF-8" />: Sets the character encoding, allowing your page to handle any language or symbol.
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />: Controls the "viewport"—the visible area of a web page on a device. On mobile, pages without this tag appear zoomed out or non-responsive. Setting width=device-width makes the viewport match the device’s screen width, so layouts adapt correctly. The initial-scale=1.0 sets the starting zoom level so 1 CSS pixel equals 1 device pixel. This tag is essential for responsive design: it allows CSS media queries and flexible layouts to work as intended across phones, tablets, and desktops.
- <title>: Sets the title of the page (shown in the browser tab).
- <link rel="stylesheet" href="styles.css" />: Links to an external CSS stylesheet for styling.
- <style>: For internal (embedded) styles used directly in the document.
<body>: Contains everything visible to users: text, headings, images, links, etc.
- Here you can include content, and also load scripts at the end for better page loading performance.

Annotated Example:

<!DOCTYPE html>
<!-- Declares the document uses HTML5 -->
<html>
  <head>
    <meta charset="UTF-8" />
    <!-- Sets Unicode encoding -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Responsive design for mobile -->
    <title>Page Title</title>
    <!-- Title appears in the browser tab -->
    <!-- External stylesheet -->
    <link rel="stylesheet" href="styles.css" />
    <!-- Internal stylesheet for quick styles -->
    <style>
      body {
        background-color: #f7fafc;
        font-family: Arial, sans-serif;
      }
      h1 {
        color: #2a4365;
      }
    </style>
  </head>
  <body>
    <!-- Main visible content -->
    <h1>Welcome to My Page</h1>
    <p>This is a sample HTML page illustrating proper structure.</p>
    <a href="https://example.com" target="_blank">Visit Example Website</a>

    <!-- External scripts for functionality (placed at end for performance) -->
    <script src="script.js"></script>

    <!-- Inline JavaScript example -->
    <script>
      document.querySelector("h1").onclick = function () {
        alert("You clicked the heading!");
      };
    </script>
  </body>
</html>

"Every HTML document needs DOCTYPE, html, head, and body elements. Include meta tags for encoding and viewport to ensure compatibility and responsiveness."

Document Structure

Always start with <!DOCTYPE html> to enable HTML5 mode and consistent browser behavior.
The <head> section is essential for metadata (encoding, viewport, title, styles).
The <body> contains all the content visible on the page.

Common Elements

HTML elements are often categorized as block or inline elements
Block: start on a new line, take full width.
Inline: flow within lines, only as wide as their content.

Block Elements

Block elements structure the major sections of your page.

<h1>–<h6>: Headings (create document outline)
<p>: Paragraph (text blocks)
<ul>, <ol>, <li>: Lists (unordered, ordered, list items)
<div>: Generic container
<header>, <main>, <footer>, <section>, <article>, <nav>, <aside>: Semantic block sectioning

Semantic Elements

Use semantic HTML5 elements (<header>, <nav>, <main>, <article>, <section>, <aside>, <footer>) instead of generic <div> elements. They improve accessibility, SEO, and make your code self-documenting.

Inline Elements

Inline elements appear within lines of text and do not start on a new line.

<a>: Hyperlink
<img>: Image
<span>: Generic inline container
<strong>, <em>: Emphasis
<code>, <kbd>, <mark>, <sub>, <sup>: Inline formatting
<br>: Line break

Examples:

<!-- Link -->
<a href="https://react.dev">Visit React Docs</a>

<!-- Image -->
<img src="logo.png" alt="Logo" width="50" />

<!-- Span (for styling) -->
<span style="color: red;">Red Text</span>

<!-- Inline formatting -->
<p>
  This is <strong>important</strong> and <em>emphasized</em>.<br />
  Here’s <code>inline code</code>.
</p>

Layout Tip

Use block elements to structure your layout, and inline elements for text-level styling or content.

Attributes

Attributes = element properties

Common attributes:

id - Unique identifier
class - CSS class selector
src - Source URL for embedding content (e.g., images, videos, scripts).
href - URL for linking or referencing resources (e.g., <a>, <link>).

Interview Tip:
If you're asked in an interview why CSS is treated as an "outer reference" (using href), you can answer:

"Browsers treat CSS files as referenced resources using the href attribute in a <link> tag. When the HTML is parsed, the browser sees <link href="style.css" rel="stylesheet" /> and recognizes it as an instruction to fetch and apply an external stylesheet.
Unlike resources like images or scripts loaded with src (which embed their content directly into the page flow), CSS is linked from the outside. This outer reference model makes stylesheets sharable and allows browsers to cache and re-use CSS across pages, improving performance.
So, CSS is 'referenced' with href because it's intended to be linked and reused, not embedded directly."

Quick example:

<img src="logo.png" alt="Logo" />
<!-- Embeds image -->
<a href="https://react.dev">React Docs</a>
<!-- Links to site -->
<link href="style.css" rel="stylesheet" />
<!-- Links stylesheet -->

alt - Alternative text
data-* - Custom data attributes
- Example: <button data-test-id="save-btn">Save</button>
- Commonly used in component tests to reliably select elements (data-test-id, data-testid, etc.)
- In testing tools (like Cypress/Jest), select elements with: [data-test-id="save-btn"]

Testing Tip

Use data-* attributes for testing and JS hooks, not for storing sensitive data.

Security Warning

Never store sensitive data (passwords, tokens, API keys) in data-* attributes. They are visible in the DOM and can be accessed by anyone.

"Attributes provide additional information about HTML elements."

Forms

Form = input container

<form action="/submit" method="POST">
  <!-- 'for' must match the input's 'id', not 'name', for proper label association and accessibility -->
  <label for="username">Username:</label>
  <input type="text" name="username" id="username" />
  <label for="user-email">Email:</label>
  <input
    type="email"
    name="email"
    id="user-email"
    placeholder="Enter your email"
    required
    autocomplete="email"
    maxlength="{254}"
  />
  <button
    type="submit"
    id="main-save-btn"
    class="btn btn-primary"
    disabled
    autofocus
    name="saveBtn"
    aria-label="Save"
    data-test-id="save-btn"
  >
    Submit
  </button>
</form>

Common input types:

text, email, password
checkbox, radio
number, date
submit, button

Form Accessibility

Always associate labels with inputs using for (matching the input's id). This improves accessibility and allows users to click the label to focus the input.

Accessibility & Keyboard Friendliness

Keyboard friendly = fully usable with just a keyboard

Use semantic HTML elements (<button>, <a>, <input>, etc.) for built-in keyboard support.
Make all actions and navigation possible by keyboard (Tab, Shift+Tab, Enter, Space).
Never require a mouse for critical tasks.
Keep focus outlines visible (:focus styles matter!).
Use a logical HTML structure for natural tab order.
Only use tabindex="0" on custom elements (rare with semantic tags).

For custom controls (like a <div> as button):

Add role="button" and tabindex="0"

Example in React:

<div
  role="button"
  tabIndex={0}
  onClick={handleClick}
  onKeyDown={(e) => {
    if (e.key === "Enter" || e.key === " ") {
      handleClick();
    }
  }}
>
  Custom Button
</div>

Custom Button Warning

Making a <div> a button? Prefer <button>, but if not: add role, tabindex, handle keyboard. However, know it's less reliable than a real button and may have accessibility issues.

"A fully accessible site works entirely with keyboard—no mouse needed."

Semantic HTML + ARIA = accessible

Use semantic tags first.
Provide alt text for images.
Use headings in order.
Label form fields.

Accessibility Best Practice

Always provide alt text for images. For decorative images, use empty alt="". For informative images, describe what they show.

Add ARIA attributes only if needed (aria-label, aria-labelledby, aria-describedby).
- Examples:
  - aria-label="Close" for icon-only buttons
  - aria-describedby="hint-text" for extra input info
  - aria-live="polite" for live updates
- Tips:
  - Prefer native elements over ARIA roles on non-semantic tags.
  - Use ARIA only when you can't get accessibility with HTML alone.
  - IDs used by ARIA must match real elements.
  - Use ARIA roles (role="alert", role="dialog") only if no semantic option.
- Making a <div> a button?
  - Prefer <button>, but if not: add role, tabindex, handle keyboard, but know it’s less reliable than a real button.

"Accessible HTML lets everyone, including people with disabilities, use your site."

Semantic HTML

Meaningful tags > div spam

Tag	Purpose
`<header>`	Header content
`<nav>`	Navigation
`<main>`	Main content
`<article>`	Independent content
`<section>`	Thematic grouping
`<aside>`	Sidebar content
`<footer>`	Footer content

"Semantic HTML improves accessibility, SEO, and code maintainability."

HTML5 Features

Semantic tags + new APIs

Semantic elements (<header>, <nav>, etc.)
Form validation attributes
<video> and <audio> elements
Canvas API
Local storage APIs

"HTML5 introduced semantic elements, native media support, and new APIs for richer web applications."

Best Practices

✅ Use semantic HTML ✅ Validate HTML ✅ Separate structure (HTML) from style (CSS) ✅ Use meaningful alt text ✅ Proper heading hierarchy

Semantic HTML

Always prefer semantic HTML elements over generic <div> and <span> when possible. Semantic elements improve accessibility, SEO, and code maintainability.

Common Mistakes

❌ Don't use deprecated tags
❌ Don't nest block elements in inline elements
❌ Don't skip heading levels (h1 → h3 without h2)
❌ Don't forget alt text on images

"HTML is the markup language that structures web content using tags and elements. Modern HTML5 emphasizes semantic elements like header, nav, main, and article for better accessibility and SEO. HTML works with CSS for styling and JavaScript for interactivity, following the separation of concerns principle."

🧠 Ultra-Short Cheat Sheet

Structure = HTML
Semantic tags
Forms with validation
Accessibility (alt, ARIA)
HTML5 features
Separation of concerns

What is HTML?​

Document Structure​

Common Elements​

Block Elements​

Inline Elements​

Attributes​

Forms​

Accessibility & Keyboard Friendliness​

Semantic HTML​

HTML5 Features​

Best Practices​

🧠 Ultra-Short Cheat Sheet​

What is HTML?

Document Structure

Common Elements

Block Elements

Inline Elements

Attributes

Forms

Accessibility & Keyboard Friendliness

Semantic HTML

HTML5 Features

Best Practices

🧠 Ultra-Short Cheat Sheet