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 text that looks like a tag. This would be like writing your English paper in red ink yourself. Your teacher would not be happy. Tags have to be able to be identified in your document or they just won’t work. Some special characters are used for this.
A opening tag starts with the left angle bracket or if you prefer, the less-than sign. Then you put the name of the tag as a single word. You can put attributes next which I’ll describe in just a moment. Then you close the opening tag with the right angle bracket or if you prefer, the greater-than sign.
Angle brackets are used to define tags within your HTML document so that means you can’t use them as part of the text itself. There are ways to specify the angle brackets if you really do need them so they won’t be confused with the angle brackets that make up tags.
You can put tags around your text to give it meaning. For example, you can use the p tag around some text to represent an entire paragraph. This could be a single word or more likely a few sentences. The browser will see the opening p tag and know to place the text that comes next in its own area slightly away from other text so it looks like a separate paragraph. This goes on until the browser finds a closing p tag. That’s what I meant when I said the tags come in pairs.
A closing tag looks very much like an opening tag. It also starts with the left angle bracket. But then it has a forward slash character. Then the same tag name as the opening tag. There are no attributes in closing tags. And finally, the tag ends with the right angle bracket.
It can get a bit redundant writing HTML tags because it seems like you have to repeat information with the tag name in the opening tag as well as in the closing tag. But that’s how the browser will match the opening and closing tags.
You might ask, why not just look for any closing tag? Why does the same tag name need to be repeated in the opening and closing tags? Because tags can be nested. This means you can have tags within tags. I don’t mean that you have an actual tag inside the angle brackets of another tag. Let’s say that you have that opening p tag to start a paragraph. Then you have some text that is the paragraph. Within the text though, you want to add a hyperlink. Well, that hyperlink will need its own opening and ending tag. After the hyperlink is fully defined, you get to the end of the paragraph and that’s where you put the closing p tag to end the paragraph.
When you nest tags like this, they have to be fully nested. What I mean is that you can have a starting p tag followed by a starting hyperlink tag. But you have to close the hyperlink with its ending hyperlink tag before you can close the paragraph with its ending paragraph tag. You can’t close the paragraph first and leave just an opening hyperlink tag inside.
There are some exceptions. But the exceptions make sense and don’t violate what I just said. Some tags don’t need to surround other text. So they don’t need opening and closing tags and just need a single opening tag. For example, there’s a tag called br that just inserts a line break in your document when the browser displays it. This is such a simple tag that it has a left angle bracket followed by the letters br, followed by a space, then a forward slash and a right angle bracket.
Some tags are more complicated but still don’t need to surround other text. Like an image tag. It’s used to add an image to your displayed HTML file. There is no image directly in the HTML document. Just a tag with all the information that the browser will need when it displays the web page.
You provide this extra information through attributes. I mentioned that attributes can be placed in the opening tag but didn’t describe them yet. Attributes consist of a name followed by an equals sign and then a value inside either double or single quotes. Some attribute values might not actually need the quotes but that can cause problems so I recommend that you always use quotes.
You can use as many attributes as you want that belong to the tag or can be used with the tag. Just put spaces between the tag name and the first attribute and then put spaces between any additional attributes.
For example, the hyperlink tag needs to know the address of another HTML document. By the way, this tag name is not hyperlink or even link but is just the letter a. It stands for anchor. The address that the anchor tag needs is extra information and you provide it through an attribute called href. If you forget the href attribute, then the hyperlink won’t know where to go when a user click on the link. The text that the user can click on is the content that the a tag surrounds.
The whole hyperlink then looks like this:
• A left angle bracket with the tag name a followed by a space and then the attribute named href with an equal sign then URL of another HTML document enclosed in double quotation marks. The opening tag is closed with a right angle bracket. Then we have the text that the browser will display usually in blue with an underline as the clickable link. All of that is followed by the closing tag which is another left angle bracket, a forward slash, the tag name a and a final right angle bracket.
One thing to notice is that closing tags that match a previous opening tag are written with a left angle bracket, the forward slash character, the tag name, and the right angle bracket. In other words, the forward slash comes before the tag name in the closing tag.
But in single tags that don’t need a separate closing tag, then they still need a forward slash character but it comes at the end. As in the line break tag which is a left angle bracket, the letters br, a space, then a forward slash followed by a right angle bracket.
I hope this episode was understandable with all the left this, right that, quote this, surrounding that, etc. I tried to keep it simple. My general approach is to avoid reading code over the podcast because it’s just too tedious to describe things like this with only audio. A video or a live class is much easier. You can register for live classes at takeupcode.com.
We didn’t get into other tags that make up an HTML file. I’ll save that for the next episode where you can learn about tags and their meanings now that you understand how a tag is constructed and how it marks up your document by surrounding other text with opening and closing tags. And I’ll also describe that doctype line at the beginning of an HTML file.