196: HTML: How Does Markup Work?

How does HTML markup enable you to create web pages? You’ll understand how HTML works after listening to this episode but styling and scripting will be explained in other episodes. Let’s start at the beginning. HTML stands for the Hypertext Markup Language and is just a text document that your browser knows how to display. You could write a program yourself that displays HTML if you want to. The point though is that the HTML document itself looks nothing like a web page. It’s just a text document with markup. Markup itself is just a way to add extra information into a document that describes the content or provides extra meaning. It’s a way for you to provide extra information to the browser, and it looks for tags. Listen to the full episode to learn how tags work, how they can be nested, how they can have additional information called attributes, and some examples. You can also read the full transcript below. Transcript You’ll understand how HTML works after listening to this episode but styling and scripting will be explained in other episodes. Let’s start at the beginning. HTML stands for the Hypertext Markup Language and is just a text document that your browser knows how to display. You could write a program yourself that displays HTML if you want to. The point though is that the HTML document itself looks nothing like a web page. It’s just a text document with markup. There are no colors, headings in larger fonts, images, or clickable hyperlinks leading to other files. It’s just a text file that usually ends with a dot html extension. Some older files might end with a dot htm extension. Don’t get me wrong, you can’t just rename any text file so it ends with the correct extension and call it an HTML file. The content must be written to follow some rules. Just like programming languages have a syntax that must be followed, HTML is the same. This is because the browser needs to be able to understand the contents. Syntax is just the rules that define what is valid text so that an application like a web browser can read the text without any misunderstanding. If you use some other application as a tool to create HTML documents, then you may not need to worry about this structure. It’s not hard to learn and knowing how to write HTML files by hand gives you a deeper understanding of what it means to create web pages. HTML has roots in another markup specification called SGML which stands for the Standard Generalized Markup Language. HTML is really just an implementation of SGML. The first line in an HTML file is a bit different and is there to let the browser know that this really is an HTML file. It looks a bit different because it was designed to follow the rules of SGML. The first line in an HTML file is called the document type declaration. I’ll come back to this line later. For now though, I’ve mentioned markup languages, but what does this mean? This is the way HTML actually works. Markup itself is just a way to add extra information into a document that describes the content or provides extra meaning. When we were in school, some teachers would ask for our written reports to be formatted so that blank lines would be placed between each written line. This gave room for the teacher to write comments or instructions. Usually in red ink. This is markup. The teacher would let you know about spelling mistakes, fragmented sentences, confusing text, etc. The markup was rarely something good. A lot of markup meant a bad grade. HTML markup is not for bad things. It’s a way for you to provide extra information to the browser. Because the browser doesn’t know how to scan for red ink. It looks for markup in another way. It looks for tags. Tags usually come in pairs with a starting tag and an ending tag that you put around the text you want to markup. Tags are designed to stand out in your document which means that you can’t have regular te