|
|
How HTML, CSS and JavaScript work together in web pages
Technologies used to create modern web pages (HTML, CSS and JavaScript)
each do
different jobs.
HTML should be used only for structuring content.
Cascading Style Sheets should be used for applying all visual styles.
JavaScript should be used for (almost) all interactive functionality, and should
always be referenced in separate files, never written into HTML.
How HTML, CSS and JS work
The web page you see in your browser may be a combination of structure, style
and interactivity. These jobs are undertaken by 3 different technologies, which
your browser knows how to interpret.
HTML
marks the content up into different structural types, like paragraphs, blocks,
lists, images, tables, forms, comments etc.
CSS
tells the browser how each type of element should be displayed, which may vary
for different media (like screen, print or handheld device)
JavaScript
tells the browser how to change the web page in response to events that happen
(like clicking on something, or changing the value in a form input)
The 2 most important things to learn about web page production are:
Use the correct HTML tags that mean what they say.
Keep your HTML, CSS and JavaScript code separate.
1. Use HTML properly
Different HTML tags describe the structure of content. Each one has its own
meaning, and you should only ever use each one in accordance with its meaning,
and in its proper place.
When people talk about "semantic" HTML, this is what they mean.
In the HTML section, I'll explain what each tag means, and where it's OK to use
it.
2. Keep 'em separate
This simply means: Don't put JavaScript or CSS in your HTML. Put them in
separate files, called in by your HTML pages.
There are lots of good reasons for this, the main ones being:
It's more logical and simpler. And simple is good.
Easier management: Keeping all your styles and functional code in one place
makes it quicker, easier and safer to change in future.
Easier re-purposing: It's easier to design your web site to look or work
differently on different user agents (e.g. handheld browsers, audio browsers,
or TV)
|