Is it wrong to structure my HTML like this?

I’ve done some reading and went back through and restructured my page what do you guys think?

<html>
  <head>
    <title> Twitch api </title>
  </head>
  <body>
    <div class="container-fluid">
      <div class="row">
        <div class="col-1a">
          <h1>Twitch Stream Status <i class="fab fa-twitch" id=resize></i>            
          </h1>
          <div class="col-1c">
            <button class="selector" id='all'>All</button>
            <button class="selector" id='online'>Online</button>
            <button class="selector" id='offline'>Offline</button>
            
          </div>         
        </div>        
      </div>     
    </div>        
  </body>
  <script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"></script>
</html>
      

We must have posted that at the same time. That’s funny, thank you for your feedback.

In codepen there is no need to add <body></body> or <style></style> or <script></script> because codepen add them for you if you place the code in the right panel. html code in the html panel, etc

I was just getting some practice. Because codepen does that I was under the impression that outside codepen those tags weren’t necessary.

Technically, according to the spec, you can in fact leave out some start and end tags and still have valid HTML.

For example, the following is a valid HTML document:

<!DOCTYPE html><title>Hello</title><p>Welcome to this example.

During parsing, this is expanded to the following (ignoring whitespace):

  <!DOCTYPE html>
+ <html>
+   <head>
      <title>
        Hello
      </title>
+   </head>
+   <body>
      <p>
        Welcome to this example.
+     </p>
+   </body>
+ </html>

However, without meticulously reading through the spec, it’s difficult to intuit exactly how this expansion will work, and you may get caught out by unexpected behavior. As a general rule, it’s much better to include all start and end tags when you (as a human) are writing HTML documents. The only appropriate time to leave them out would be in output from an HTML minifier. Because the minification process is done by an algorithm, it’s much less error prone.

1 Like

Wouldn’t the first example just basically be the result of minification? So it should be recognised as valid. I’ve never scanned a minified file for closing tags mind you.

It would indeed.

It will, assuming the browser follows the spec (and I’m guessing all modern browsers and probably even old IE versions would be spec compliant on this point).

[outside of CodePen] adding defer to the script tag is a good idea, but put the script in the <head> if you do that - the point of putting it at the bottom is literally to defer loading it, the defer (and async) attribute was added to make that unecessary -

@sorinr That was discussed in this thread above. This discussion is about using proper HTML structure in general, outside of a closed environment.

Almost @Kjoedicker. Script before body closing tag.

1 Like

Ok Kjoedicker, please try this out for the next little while. Understand what the sytax is for. What does a body tag do? Why use the opening and closing tags? You don’t have to memorize all that code but understand why we should use it. I’m a fairly new coder my-self, and uderstanding is more important than the code it-self in my books .As mentioned earlier here don’t bother with things like code-pen, as good as they are, their not neccassary yet. Understand the basics first. If you can not explane it to some-one you don’t know it This is just my opinion and the way I learn.

Body is a requirement for standards.

You really have implemented a bad structure and it’s ineffective, and you’ll be faced with a lot of mistakes