HTML is the markup language that we use to structure and give meaning to our web content, for example defining paragraphs, headings, and data tables, or embedding images and videos in the page.
CSS is a language of style rules that we use to apply styling to our HTML content, for example setting background colors and fonts, and laying out our content in multiple columns.
The three layers build on top of one another nicely. Let’s take a simple text label as an example.
Then we can add some CSS into the mix to get it looking nice:
So what can it really do?
- Store useful values inside variables. In the above example for instance, we ask for a new name to be entered the store that name in a variable called name.
- Operations on pieces of text (known as “strings” in programming). In the above example we take the string “Player 1: ” and join it to the name variable to create the complete text label, e.g. ”Player 1: name”.
- Running code in response to certain events occurring on a web page. We used a click event in our example above to detect when the button is clicked and then run the code that updates the text label, and much more!
Here we are selecting a heading (line 1), then attaching an event listener to it (line 3) so that when the heading is clicked, the myFunction() code block (lines 5–8) is run. The myFunction() code block (these types of reusable code blocks are called “functions”) asks the user for a new name, and then inserts that name into the paragraph to update the display.
If you swapped the order of the first two lines of code, it would no longer work, you’d get an error returned in the browser developer console, and the TypeError: element is undefined. This means that the element object does not exist yet, so we can’t add an event listener to it. This is a very common error — you need to be careful that the objects referenced in your code exist before you try to do stuff to them.
Interpreted versus compiled code
You might hear the terms interpreted and compiled in the context of programming. In interpreted languages, the code is run from top to bottom and the result of running the code is immediately returned. You don’t have to transform the code into a different form before the browser runs it. The code is received in its programmer-friendly text form and processed directly from that.
Compiled languages on the other hand are transformed (compiled) into another form before they are run by the computer. For example, C/C++ are compiled into machine code that is then run by the computer. The program is executed from a binary format, which was generated from the original program source code.
Server-side versus client-side code
Dynamic versus static code
A web page with no dynamically updating content is referred to as static, it more like just shows the same content all the time.