Is it wrong to structure my HTML like this?

Is it bad practice to structure my html without body, and paragraph tags?

<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"></script>





<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>
    <div class="col-1c">
    <button class="selector" id='online'>All</button>
<button class="selector" id='all'>Online</button>
<button class="selector" id='offline'>Offline</button>
    </div>
    
  </div>
  
</div>

Yes, it is better to use the <body> as it will contain all the content of the HTML document.

Regarding <p> it depends if you have a paragraph or not.

1 Like

What is the benefit of doing that vs not doing that?

Yes it’s bad practice. An HTML document contains <html>, <head> & <body> tags. These are the bare minimum. Please read up on basic HTML. This is rudementary knowledge if you wish to do web development. Why are you trying to go without a body tag? If you’re using Codepen <head> may be omitted but Codepen is a sandbox and is not representative of the real world.

I’ve been using code pen so I’ve never had an issue getting everything to execute. I’m trying to be as thorough as possible in how I write my code and I noticed people still use it so I wanted to clarify whether or not Its a practice that is required or just a preference.

I don’t remember but I imagine the first challenges show you the basic HTML tags. Did you do those challenges?

As per the web standards it is recommended to follow HTML structure. If you do not then your site will not pass HTML validation that can also have negative impact on your SEO.

1 Like

On another note, it is generally best practice to put your script tags at the bottom of your HTML, right before the body closing tag. There are exceptions when using certain third party APIs but in general that is where they go, although some disagree.

I didn’t realize that code pen was a controlled environment that omitted certain things. Because I’ve been using code pen since I started I’ve been a little mislead. I knew something was off which is why I started this topic.

I’ve done a few projects in codepen ill go through and restructure them. This is a little frustrating but a good learning experience about controlled environments.

Outside the codecamps first few challenges do you have any other resources you can recommend online? I can find some on my own if not, but you’ve helped me thus far so I would like to what else you recommend.

Codepen is great for code sharing and trying out things but it’s not the greatest for learning how to structure a project. The most widely recommended resource is the Mozilla Developer Network, colloquially referred to as MDN. Just do a quick search for MDN HTML and you will find a great resource of all things web development. I’d say that’s a good start. It is a reference, mostly, but also chock full of basic tutorials.

Thank you for your feedback. I will check it out. I did some brief re-freshening. How does this look to you?

<html>
  <head>
    <div class="container-fluid">
      <div class="row">
        <div class="col-1a"><h1>Twitch Stream Status <i class="fab fa-twitch" id=resize></i></h1>
            <body>
              <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>
              <script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous">
              </script>
          </body>          
        </div>
      </div>
    </div>    
  </head> 
</html>

I’m also going to throw in a piece of advice. And take this with a grain of salt because it is my opinion:
learn CSS3 proper before diving into using just Bootstrap. CSS frameworks are great and there’s nothing wrong with using them, however as a beginner I strongly recommend you try building a few things without using Bootstrap. Learning the foundations is super important. I see beginners using just Bootstrap and some of them don’t even understand what’s going on under the hood. What if they get a job one day and their employer doesn’t use a framework. They will be lost.

2 Likes

The head closing tag goes before the body opening tag. After the head closing tag you immediately add the body opening tag. Then the other stuff, then the scripts, then the closing body tag, then the closing html tag.

Your HTML head and body tags are out of place. The basic form that you should follow is outlined here: http://htmlshell.com/

If you have a codepen project, if you look in the lower right corner, there is an Export button where you can export to a zip file, extract it, and run it locally. You can see what the “real” structure of your pen would be in the “real” world. It’s not a big difference, just a few new tags and linking up a few files.

Good luck @Kjoedicker! You look like you have the right attitude and motivation! I’m going to bed. Good night.

1 Like

Thank you and everyone for your feedback.

2 Likes

This is how I structured my code.

<html>
  <head>
    <meta charset="utf-8">
  </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>    
    <script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"></script>
  </body>
</html>