Hi. I am doing the “Learn HTML” course and was wondering if anyone could explain what markup languages actually are/ what distinguishes them from programming languages (or are they a subset of programming languages?). The introduction to the course defines them as “a computer language that defines the structure and presentation of raw text”. But this seems incorrect as HTML also includes codes for adding and structuring non-text elements (e.g., images and videos).
Hi, there!
When it says, “defines the structure and presentation of raw text,” don’t see it as just text but the entirety of the text file. It defines the structure and formatting of the document and how it should be presented unless otherwise manipulated by a stylesheet or programming language. This is because markup does not use logic; it is static and not dynamic.
This is a rather simple explanation, but perhaps someone else can go more in-depth. But this is how I first understood the differences.
Does this make more sense?
As noted in this stack overflow post (https://stackoverflow.com/questions/24041/markdown-vs-markup-are-they-related), the term markup is derived from print editing where an editor would add marks to something written to indicate how that thing should be formatted when printed (e.g. whether a particular part should be bolded, italicized, etc.).
Thus, markup languages like HTML are similarly shorthand for indicating how a certain bit of code should be formatted and presented. We are the editors, and the browsers are the printers that interpret what we’ve marked and display as we indicated.
So if I want something to be the header for a page, I can indicate it using a <h1>Heading</h1> set of tags. Or if I wanted to display an image, I’d use an <img /> tag. The text, in this case, is the image’s source url/path. In other words, an HTML file is a text document with a file extension, .html, which signals the browser to interpret the text within using the HTML markup standard.
<header>
</header>
<h1>Headline</h1>
Please note the difference. Headlines are headings; headers are leading blocks.
1 Like
To supplement what’s been said…
This is how I think of it: markup languages like HTML, XML, CSS are presentational languages. They don’t require logic or an algorithm to work, unlike programming (the C family of languages or Java) or scripting languages (Python,
JavaScript or PHP, etc) that do. Markup languages prepare the data for how it’s presented on a page—the design or format of a page. They tell a web browser how to structure or layout a page.
1 Like
I guess I am a bit OCD about semantics, but I simply don’t feel like I understand concepts unless I can articulate precisely what they mean. I was wondering if CSS was also a “markup language” but read that it is a “style-sheet language”.
Your first examples about what markup is about
“Indicate how that thing should be formatted when printed (e.g. whether a particular part should be bolded, italicized, etc.).”
seems to be exactly the job of style-sheet languages. Your second example of structuring the text with e.g. < h1> tags seems to be what makes HTML a markup language. Might it be better to describe HTML as a hybrid markup/style-sheet language (whereas CSS is a pure style-sheet language)?
Imagine if we were at a printing press. I’m the editor, you’re the person in charge of printing. There’s a third-party, the writer, who has simply written an article for us to edit and present, but we don’t have to worry about him. First, I go through and mark-up the article. I say this thing here has to be a header, there should be a quote here, an image there, etc. Basically, I’m marking it up to tell you what to do with the simple article text provided by the writer. Your job, as the printer, is to interpret my markup and style it as you please. Your job is the how it should look. I’ve only told you, for example, that a certain piece of text should be a header, but I haven’t told you what the header should actually look like.
It is very similar with HTML and CSS. HTML tells the browser what it should do with the text provided. The CSS tells the browser how it should look. The information is combined, and we get modern web pages.
The only additional question to answer is why is text still displayed when no CSS is provided. This is because browsers have a default agent stylesheet, basically an in-built CSS file, that applies to everything if more specific styling is not provided.