Subscriber only lesson.

Sign up to this course to view this lesson.

View pricing

About this lesson

How to comment code, where to do it, and why you should do it often.

Exercise files

Download this lesson’s related exercise files.

Commenting Code.docx
199.6 KB Commenting Code - Solution.docx
199.8 KB

Quick reference

Commenting Code

Comments help us break up our code and make it more manageable and readable.

When to use

Any time you have a section of code, it's a good idea to create a short comment describing the section.

Instructions

HTML comments take this form: <!-- comment -->

Use them whenever you want to break up different sections of your code. Comments make your code more readable and are especially useful if you're working with a team of web developers - comments make your code more readable to the entire team as well as yourself.

Hints & tips

  • Comments look like this:  <!-- comment -->
  • Use comments often!
Login to download
  • 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.

Gift this course