The basics of web pages: HTML, CSS, and JavaScript#
Every URL that you load in your browser is made up of 3 things: HTML, CSS, and JavaScript.
HTML is all about order, shapes, and text – the structural elements of the webpage. HTML can’t pick what color your button is (you need CSS for this), or tell it to slowly fade out when someone hovers over it (you need CSS or JS for this). It’s like the architectural blueprint for the web page. It’s the starting point: you figure out how you want your page to be structured, then you worry about how it looks and how users interact with it.
The way I like to think about the relationship between HTML, CSS, and JavaScript is sort of like building a house, for those fabricators among us.
- The HTML is the structural elements of the house. The foundation, the floors, the walls. All the stuff that gets built first.
- The CSS is the aesthetic elements of the house. The paint on the wall, the moldings, the type of siding and roof shingles. All the stuff that goes on top of the structural elements.
- The JavaScript is the interactive elements of the house. The doors that open, the plumbing, the electrical, the window shades that go up and down. All the stuff that you use.
Let’s take a look at some HTML in practice, which should make everything a little more concrete (😏).
HTML 101#
Imagine the most basic possible web page:
Not much imagination required. Here’s the HTML that builds this thing:
<html>
<title>A basic webpage</title>
<h1>This is a webpage.</h1>
<p>Not much more to say about it</p>
</html>
This stuff is, in some sense, very human readable. You can see that there’s a title (this is what shows up in your browser tab). There’s an <h1> which means heading. That’s the big text. And there’s a <p> which means paragraph. That’s the small text. All of this is contained within the <html> section.
All of these elements you’re seeing – everything between the <> – __are __called tags. You can see that each tag has a start and an end – kind of like quotes. Tags are also nested, which means that every tag (aside for the first one) is inside of another tag. For developers, the nuances of that nesting (what’s inside what) determines how the web page ends up looking and what order things appear in.
Tags also have data that you can attach to them. If you wanted to add a hyperlink to our webpage text, here’s what you’d do:
<p>Check out the <a href="https://technically.dev/">Technically website</a></p>
When you want to add a link to something in HTML, you use the <a> tag. That href= is data you’re attaching to the tag; in this case, a URL. If you so desire, you can make that link open up in a new browser tab by adding:
target="_blank"
HTML has 140+ of these built in tags that mean something specific to your browser. Some are basic, like paragraphs and links. Others are wacky, like <aside>, <ruby>, or <portal>.
No web pages you’ll actually use are this simple, of course. HTML can get incredibly complex, long, and obscure. Here’s a snapshot of the HTML that actually makes up the real WSJ homepage:
And this is just the top level; there’s way more under the hood.
