Colors in HTML history and today

Early HTML mixed presentation with structure (font, bgcolor). Those facilities are obsolete for modern web apps—CSS owns color and typography.

Modern approach

• Define palettes with CSS custom properties or preprocessor variables.
• Apply color, background-color, gradients, and filters in stylesheets.
• Use SVG/CSS for icons instead of bitmaps when you need infinite scaling.

Accessibility requirements

• Maintain contrast between text and backgrounds (WCAG AA is a common baseline).
• Never rely on color alone to convey state—pair with text, icons, or patterns.
• Respect prefers-color-scheme and user themes.

Images and color

Raster images encode colors in pixels; SVG uses fills and strokes in markup or CSS. Canvas pixels are manipulated via JavaScript—outside raw HTML color attributes.

Example — captions reinforce meaning beside pixels

<figure>
  <img
    src="/images/img_8124.webp"
    width="1280"
    height="960"
    alt="Wide landscape sample photo from the course image pack."
    loading="lazy"
  >
  <figcaption>Meaning survives color-inversion modes because the caption is plain text—not just warm/cool hues in the JPEG.</figcaption>
</figure>

Rendered output

What teams forget

• Contrast is contractual: WCAG-ish ratios are baseline for text; QA should include forced-colors / high contrast modes—not only brand palettes.
• State without hue: error/success/disabled cues need text, icons, or patterns—not “red versus green alone.”
• Inherited palettes: marketing hex values pasted into prose can break readability on tinted cards—enforce tokens.

Important interview questions and answers

1. Q: When should you use `strong` vs `b`?
   A: Use `strong` for semantic importance; use `b` only for stylistic offset without importance semantics.
2. Q: Why is `target="_blank"` usually paired with `rel="noopener"`?
   A: It blocks the opened page from controlling the opener via `window.opener`, improving security.
3. Q: Why avoid fake buttons built with ``?
   A: Anchors are for navigation; actions should use `` for proper semantics, keyboard behavior, and history handling.

Tip: Prefer CSS custom properties for theme colors, not deprecated font tags.