I'm not sure if I am posting this in correct thread but does anyone know of any good tutorials on div tags? When I say good I mean one that explains the logic and usage of a div tag.

www.w3schools.com http://www.w3schools.com. Div's are used to identify parts of a page; e.g. nav bar; its usually an unordered list <ul> but then you can go further and customize it further with your css.

 

A class <class> is similar to a a div but you can reuse them infinitely. However divs can only be used once and traditionally used for something that will only show once on a page; e.g. logo or main navigation bar.

A DIV is just a container with the default shape of a box (a square or rectangle depending on the given width and height).

They are used to contain various sections of your website such as a product. You could have the name of the product, an image, a description as well as a rating all included within the DIV like this...

<div>
   <h3>Product Name</h3>
   <img src="path.jpg" alt="product image">
   <p>Description of Product</p>
</div>

 

That DIV contains all that information so if you wanted to move it all then you would just move DIV (the container that groups everything that's nested within).

 

www.w3schools.com http://www.w3schools.com. Div's are used to identify parts of a page; e.g. nav bar; its usually an unordered list <ul> but then you can go further and customize it further with your css.

 

A class <class> is similar to a a div but you can reuse them infinitely. However divs can only be used once and traditionally used for something that will only show once on a page; e.g. logo or main navigation bar.

 

I think you've got DIVs mistaken with IDs...

Have a look at this article about the CSS box model.

 

 

A class <class> is similar to a a div but you can reuse them infinitely. However divs can only be used once and traditionally used for something that will only show once on a page; e.g. logo or main navigation bar.

 

Sort of, I think what you mean by this is <div id=""> can only be used once on a page, as an id should remain unique. There is often a requirement to use the same div on a page which is where you would use <div class=""> and of course if you are nesting elements you can also just use a <div> tag.

 

It's good to get an understanding of the default behavior of these elements, I would avoid using HTML5 tags (such as <nav>, <header>, <section>) for now until you get a firm understanding of how layout works.

Why ever use an ID when you could just use a class? Who cares is a ID is for one use? You can use a Class once too...

 

I did know the answer to this once, but can't remember it.

Why ever use an ID when you could just use a class? Who cares is a ID is for one use? You can use a Class once too...

 

I did know the answer to this once, but can't remember it.

 

I talked about this yesterday on this thread: http://www.webdesignerforum.co.uk/topic/68022-noob-alert-selecting-a-certain-a-tag-in-a-list/

 

In short - why use IDs instead of Classes for unique elements? Because it's more semantic to do so and IDs are required for Javascript interaction.

Javascript! ahh yeah, remember now...

 

In short - why use IDs instead of Classes for unique elements? Because it's more semantic to do so and IDs are required for Javascript interaction.

 

This ^

 

If a section is unique then there's no need to apply a class.

 

I often use a combination of ID's and classes and re-use a lot of styles to prevent repeating my code when it's not necessary. For example <div id="" class="">. It makes your code a lot easier to maintain.

ok, yeah, I remember now, forgot that you could do that, although you can also apply two classes to something as well eh?

 

 

 

If a section is unique then there's no need to apply a class.

 

But is there any particular reason not to? I mean, there may be a bit, unforeseeable, in the future of the site, where you need to reuse that bit of CSS, so why not just make everything a Class unless you have a specific reason not to (like integrating with JavaScript)

 

But is there any particular reason not to? I mean, there may be a bit, unforeseeable, in the future of the site, where you need to reuse that bit of CSS, so why not just make everything a Class unless you have a specific reason not to (like integrating with JavaScript)

 

It's rarely a requirement, if you do need to reuse sections you just change it within your stylesheet. Also it's not like you simply copy and paste code and the job is done, there's always a requirement to re-think areas as a result of a site growing, this is where you make those decisions and adjust your templates accordingly.

But I still don't understand; why use ID's instead of Class's?

Edited March 15, 201313 yr by AblazeRich

But I still don't understand; why use ID's instead of Class's?

 

Because it's more semantic.

Not sure what semantic means in this context Alluzion, can you elaborate on that at all please?

It generally means to be fit for purpose - using elements and attributes the way that they should be used and the way that the specification prefers.

 

Examples...

• Using the semantic HTML5 elements such as <nav> and <footer> to construct their respective areas.
• Using the alt attribute of <img> tags to relay a description to screen readers.
• Using <div> tags to contain something and not be empty (after all, they are containers).
• Using <h> tags for headings and <p> tags for paragraphs.
• Using HTML purely for structure and content and not for aesthetic purposes.

And of course...

• Using IDs to define a unique element that will need solitary selection in JavaScript or CSS.

 

 

EDIT: Here's the definition of "class" just to reinforce my point...

 

"a number of persons or things regarded as forming a group by reason of common attributes,characteristics, qualities, or traits; kind; sort: a class of objects used in daily living." - Dictionary.com

Edited March 15, 201313 yr by Alluziion

Agree with most of those use's, but still don't see how the id/class thing really matters in real terms, unless of course there is the JavaScript element.

ID's and classes are treated differently. ID's carry more weight than classes in a stylesheet.

 

For example if my mark-up was as follows:

<div id="one" class="two">Raa</div>

#one {
color: red;
}

.two {
color: blue;
}
 

My font color would appear red http://jsfiddle.net/jack_pallot/wyGx6/

 

ID's also have a hash value, browsers can use these to point to specific part of your page (like an anchor).

 

ID's are the most efficient selector performance wise, then class, then tag.

 

So there are a few differences between them. Ultimately you might come unstuck using classes for everything, because your stylesheet changes will affect other elements on the site, what can seem like a time saving idea can quickly become a mess.

id's has another function that classes doesn't.

in this link there is a id selector: "#"

It will take you to a unique post in this forum instead of the top of the page with the entire topic:

http://www.webdesignerforum.co.uk/topic/68022-noob-alert-selecting-a-certain-a-tag-in-a-list/#post_id_428702

 

EDIT:or at least it should theres som redirection going on in the system

Edited March 16, 201313 yr by Nillervision

sorry no redirection by the "evil system" - plain old 404

i must have a typo in the link.

but you'll get my point

Edited March 16, 201313 yr by Nillervision

Didn't know that J.P and Nillervision! Thanks guys!

Thanks everyone for your replies I really appreciate, I think I now understand divs a lot better and I also got a lot of extra information that I can think about once I become efficient with divs.