Hey, this is Sasha and thanks for joining me here for another training video. In today’s training video what I’d like to do is take a look at how you can comment within your HTML code. Sometimes the HTML code is a little more difficult than it becomes more difficult to read as it becomes more complicated.
Once it becomes more complicated, you may be lost as you’re starting to go back to your code six months or a year later down the road. That’s why it’s really nice to comment your code.
You don’t want to get too excessive about commenting but you also don’t want to be too lax to where you forget what the section or item is about.
In our example, what I want to do is share with you how you can properly comment in ‘use comment’ within your code, so that way, you can break apart your own code in the future.
Learning About Commenting Format
Now if you take a look at our website, it’s fairly basic. There is not a lot of information on here so you probably wouldn’t do too much commenting here. But let’s just say you wanted to mention saying that ‘this is the menu section’ — and this is what you wanted to write, to mark a note on it.
If you go ahead and save that and you take a look at your page, you’ll see it actually writes it right on the page. That is because it’s not in commenting format. It’s going to output exactly what’s within the code in the browser even if you don’t have the text right here. Even if you don’t have any tags associated
If you go ahead and save that and you take a look at your page, you’ll see it actually writes it right on the page. That is because it’s not in commenting format. It’s going to output exactly what’s within the code in the browser even if you don’t have the text right here. Even if you don’t have any tags associated
Even if you don’t have any tags associated with it because it’s outputting whatever is in that file.
Making a Comment
The way you make a comment is starting out similar to how you would be for it. It’s that angle bracket, you do an exclamation mark, two little hyphens and you can see now the code is grade out.
When it’s grade out, that basically means it’s a comment. Now it’s going to go ahead and comment everything until you close that comment. If I go ahead and just leave this as is and hit save, you’ll notice that it actually comments out just about everything beyond that. So you can see that’s not exactly what we wanted to do.
In fact what we wanted to do was just take a note right there that that is a menu section. So the way to close that is just like you’d have to close the H1 tags or the body tags. You have to close it in a certain way.
My Cooking Website Welcome to my cooking website
Here is the menu
Business Launch Pad is focused on showing you the critical concepts on how to build a profitable business from scratch. Even if you have a business you will learn how to accelerate it into hyperdrive. This book focused on the foundational concepts, setup structure, essentials of marketing, and time-saving productivity tips. Pick it up today by clicking one of the links below.
In our example, the way the way that you would close the comment is again, two hyphens and then another bracket to close that out. If I zoom into it, you can see the way that this comment is structured. It’s basically angle bracket, exclamation, two hyphens, and then you can put your comment in there, and then go ahead and close the comment. I go ahead and save that, and now I go ahead and preview that, and then go ahead and refresh, you can see here’s the menu. There is our content. If I go ahead and refresh the page, you can see it’s green on the view source part. And that’s our comment right there.
I go ahead and save that, and now I go ahead and preview that, and then go ahead and refresh, you can see here’s the menu. There is our content. If I go ahead and refresh the page, you can see it’s green on the view source part. And that’s our comment right there.
Adding Another Comment
You won’t see it on this website on the output but you do see it in the code on the page. That’s kind of what we want to do. You could go ahead and do the same thing like saying — let’s just say over here we wanted to add another comment, ‘this is a pot sticker menu’ right here.
If I close it out, you’ll see this won’t really work because there is no exclamation mark and you’ll see I’ll go ahead and hit save, just to show you what’s going on here.
If I go ahead to this area, you can see right here, how this is not green. Here’s our HTML that we see within the browser. It’s not green, because it’s missing in that exclamation mark. You’ll see it’s showing up right there.
I can go ahead and you’ll see it’s showing up right there.
My Cooking Website Welcome to my cooking website
Here is the menu
Business Launch Pad is focused on showing you the critical concepts on how to build a profitable business from scratch. Even if you have a business you will learn how to accelerate it into hyperdrive. This book focused on the foundational concepts, setup structure, essentials of marketing, and time-saving productivity tips. Pick it up today by clicking one of the links below.
The way that you would have to fix this is you add that exclamation mark, you’ll see it turns that highlighted or gray or light baby gray. We go back in here and not that comment is gone. If you go to refresh that page, you’ll see by adding that exclamation mark it’s right there and there’s your comment.
Getting Creative with Your Comments
Some people get really fancy with comments. It really just comes down to how you want to do it. They might add a few lines there- because remember, anything in between there doesn’t really count, I could go ahead and add stars like these and make it all fancy as long as I kind of have that level or structure initially, I should be okay for my comment.
As your code gets deeper you might want to get more creative with your comments and again this should work just as fine. So you can see there’s our comment right there in that way, I can go ahead and refresh it.
What other people may go ahead and do something like this, and you can see I go ahead and add a lot of dashes.
My Cooking Website Welcome to my cooking website
Here is the menu
Business Launch Pad is focused on showing you the critical concepts on how to build a profitable business from scratch. Even if you have a business you will learn how to accelerate it into hyperdrive. This book focused on the foundational concepts, setup structure, essentials of marketing, and time-saving productivity tips. Pick it up today by clicking one of the links below.
But in this case, this is not very friendly for Sublime text because it makes it a little bit red. And if I go ahead and hit refresh here, it’ll still kind of work. You’ll see it still works, but it’s not the ideal practice because again, now you’re adding multiple dashes, multiple hyphens in there.
The better approach would be to do something just slightly different which is what people do with the asterisk there and things of that nature.
Anyways, that’s how you comment your code.
Some final points…
That’s the base line behind it on how to make comments so that way you can mark and add some notes to your code. Obviously, this doesn’t show up within the page as far as when people are viewing it. It will show up if they view the source. If you want a private comment, it might be wise to use something like a PHP comment tag, but in general, this is a good starting point for just some basic comments that you can go ahead and use throughout your pages. That way, when you go back to things, it will be easier to reference and easier to find those sections and then you can make tweaks.
If you want a private comment, it might be wise to use something like a PHP comment tag, but in general, this is a good starting point for just some basic comments that you can go ahead and use throughout your pages. That way, when you go back to things, it will be easier to reference and easier to find those sections and then you can make tweaks.
That way, when you go back to things, it will be easier to reference and easier to find those sections and then you can make tweaks.
I might do this when I’m putting in a footer and when I’m putting in a header, a title. It could be a navigation area like this is the navigation structure.
This is the right side bar. This is the left side bar. This is the body. Those kinds of things you might do for some main things. That way you’ll know when things start and when things stop especially as you get into multiple nested elements or many tags.
That’s when things could get a little more confusing and more comments may play a major role in your code writing.
Thanks for Watching!
Thanks for joining me in this video. I hope you really enjoyed and found it helpful.
Go ahead hit play on the next video. You must continue working through this mini little course. When you’re ready, hit play and let’s continue learning.
If you want to sign up to my newsletter list, where I share exclusive video training content along with joining me on some of my live classes, or maybe even getting one of my free books, click that thumbnail right up here and we do, enter your name and email address and you’ll be added to the newsletter list.
Thanks again, and I hope to see you in the next lesson.
