• Home  / 
  • HTML and CSS
  •  /  How HTML, CSS and JavaScript work together in web pages

The three main technologies used to create web pages (HTML, CSS and JavaScript) each do different special 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 together

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, HTML, Javascript, and CSS which your browser knows how to interpret.

A web page may combine structure from HTML, style from CSS and functionality from JavaScript
marks the content up into different structural types, like paragraphs, blocks, lists, images, tables, forms, comments etc.
tells the browser how each type of element should be displayed, which may vary for different media (like screen, print or handheld device)
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:

  1. Use the correct HTML tags that mean what they say.
  2. 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)
About the author

Ben Hunt

Ben has over 20 years' experience in web design and marketing, and is one of the most influential figures on the subject of effective web design. He has written a bunch of books and spoken at multiple conferences internationally.In 2015, Ben created Open-Source Marketing, which promises to turn the practice of marketing upside down.. Find out more at http://opensourcemarketingproject.org

Iā™„code - 3 years ago

As always, there are exceptions. For instance, if you use a styleswitcher, it may be helpful to leave some CSS in your HTML file. Otherwise, you end up repeating the same lines of CSS over and over in each external CSS file.

Now if only Safari5.1 still supported the ‘old’ Javascript styleswitcher, so I don’t have to spend so much time trying to make jQuery work.

rahul - 3 years ago


Jincheng - 3 years ago

The links to Html, css and javascript in the first paragraph are invalid.

    Ben Hunt - 3 years ago

    Thanks, fixed!

Arun - a couple of years ago

thanks for the info. It’s very very valuable for me. Because, i’m new in web design.

thanks again.

Dave - a couple of years ago

Thanks for this. As someone just checking web page design as a possible educational path, this was very informational. Thank you.

varun - a couple of years ago

is javascript is a part of html and css

    Ben Hunt - a couple of years ago

    No, the three are quite separate, unrelated, but they work together.

    HTML gives the structure and content. CSS adds style. JavaScript is a scripting language that can interact with the HTML structure.

Comments are closed