WebsitesModule 1: The web, explainedLesson 3 of 15
Course progress13%
12 min lesson · Updated August 2026
What are HTML, CSS and JavaScript?
HTML gives a web page meaningful structure, CSS controls its presentation, and JavaScript can change behavior and data; good websites use each layer for its proper job and keep essential meaning resilient.
What you will learn
By the end, you will understand:
Explain HTML, CSS and JavaScript roles
Understand browser DOM, assets and progressive enhancement
Recognize why semantics and separation improve quality
Visual explainer
See the idea clearly.
Semantic HTML forms a document skeleton, CSS adds responsive presentation, and JavaScript adds optional interactions while the core content remains understandable.
Three core layers
Layer
Job
HTML
Content meaning and structure: headings, paragraphs, links, buttons, forms, images and landmarks.
CSS
Layout and presentation: spacing, color, typography, responsive rules and visual states.
JavaScript
Behavior and application logic: updates, validation support, data requests and interactive state.
Semantics are built-in meaning
A real button communicates button behavior to browsers and assistive technology. A generic container styled to look like a button needs extra code and is easier to get wrong.
Choose elements for meaning, then style them. Visual appearance alone does not create semantics.
The browser creates working models
01
Parse HTML into document tree
02
Load/apply CSS rules
03
Fetch images/fonts/media
04
Run allowed JavaScript
05
Update document/state
06
Layout and paint
07
Respond to input
Progressive enhancement protects the core
Begin with meaningful content and basic actions, then add presentation and richer behavior. Some applications genuinely depend on JavaScript, but loading and error states should still be designed.
Avoid hiding essential facts or links behind fragile effects when a simpler resilient version can exist.
Assets have costs
Images sized/formatted
Fonts limited and resilient
Scripts loaded only where needed
Third parties justified
CSS organized
Dependencies maintained
Errors handled
No secrets in browser code
Licenses recorded
Source and runtime are different
Developers may write components, templates or preprocessed files that tools build into browser-ready HTML, CSS and JavaScript. The browser receives the deployed result, not necessarily the original project structure.
View Source, rendered DOM and network responses can show different parts of the implementation.
Real-world example
Example: a menu built in layers
Example
HTML provides a navigation landmark, list and links. CSS lays it out for desktop and mobile. JavaScript opens the mobile panel and manages state, while the links remain real and keyboard-operable.
Try this
Identify the three layers
On one page, choose a heading, a responsive layout change and an interactive disclosure. Explain which HTML meaning, CSS presentation and JavaScript behavior each uses.
Common questions
Questions beginners ask.
What is HTML?
The markup language used to describe the structure and meaning of web content.
What is CSS?
The style language used to control presentation and layout.
What is JavaScript?
A programming language used in browsers and elsewhere to implement behavior and logic.
Can CSS make a website interactive?
CSS can express visual states and some disclosure behavior, but application logic commonly needs HTML controls and JavaScript.
Does every page need JavaScript?
No. Use it when the required behavior needs it, and avoid unnecessary cost/fragility.
What is the DOM?
The browser’s object model of the document that scripts and accessibility systems can interact with.
What is semantic HTML?
Using elements that correctly describe the role and structure of content.
Can browser JavaScript safely contain secret API keys?
No. Code and network requests delivered to users can be inspected; secrets belong in protected server-side systems.
