Eli5:What does “Markup” in HTML mean?


Hi there,

Marking something up in a book would mean underlining or highlighting a text. In that sense I am finding it difficult to grasp the reasoning behind the name HTML(Markup).

As a side note, I am puzzled that, isn’t CSS the language that actually marks up the texts and other items in a webpage? Then why would HTML, the language of tags, be called a markup language.

I appreciate your time for reading this, feel free to point me towards resources where more information about this reasoning can be found.

have a good time!

In: 2

A markup language is closely resembling how you would use a markup pen. You are marking certain sections of text to annotate them. Often with multiple colors and commonly with notes in the margins. The HTML tags is these markings. And if you imagine an old style print shop, before computer printing and digital text editing, you would type out some text and mark it with a markup pen. Then you would send it to the print shop along with a style sheet telling the printers what the markings mean. And they would render it out and print it for you.

HTML is keeping the exact same process, just using computers. The way HTML was supposed to work was that you write a text file, annotate it with the HTML tags. You then send this to the browser along with the CSS which tells the browser what the HTML tags mean. And the browser will render it out and display it to the user.

You can think of an HTML page to be, in some ways, a raw text file, but with some spice added.

You could, for example, have a perfectly valid HTML page that looks like:

Hello, world!
This is a really cool web page.

And it would show up more or less like that (minus the line break, because… reasons).

But what if you wanted that first line to be more like a section title header? And you wanted that second line to be more like a paragraph of text?

HTML defines tags that you can put around the text that let you make those distinctions. You have `<h1>` through `<h4>` tags for section headers, and `<p>` tags to denote paragraphs. So you can instead write your file like:

<h1>Hello, world!</h1>
<p>This is a really cool web page.</p>

The tags you wrapped around the text will tell something designed to read HTML pages (typically a web browser) what the text is supposed to be “”for””. At the end of the day, it’s still just a bundle of text. The content itself hasn’t changed. But with these tags, you’ve *marked* what each piece of information is *for*. What its intended *purpose* is. That’s the “markup” in “markup language”.

CSS isn’t really a markup language because nothing in CSS really tells you what any part of the document is *for*. Its purpose is to tell you how certain parts of the document should *look*. It’s about *style*, not *purpose*. That’s why CSS stands for Cascading *Style* Sheets. Its intended function is decoration, not marking.

This distinction goes out the window somewhat with today’s actual use of web design, where web pages are oceans of nested `<div>` tags that don’t really mean much of anything, CSS makes the page look radically different from how the page is structured, and JavaScript dynamically loads and modifies the document on-the-fly. But all of these things were named back in a simpler era where a lot of that wasn’t the norm. And you can still build websites the “old way”, as they were originally intended to be made back in that era, if you want.

HTML marks up (describes) what any given element on a page is. Is it a paragraph, an article, a section, a quote, an address etc. Makes it easier for search engines and the like to read a page and ascribe meaning to it.

It isn’t really meant to describe what something looks like – just what it is. CSS is attached separately and that describes what elements in a page actually look like. You can have different stylesheets for different devices (back in my day we had aural stylesheets, and used CSS to describe how a web page would sound when read out by a screen reader)

Then you also have Javascript which is meant to add behaviour.

There’s some overlap, and it is often commonly misused – a lot of HTML used to describe the appearance of a page with tags such as font and center, which have been deprecated, though some tags do still have purely presentational purposes.

Html is just like using a text editor like Microsoft Word to make text different fonts and sizes, and also include images.

Except you have to type the commands instead of selecting text and using a button to edit it.

Kinda like how you can edit text on reddit so that *this* becomes *this* or [this](https://www.reddit.com/) becomes [this](https://www.reddit.com/)

Html is slightly more in depth. But overall that’s the general idea. You’re marking up text.