HTML, CSS, WEBSITE DEVELOPMENT AND DESIGN (2015)

Chapter 3: HTML comments and special/escape characters

As you build your web page your HTML document will start to get pretty long. A good way to keep track of things is by adding comments. Comments that you add are only visible to you in your text editor. They will not display on your page and are just their to organize or remind yourself to do something, etc. They can also be used to debug problems in your code. If you have a section of code that you think may be causing an issue, You can add comment code around it so that the browser will ignore whatever code is inside. To add a Comment to your code you would enter it like this:

These symbols,  tell the browser that what's inside is a comment and should not be displayed. You add your comment in between the hyphens/dashes. If you put this comment somewhere inside of the body element and are using notepad++ you can see that it changed color recognizing that this is a comment. This is one of those reasons why I like to use notepad++ or TextWrangler. And I'm sure you've noticed how it highlighted the other tags, etc. with different colors depending on what type of content they were. Regular notepad is just black and white. And that's what makes it harder to read and find things even for experienced coders. When you get more experienced you can play around with the settings in your text editor to use different colors and fonts. Among many other things.

And if you save and run in the browser you can see that it won't display this text. You can add as many comments as you want. If you ever work on a project with someone else you can also use this to tell them about changes you've made or something that you want them to do. To make the browser ignore a portion of your code, All that you would need to do is add the beginning comment code  right after the end of the portion. Everything inside is now considered a comment and will not be displayed on your page. It will also change color telling you that it recognizes that this is a comment. You can make the browser ignore one or multiple things at once. This is a good tool for finding problem code.

Special/Escape Characters

There may be times where you need to add some extra spaces for things like positioning an image with text around it the way you want. Or there might be some special characters that you need to include but you don't want the browser to read the characters as HTML code. So I have a list below of how to put some of these character's on your page without any problems. These codes may look complicated but they are really the only thing in HTML that isn't plain English. And you can always do an internet search for an HTML code if you ever forgot one. I still search for certain things because it's impossible to memorize everything. You can just search for something like "How to add multiple spaces in HTML?" or do a search for them all and just print them out or save them to your computer. It's up to you. The codes I added below are the most commonly used.

® You use this code to add a space whether it's between a word or to create some space in between an image and nearby text. To add multiple spaces, Simply add the code multiple times. For example to get three spaces in this line of text you would write it like this: This line has three spaces in it.. You should also notice when you enter one of these codes in your text editor correctly that the code will italicize.

®& To add an (&) ampersand symbol. Tim & Mike went fishing.. The result would be. Tim & Mike went fishing.

®< To add a < less than sign. 14 is < 20.. The result would be. 14 is < 20.

®> To add a > greater than sign. 20 is > 14.. The result would be. 20 is > 14.

®? To add a ?. This is because the question mark can be confused with some programming language codes. In most cases you could just type the ? and it would display properly. But if you want to make sure the browser doesn't get confused you can use this code in place of the question mark.