You want to try making a website. But you keep hearing the word “HTML,” and honestly it doesn’t quite click yet… Don’t worry. Here we’ll set all the hard words aside and just get the very first picture of what HTML is. You don’t need to be able to write it yet.
HTML is like the “frame of a house”
When you build a house, you don’t pick out wallpaper and furniture right away, right? First you build the framework—“this is a room,” “this is the entrance.” A web page is the same. Deciding the structure—“this is a heading,” “this is the body text,” “this is an image”—is HTML’s job.
To put it another way, HTML is the work of writing down “what each thing is.” Picture looking at chunks of text and putting a name tag on each one, one by one: “this is a title,” “this is a description,” “this is a button.”
Actually, it’s something you see all the time
The page you’re reading now, news sites, shopping sites—almost all of them are made of HTML. It’s not some special, faraway thing; HTML is what sits “behind” the screens you look at every day. So once you learn it, the scenery around you looks a little different.
Let’s actually take a little look
For example, you write it like this. You don’t need to read it—“huh, so it’s like this” is enough.
<h1>Shima</h1>
<p>This is Shima's page—Shima loves drawing and ramen.</p>| Tag | Meaning |
|---|---|
<h1> | The marker for “this is a big heading” |
<p> | The marker for “this is ordinary text (a paragraph)” |
A tag starts with <h1> and ends with </h1>—this sandwich is the basic shape. The browser reads the HTML you write and draws it onto the screen we look at.
A little about what the name means
HTML stands for HyperText Markup Language—the initials of a long name. It’s a long name, but broken apart, each piece has a gentle meaning.
| Word | Meaning |
|---|---|
| HyperText | Text connected by links. Text unique to the web, where you can click to jump to another page |
| Markup | Putting marks on things. The work of adding markers—“this is a heading,” “this is a paragraph” |
| Language | A language |
So it’s “a language for putting marks on text connected by links.” That “putting a name tag on things” picture you’ve been reading about—the name says exactly that.
HTML is one of a three-person team
Besides HTML, there are two more words you’ll often hear when making web pages: CSS and JavaScript. The way the three split up the work is easiest to remember like this.
| Word | In charge of | In a house |
|---|---|---|
| HTML | The framework (structure) | Pillars and room layout |
| CSS | The look (colors, layout) | Wallpaper and interior |
| JavaScript | Movement (do ~ when clicked) | Switches and automatic doors |
Learning on this site follows this order too. First the framework (HTML), then the look (CSS), and finally movement (JavaScript). Since HTML is the foundation, that’s why we learn it first.
Let’s also know what HTML “doesn’t do”
You might wonder, why separate the framework from the look? The reason is simple: keeping them separate makes things easier later. You can change just the look, like changing clothes, while the content stays the same. This “division of roles” idea will keep helping you from here on.
CSSWhat is CSS?What is CSS, the one in charge of looks? If you’re curious, you can take a peek at the idea hereSummary of this lesson
There are just three things I want you to take home from this page.
- HTML is the language that builds the framework of a web page
- Tags are markers that say “this is a such-and-such”
- The look isn’t HTML’s job (that’s CSS)
With just this, you can already answer “what is HTML?” in your own words.