Commenting Code

Quick reference

• 00:05 We've got one more sorta general thing to learn, and that is comments.
• 00:10 Comments are important, and it doesn't really matter what kind of programming
• 00:13 language you're using, you'll always wanna use comments.
• 00:16 And HTML is no different, even though HTML is not technically a programming language,
• 00:20 we still want to use comments.
• 00:21 So what exactly are comments?
• 00:23 Well, let's go ahead and come back here and
• 00:26 generate some, let's generate five paragraphs, some Lorem Ipsum text.
• 00:31 So we've got all this.
• 00:35 And let's go ahead and paste this all in here.
• 00:44 A comment is a way to put a little note to yourself that doesn't show up.
• 00:50 In fact, we don't need all of this.
• 00:52 I'll just delete some of this, it's starting to get unruly.
• 00:57 So in HTML, the way you create a comment is !, and then --.
• 01:03 Now, it's not the lowercase dash, it's the regular dash, right?
• 01:08 And then you type in your comment here, This is my comment.
• 01:13 And then you close it with a -- and then a closing tag.
• 01:18 So if we save this and head back to our website.
• 01:23 Let's wrap all these in <p> tags, what do you think?
• 01:34 Close that one, do that one, okay, so if we save this, come back here.
• 01:40 You see, there is no comment on this page.
• 01:43 But if we right-click and click View Page Source,
• 01:46 we see it right here in the page source, this is my comment.
• 01:48 So why would we ever wanna do this?
• 01:50 Well, we don't have a whole lot going on in our website just yet.
• 01:54 But for the most part,
• 01:55 whenever you create a web page, it has lots of different sections.
• 01:59 So let's head over, for instance, to c9.io.
• 02:02 You could see it has a nav bar, it has this sort of middle section,
• 02:07 it has this testimonial section.
• 02:09 And then it has this text down to the bottom, and some links down here.
• 02:12 These are all different sections of your HTML.
• 02:16 And as you create more and more in your file in your web page,
• 02:19 it becomes harder and harder to keep track of everything.
• 02:24 The more stuff we type, everything starts to run together, and it can become unruly.
• 02:29 Well, that's why you want comments.
• 02:30 So for this comment I might put Main Text, right?
• 02:35 And if I had a nav bar.
• 02:38 So Link, I'll just create a fake one here, Link | Link.
• 02:46 I'll do it like this, just copy, paste, paste, paste, paste, paste, paste, paste.
• 02:51 So pretend this is our nav bar with a bunch of different links.
• 02:54 I might put a comment for navbar.
• 03:02 So in the future, if I wanted to come back here and add more text.
• 03:08 And I need to put it in the main text section of my site,
• 03:12 I would scroll down here and find the comment, this is my main text section.
• 03:17 I would tab over, paste it in, copy saved.
• 03:22 Boom, now we have extra text.
• 03:23 If I wanted to add a new link, I would look around for
• 03:26 my Navbar comment, this is my navbar.
• 03:32 NEW LINK!
• 03:33 Save it, bop it in there.
• 03:36 So it's just a way to keep track of things to make your code more readable.
• 03:42 In the future you may not be working on this, you might hire somebody, or
• 03:45 they might hire somebody else.
• 03:47 And that person's gotta come in here, he may not be, or she may not be,
• 03:50 familiar with your code.
• 03:51 They can take a glance at this and go, this is where the main texts go.
• 03:55 This is where the navbar goes.
• 03:56 So it's just a good way to construct your HTML file.
• 04:00 And like I said, no matter what programming language you're using, Python,
• 04:03 Ruby, PHP, JavaScript, you're always gonna want to use comments.
• 04:06 Every programming language does comments differently.
• 04:09 HTML does them this way, so that's pretty cool.
• 04:11 So in the next video I wanna talk about links.

Lesson notes are only available for subscribers.