Join James Williamson for an in-depth discussion in this video Writing comments, part of HTML5: Structure, Syntax, and Semantics.
- By design, HTML has a small set of elements. This makes HTML easy to implement and it ensures backwards compatiblity with earlier versions. The downside of this is that it limits the semantic, meaning that we can impart with the default set of elements. In this chapter, we're gonna take a look at some of the techniques that can help us extend the meaning of our content. We're gonna start by exploring how incredibly useful HTML comments can be. So to do that, I'm gonna open up the blog.htm file, found in the 04_01 directory.
Now, if you've been authoring HTML for a while, you're probably familiar with comments. But for those of you that aren't, they're an extremely helpful way of passing along information to other authors or people reading your code that you don't want rendered within the browser itself. We're actually already using one on this page. You'll notice in the very top of the head of the document, we have a script here for HTML5 shim, but we only wanted that to affect browsers that were Internet Explorer prior to version 9.
And that's why we're using what's known as a conditional comment, which is the "if lt IE 9." however this part of it, the opening part, which is !-- and the closing part which is --> That's just a normal HTML comment and it allows us to pass along any information that we want without that information being parsed and rendered by the browser. So let's say we wanted to pass along to people reading this page, what this conditional comment is doing.
I might wanna help other authors out. Maybe they're gonna look at this and say, "I have "no idea what that code is doing." So I could create a new line, just above that. And then I could type in a left angle-bracket, !-- so that is the opening of my comment. And I'd want to add a little bit of descriptive text here, so I'm just gonna say, "Adds HTML... "5 element support for earlier versions of IE" Now, when I'm doin' a comment, it's really important that I remember to close it, because if I forget to close it, in a lot of cases, browsers will just ignore everything that comes after it because they think it's all part of an open comment.
So I'm gonna do -- and then a > and that's gonna make sure to close my comment. So essentially what I'm doing here is I'm passing along a little bit of additional information. I'm letting people know that, "Hey, below this "I'm adding HTML5 element support for earlier "versions of IE" A lot of times you'll do this just as a way of being nice to people who might be reading your code Sometimes it's a nice way to be nice to future versions of yourself. Maybe you're gonna open up this document later on and you might wanna give yourself a gentle reminder of why you were doing something within your code.
Comments are definitely helpful for that. They're also helpful in team environments. Maybe you've got multiple people working on a site. One person's job, for example, is to come in and add certain types of content, like maybe advertising content. In that case, you might create a comment to let 'em know where that content was supposed to go. So, if I scroll down in my blog page, all the way down towards the bottom, I can see that there's a little aside down here on line 126 that has an ID of "adCopy." So that's where the ad is supposed to go.
Now most people would read the ID and know this, but maybe you're gonna tell your dev team, "Hey, look for this comment, use a find and replace "or something like that to insert the ad content." So, again, I'm gonna add another comment here. So you remember the < !-- And then inside of that, I'm gonna type in, "Ad content goes here" Now did you notice how brackets went ahead and grayed everything out? Most code editors, or most IDEs, are gonna represent comments as gray text just to let you know that it's not gonna be parsed, it's not gonna be rendered by a browser.
You'll notice that if I leave this comment open, browsers would ignore everything from here down, so that's really a big deal. So I'm gonna have to remember to do --> to close that again. And you can see my code editor helps me by letting me know that that's coming back. Now if I save this, and let's say I preview this in my browser, now if I scroll down to where the ad content is supposed to be, I don't see anything. And that is simply because comments are not rendered or parsed by browsers at all. They're totally ignored.
So you can use them to do things like I'm doing here, which is pass messages along to development teams, you can add additional information for what's going on within a particular function or widget, and you can do that for yourself or maybe other people that are coming to your site. Now even though they're not rendered by the browser do keep in mind that it adds to the weight of your code. So most people have a strategy for when comments are appropriate. And a lot of people, when they're publishing their sites will strip their comments out through the use of a script of some type or another.
Now chances are, if you've been writing HTML for any time at all, you've probably been making use of comments, however I wanted to make sure that I included them in the discussion of how you could communicate more detail about your content to fellow team members or even to your future self.
- What are web semantics?
- Understanding HTML5 content models
- Supporting older browsers
- Structuring and defining HTML5 documents
- Using headings
- Building navigation
- Nesting and grouping content
- Working with HTML5 lists
- Defining link relationships
- Writing comments
- Working with meta tags
- Using microdata