Professional front-end work splits what something is (HTML) from how it looks (CSS). Mixing them carelessly creates pages that break in assistive tech, search, and maintenance.
HTML answers “what is this?”
- A primary heading is
<h1>, not a<div>with huge font-size. - A form submit action is
<button type="submit">, not a styled<div>. - Site regions use landmarks:
<header>,<nav>,<main>,<footer>.
CSS answers “how should it look?”
- Typography, spacing (box model), layout (flex/grid), color, borders, motion.
Anti-patterns to drop early
| Smell | Better habit |
|---|---|
Empty <div> soup | Pick the element that matches meaning |
Inline style="" everywhere | Classes in a stylesheet |
Skipping alt on images | Describe the image purpose |
| Fake buttons as links | <button> for actions |
Important interview questions and answers
- Q: Should heading level be chosen for font size?
A: No—choose level for document structure; size is CSS. - Q: Why are landmarks useful?
A: They help users jump regions quickly with assistive tech. - Q: When is inline CSS acceptable?
A: Rarely—email templates or quick prototypes; prefer classes for app UI.
Self-check
- Change
<article>to<div>—what accessibility hint did you lose? - Name two CSS properties for a “primary” button without changing element type.
Challenge
Name the layers
- In the playground, add an inline style on the paragraph.
- Move that style into the
<style>block as a class.
Done when: the paragraph is styled only via CSS class, not inline style.