W3C HTML5 ERROR Start tag head seen but an element of the same type was already open-CodePudding

Start tag head seen but an element of the same type was already open. also I got some other errors:

" Saw <?. Probable cause: Attempt to use an XML processing instruction in HTML. (XML processing instructions are not supported in HTML.) "

and

" No p element in scope but a p end tag seen. "

I have no clue how to fix them.

<!DOCTYPE html>
    <html lang="pl">
    <style>
    html, body { margin: 0; padding: 0; color: black; background-color: grey;}
    #strona { position: absolute; color: white}
    #rects { position: relative; width: 300px; height: 125px; border: 1px solid #FF0000; color: yellow; margin: 5px; padding: 2px;}
    </style>
    <head>
        <meta charset="UTF-8"/>
        <title> site</title>
    </head>
    <body>
    <div> <script>
    function clickbutton1(){
        document.getElementById("opis").innerHTML = Date();
    }
    </script>
    </div>
    
        <div id="strona">
            <h1>test</h1>
    <?php
    echo "<p>data replacement</p>";
    echo "<div id='rects'>
        <!-- starting of the function -->
    <p id='opis'> internal description </p>
    <script>
    document.getElementById('rects').onclick = clickbutton1;
    </script>
    </div>";
    ?>
    </div>
    
    
    </body>
    
    </html>```

CodePudding user response：

There were some added characters under div#strona that were interfering with how the code was being run.

In order to make the Javascript functional, add the clickbutton1() onclick function directly to the HTML element.

Below is the reformatted code with HTML/CSS/Javascript in their own respective files:

function clickbutton1() {
  return document.getElementById("opis").innerHTML = Date();
}

html,
body {
  margin: 0;
  padding: 0;
  color: black;
  background-color: grey;
}

#strona {
  position: absolute;
  color: white
}

#rects {
  position: relative;
  width: 300px;
  height: 125px;
  border: 1px solid #FF0000;
  color: yellow;
  margin: 5px;
  padding: 2px;
}

 
<head>
  <meta charset="UTF-8" />
  <title> site</title>
</head>

<body>

  <div id="strona">
    <h1>test</h1>
    <div onclick="clickbutton1()" id='rects'>
      <p id='opis'></p>
    </div>
  </div>

</body>

CodePudding user response：

@weemizo Yes! I added the CSS styles to a style tag and the JS into a script element. They are now both placed in the head tag.

<html>
    <head>
        <meta charset="UTF-8" />
        <title>Site</title>
        <style>
            html,
            body {
            margin: 0;
            padding: 0;
            color: black;
            background-color: grey;
            }

            #strona {
            position: absolute;
            color: white
            }

            #rects {
            position: relative;
            width: 300px;
            height: 125px;
            border: 1px solid #FF0000;
            color: yellow;
            margin: 5px;
            padding: 2px;
            }
        </style>
        <script>
            function clickbutton1() {
                return document.getElementById("opis").innerHTML = Date();
            }
        </script>
    </head>

    <body>
        <div id="strona">
            <h1>test</h1>
            <div onclick="clickbutton1()" id='rects'>
            <p id='opis'></p>
            </div>
        </div>
    </body>
</html>