Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Reza Sorasti
Reza Sorasti
491 Points

Why my comments shows up in the browser display screens.

Hello, I have the below code. My questions is why when I open up my browser to see the result of the below code, I also see all the characters of the comment part of the below code displayed on the top of the browser screen as well? From my understanding comment are not part of the code, so they shouldn't show up in the browser display screen, and another reason those comments should not show up in the display screen of the browser is that the comments are in the head section of the html document, and I thought only the stuff in the body section is being displayed not the head section. Any help is appreciated. <!DOCTYPE html> <html> <head> /* #firstname { background-color: yellow; } .intro { color: green; } */ <link rel="stylesheet" href="main.css"> </head>

<body> <h1>Welcome to My Homepage</h1> <div class="intro"> <p id="firstname">My name is Donald.</p> <p id="hometown">I live in Duckburg.</p> </div>

<p>My best friend is Mickey.</p> </body> </html>

3 Answers

Joseph Grant
.a{fill-rule:evenodd;}techdegree seal-36
Joseph Grant
Front End Web Development Techdegree Graduate 16,830 Points

Hi Reza, HTML has a different way of adding comments into the code than other languages such as CSS and JavaScript. When using HTML, you must use "<!--" (without quotations) at the start and "-->" at the end, as shown below:

<!-- #firstname { background-color: yellow; } .intro { color: green; } -->

Hope this helps!

martinjones1
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
martinjones1
Front End Web Development Techdegree Graduate 44,824 Points
martinjones1
.a{fill-rule:evenodd;}techdegree seal-36
martinjones1
Front End Web Development Techdegree Graduate 44,824 Points

Plain text that will still appear if you enter it in the head section or anywhere really; if it not wrapped in the correct element tags.

In this case, you could go with the options below to stop the text appearing in the browser.

Current Code
/* #firstname { background-color: yellow; } .intro { color: green; } */ 

Wrap in the <style> tag to use CSS comments
<style>
/* #firstname { background-color: yellow; } .intro { color: green; } */ 
</style>

Use HTML comments
<!-- #firstname { background-color: yellow; } .intro { color: green; } -->
Reza Sorasti
Reza Sorasti
491 Points
Reza Sorasti
Reza Sorasti
491 Points

Thanks guys for answering my question.