A page has three layers
Separate content, appearance and behavior.
13 minutes
HTML names the meaning
A heading introduces a section, a button triggers an action and a label names a form field. Semantic elements communicate to browsers, assistive technology and future maintainers. A teaching-session card starts with meaningful content, before visual styling.
CSS and JavaScript add different things
CSS controls layout and visual presentation. JavaScript handles interactions and state. A Save button might look complete in CSS while doing nothing; inspect behavior separately from appearance.
html
<section aria-labelledby="session-title">
<h2 id="session-title">Journal club</h2>
<label for="facilitator">Facilitator</label>
<input id="facilitator" name="facilitator" />
<button type="button">Save assignment</button>
</section>