There are times when you need to structure or group content together without explicitly passing along any type of semantic meaning.
In those instances, you’re going to use HTML’s work horse structuring tag the div.
Prior to Html5, the div tag or division was used for the bulk of page structuring and for a lot of authors out there, this is still their go to structural tag.
Basically, div tags were used to divide up content and then class or ID attributes were used to pass along the semantic meaning of the content.
Although our new tags that are available to us in HTML5 do gives us more meaningful alternatives in a lot of cases.
The div tag still remains a powerful option when structuring your content.
HTML file specification.
You’ll notice that I’m no longer in the sectioning content part of the specification. I’m in the grouping content.
So, it’s a very important distinction between div and some of the other tags we’ve looked at is that the div tag is used for grouping content. Now the definition down here says, the div element has no special meaning at all.
It represents its children. It can be used with the class, language and title attributes to, to mark up semantics comment to a group of consecutive elements. So that can be a little difficult to understand at first.
So basically, the div tag is an anonymous grouping element. It’s an anonymous tag. It doesn’t mean anything. It has no specific meaning. It just allow you to group up elements into a specific tag.
Now why would you need to do that? Well, take a look at the note down here. Authors are strongly encouraged to view the div element as an element of last resort for when no other element is suitable.
Use of more appropriate elements instead of the div element leads to better accessibility for readers. And easier to maintain a, ability for the authors. Okay. Now I think is a little harsh. Calling it an element of last resort.
Basically, what that means is that if there is a tag that passes along the semantic meaning of the content you should use that instead. But in those instances when you don’t have anything that’s going to pass along the semantic meaning, then the div tag is fine.
So when you need to group content together for stylistic purposes, or you need to group something together that HTML5 does not have a tag that represents it, then the div tag works just fine for that.
Okay. I want to put this into practice by opening up the blog.htm file and the 04 underscore 07 directory. Looking at the code it looks a little bit different. Let’s go over and check it out in the browser. I can see we have the things I like, my favorite books. But the books themselves, or at least the first three books, have a slightly more complex structure to them. You’ll notice we have the title of the book that’s followed by the author and a slight synopsis of the book itself. So if I go back into my code and I scroll down.
I can see that that’s represented by heading five separated by two paragraphs. Well, we need to have some way to group this content together. Because right now, the h5 is beginning a new section. So we do have a new section of content in our outline followed by those two paragraphs. But that’s the only thing that’s really sort of alerting the reader that these things belong together. So, I’d like to group them together for a couple of reasons. One, is I just want to represent them as belonging together. And number two, you may have caught at the very top of this.
I have some styles going on. So, the code that you’re seeing here. This is actually CSS and we’re going to talk about CSS and cover it in its own chapter a little bit later on. So if you could imagine, a div tag is going to work perfectly here. So what I’m going to do is at the beginning of the h5, I’m going to go ahead and create a div tag. And then, after the closing paragraph tag in this particular book section, I’m going to close the div tag. So in essence, what I have got going on is that I have the div tag that is now grouping this content together.
And I’m going to go ahead and do that for each of the books. So I’m doing it for The Hobbit. I’m going to do it for Animal Farm. And then finally, I’ll do it for the House of Leaves book just below that. Okay. Now visually, if I go back to the page, there is no visual change to this. But in terms of the code, these items are now grouped together using this anonymous div tag. Now if I did want to pass along semantic meaning the fact that all these are books, for example. I could either use a class for an ID attribute.
Now ID attributes can only be used once. So if I gave one of the divs an id of book, I couldn’t use that same ID over again on the other ones. Classes, however you can use as often as you like them. So, I think a class is a pretty good choice for describing the contents of the div tag. So I’m just going to give it a class attribute of book. And I’ll do the same thing to the other two below that. Now classes are interesting attributes. They’re semantic attributes, meaning they pass along meaning. And they help us identify content on the page.
In this case, it’s helping us identify that these three groupings of content represents a book. Now that also allows me to stylistically style these. You can see up in my CSS, I have a selector here that targets book and some content inside of books. So now, if I save this and flip over. I can see that each of the books is styled in a unique way that indicates visually the relationship for the content. So I could even do things like throwing images and pictures in there, or I can get a little bit more complex with the styling.
The concept that I really want to get across to you, however is that the div tag allows me to be very flexible. I can group content together any way that I want and then through the use of class and id attributes, apply any semantic meaning I want to to them. So it’s almost a way of sort of extending the language if you will. Since there is no book tag, for example. So even though the specification makes the div tag seem like it’s an element of last resort that you’ll never use, it actually gives you a really powerful tool for grouping and structuring content. As your pages get more complex and your visual styling needs get more sophisticated, you’re going to find yourself using it frequently throughout your sites.