CODEWITHSUNDEEP
htmlcomments
Darren Sanders
Darren Sanders

Reputation: 13

HTML comments are affecting how my page renders? Using Notepad++ editor

New to HTML. During a book exercise, I was commenting some code using Notepad++ editor and I noticed that when I commented above a segment, that the rendering in the browser is changed (I thought HTML comments do not affect the rendering at all).

What I am attempting to do is simply change a block color to yellow within a black border using classes and the "div" element. When I comment, the block becomes white, instead of yellow (which it appears WITHOUT the comment). I again, restate that the ONLY thing I change is the comment to cause this discrepancy Can someone explain to me what is happening/what I am doing wrong? Thank you.

(This is the code that works: it changes my box to yellow)

<html>
    <head>
        <meta charset= utf-8>
        <title>div padding border margin test 1</title> 
    </head> 
    <style>
        .box1{
            border-style: solid;
            border-color: black;
            border-width: 3em;
            text-align: center; 
        }   
        .div-box-yellow{
            background-color: yellow;
        }
    </style>    
    <body>
       <div class="box1 div-box-yellow"><p>hello</p></div>
    </body>
</html>

(This is the commented code that nullifies my yellow box color )

<DOCTYPE! html>
<html>
    <head>
        <meta charset= utf-8>
        <title>div padding border margin test 1</title> 
    </head> 
    <style>
        .box1{
            border-style: solid;
            border-color: black;
            border-width: 3em;
            text-align: center; 
        }   
         <!--comment-->
        .div-box-yellow{
            background-color: yellow;}
    </style>    
    <body>  
        <div class="box1 div-box-yellow"><p>hello</p></div> 
    </body>
</html>

Upvotes: 1

Views: 783

Answers (1)

Josh Adams
Josh Adams

Reputation: 2099

You are writing the comment in the CSS style tag which needs /* instead of <!-- for block comments. Using the <style> is basically like a css file rather than a html file.

<html>
    <head>
        <meta charset= utf-8>
        <title>div padding border margin test 1</title> 
    </head> 
    <style>
        .box1{
            border-style: solid;
            border-color: black;
            border-width: 3em;
            text-align: center; 
        }   
         /* how to block comment css comment */
        .div-box-yellow{
            background-color: yellow;}
    </style>    
    <body>  
        <!-- how to block comment html comment -->
        <div class="box1 div-box-yellow"><p>hello</p></div> 
    </body>
</html>

Upvotes: 3

Related Questions