HTML vs CSS vs JavaScript
The Three Layers
| Technology | Responsibility |
|---|---|
| HTML | Structure and meaning |
| CSS | Visual presentation |
| JavaScript | Behavior and interactivity |
<button class="cta" type="button">Save</button>
.cta { background: navy; color: white; }
document.querySelector('.cta').addEventListener('click', saveProfile)
Good Separation
- Put content and relationships in HTML.
- Put visual rules in CSS.
- Put events and dynamic logic in JavaScript.
Bad Separation
- Inline styles for full layouts
- JavaScript-generated markup for content that could have been static
- Markup shaped around CSS quirks instead of document meaning
What's Next
- Continue to 2. Document Structure and Metadata