What's In A Web Page?
Web pages need to have some content in them. Optionally, they need to be styled, although that's not so optional these days. Even more optionally (and also not very optional these days) is that they should be able to modify themselves without having to reload the page.
This is all static content. Since this is to do with files that are processed by the browser, it is called "frontend development".
Let's take a look at the components that enable this.
HTML: Hyper Text Markup Language
HTML is a markup language - a kind of computer language used to format text and make it look good. The formatting is specified using text. A simple markup language is in instant messaging apps like WhatsApp and Discord, where you use asterisks and underscores to make text italics or bold.
HTML is more complicated than that, with more formatting options like:
- Telling the browser what icon to use
- Telling the browser what to name the tab
- Inserting links and images
- Forms where user input can be sent to a server
HTML documents are arranged hierarchically. This may not be the most logical way to arrange it, given that other markup languages like Markdown do not require hierarchy, but it might've seemed sensible at the time HTML was being codified. And with CSS and JS, the hierarchical nature is a massive plus.
CSS: Cascading Style Sheets
CSS tells a web page how it should look. Specifically, it can tell each section defined in the HTML how it should look. Text colour, background colour, font, margins, and even positioning of the section is dictated by CSS. If two sections of the HTML document have the same hierarchy within them, CSS will format them similarly. Clever use of the CSS can result in some pretty (as in "rather") pretty (as in "beautiful") webpages that respond to scrolling and mouse movements in an unexpected way.
JS: JavaScript
Some of you have heard of the programming language Java. JavaScript is completely unrelated. The technical name is ECMAScript but no one calls it that. JavaScript is also famously inconsistent. Ask any JavaScript developer what they think of it and they will have no shortage of abuses to hurl at the language.
And yet, it is the most popular language to write webpages in. And in some cases, even server software!
Okay enough ranting, on to what JS actually does. It is a programming language and does everything you expect a programming language to do. Math, string manipulation, library imports, the full Turing Complete gamut. What is special about it is that it has access to HTML and CSS components, and can overwrite them.
What this means is that JavaScript can be used to update webpages without refreshing them. Content and style can be changed on the fly by the browser, without needing any extra information from the server.
Okay, that's a bit of a stretch, but I will explain.
How These Pieces Fit Together In A Standard Web Page
The initial HTML file that the browser receives contains just a skeleton for what the web page is supposed to look like, along with a bunch of JavaScript code tasked with filling in the information. Often, even the template itself has to be loaded in first by the JavaScript. Stylesheets may or may not be included.
The JavaScript code then requests the server for whatever information the page is meant to have, and fills in the information as it is received.
Later, the user takes an action. Instead of reloading the whole page, the code simply updates the relevant portion of the page. This reduces loading times and server workload by allowing it to only send the minimal data required to get the new page, and allowing the browser to do the job of updating the page.