CRAFT412 gaming website, now with divs and spans

Since I'm new to HTML and CSS, I was wondering whether my HTML layout is correct? Before I used div id for everything and everything seemed to work fine, however I recently heard about the use of span and div classes, so I've attempted to make use of them on a page from my website.

The issue is I have no idea if I've used div class and span in the right way on my site. I'm really quite confused. I've tried to ask questions about it before, but I can't understand the explanation. I've also tried reading up on them, but I'm still not sure on the difference. I don't understand what in-line or block-line in context to span and id means. I really just want to know if my code structure is technically correct and efficient. I mean it works, but I want to ensure I'm using proper practices.

Here is an portion of code from my HTML:

`


CRAFT412 - Home










SERVER IP
craft412.serveminecraft.net





TEAMSPEAK

• Home

• Status

• Info

• Gamemodes

• Survival

• Pure-PVP

• Gamesworld

Your root question is:


The issue is I have no idea if I've used div class and span in the right way on my site.

Technically, it's not very hard to use them wrong, though there are a few principles to follow:

• div tags are expected to be block-level elements. That is, they take up 100% of the width of their parent, by default. (Or whatever the browser is configured for.)

• span tags are the opposite: they are inline elements. That is, they only take up enough space to fit their content, by default. They should never include other block-level elements within them.

There are certain, "acceptable" use differences between the two. For example, span elements should never contain any block-level elements. It's considered good practice to use span tags around bits of text that need special styles. It's considered bad practice to use them as block-level containers. You should also only use div elements when you need a true container, as that is what div elements are meant for.

A div is a "division" in the page. That is, this next bit if content should be significantly different from the previous content. A span is merely intended to allow for the grouping of bits of text.

Inline elements are similar to the inline code-blocks you see above. The style is only applied to fit whatever content is within that element. So, with a ` tag, it will resize itself to fit the content within it.

Block-level elements are similar to the quote you see above. They will stretch to fit the entire width of the parent container, unless otherwise specified. Think of them as a rectangle. They will always be a rectangle-shaped element, whereas inline elements will wrap to their content.

On to the Review

Your HTML is not at all valid. If this is a snippet, then that is expected, but I would recommend to take use of the tools out there to get automated reviews of whether or not the HTML is legal.

The W3C Validator does a great job at that.

Some points to take from that validator:

-
Your tag opens in the wrong spot. You have two tags that appear before it, which is very illegal to the spec. You can fix it as so:

    

    
    

    

    
    CRAFT412 - Home

-
Don't use percentages or decimals or negatives for img width or height attributes. Those are considered illegal. If the image needs to be 100% width, then you should apply an appropriate class to it. The width and height attributes on img tags are designed so that browsers can determine how an image will affect page-rendering, before it has been loaded.

-
For img and a tag href attributes, you should encode the URL when necessary. I.e. use %20 for spaces, especially.

-
frameborder attributes on iFrame tags are obsolete - CSS can replace this. Of course, iFrame tags alone can be considered bad-practice, avoid them if you can.

-
Back to div vs. span: the following code is illegal by the specification:

    © 2015 GR412

Instead, the span should be a div, or the
and should be removed. Acceptable tags within a span include a, img, other span tags, and several others. (A web-search can get you a more complete list.)

Those are the biggest kickers I see, though you should certainly fix your whitespace, and minify it where you can. Since HTML is sent as-is to the browser (unless the web-server does the minification/compression) it's important not to bloat it.

You should also look into the tag, and the tag. Your line indicates that it is to be HTML5 compliant, so it is acceptable to use those tags here.

As far as id and class go, you should never repeat an id value more than once on any page. If you need to include multiple elements that use the same CSS rules, always apply those rules to the class, and always apply that class to your , ,
, , , , , or whatever other tag you have. You can attach an id or class to practically any tag. So don't let those restrict you to only using div or span`.

StackExchange Code Review Q#100966, answer score: 18