Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Tags form the basis of most HTML, so let's take a moment and see how they work. Let's make a working copy of structure.html from Chapter 01 folder in our exercise files. I am going to name that structure-working.html, and I am going to open it in my text editor. I am using TextWrangler here on this Mac. You can use any text editor that you like or any platform that you like as long as this is not a word processor or an HTML editor. You want to make sure it's a text editor that doesn't add anything, any weird formatting characters or something to the document.
So this is a simple HTML document and you will notice that it has a number of tags in it. The DOCTYPE at the top looks like a tag and is actually not a tag. That's just the DOCTYPE declaration as its own syntax, its own format and its own rules, and that's not what we're talking about here in this movie. So for example, let's take a look at this title tag here. So the tag itself consists of the left angle bracket and the name of the tag, which is the word title, and a right angle bracket, and that creates the tag that's called title.
You will notice that there is another tag here that looks just the same except that it has this extra little slash character there between the left angle bracket and the name of the tag, and that's called an end tag, and so the title element is everything from the beginning of the title begin tag to the end of the title end tag, and everything in between including the contents of the element. So the element itself is that whole thing. So the title element is what we call a container because it has a begin tag and an end tag and it has contents.
In contrast, this meta tag up above is not a container. It's what's called a standalone tag and so you see it starts with the left angle bracket and it has the name of the tag, and then it has some attributes and values and we'll get into that later. And then instead of an end tag, it has this shortcut over here. We are going to talk about that a little bit. The other way to do this would be like this, with a begin tag and an end tag and nothing in between. So that makes it an empty tag, and that's fine.
You can certainly do it that way, but borrowed from XML and from SGML, is this shortcut with a slash and a right angle bracket and that means this is an empty tag and let's just pretend that it has an end tag and no content. Now technically in HTML, that's not even required. You could just do this. Just have the meta tag like that, without any end tag and without any shortcut, and that's perfectly acceptable. It's perfectly legal and it works just fine in HTML.
I tend to go the extra mile and use the shortcut because occasionally what HTML I write, may end up in the context of XHTML, which is an XML version of HTML, and it's almost exactly the same as HTML, only it's stricter about some things. And so I tend to do those some things that it's stricter about even in my HTML, just to make it less trouble if and when I ever have to use this same code in an XHTML context.
It doesn't cost me anything to type the extra characters. It doesn't cost me anything to remember a few extra rules, and so I just do it and it makes it easier for me in the long run. The HTML standard has a word for this. It's called Polyglot code. It's code that will work in either context, in either the HTML context or the XHTML context. Now the other thing we'll notice about this meta tag is that it has what's called an attribute. The attribute in this case is charset, C-H-A-R-S-E-T, and the value is UTF-8, and you notice it has an equals sign here, so the name of the attribute is followed by an equals sign and the value, and you notice that I have the value in quotes.
So tags have attributes to provide necessary information for implementing the tag whatever that tag may be. In this case, this meta tag is here to describe the character set of the document and the character set of the document is UTF-8, and so we have the name of the tag meta, the name of the attribute charset and the value for that attribute which is UTF-8. You'll notice that I have quotes around the string UTF-8. The quotes are technically optional in HTML.
I could do it like this and it would be perfectly legal HTML and it would work, and the browser would recognize it, and everything would be hunky-dory. But I tend to use the quotes and again this is one of these Polyglot things. It makes it legal in the XHTML context. In XHTML, the quotes are not optional. They are required. The only other rule about the quotes is that if you use the quotes, your beginning quote and your ending quote have to be the same. I can't use a double quote to begin with and a single quote to end with.
That won't work. Instead, if I am using a double quote at the beginning, I have to use double quote at the end, or as in the case of this language attribute up here, if I am using a single code at the beginning, I have to use a single quote at the end. So just like with the shortcut end tag, I pretend that these quotes are a rule. I always try to remember to put them in and sometimes I actually do forget, but I always try to remember to put them in because it's going to make my job easier in other contexts.
So again I am using the Polyglot rules, which is HTML, but with the more stricter rules that make it legal XHTML as well. Tags are the basis of HTML so it's important to understand how they are properly constructed. Using good form and creating your tags will go a long way toward making your HTML portable across devices, contexts, and even time as future versions of HTML are developed.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 97381 Viewers
61 Video lessons · 84625 Viewers
71 Video lessons · 68826 Viewers
56 Video lessons · 101292 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.