So what do I mean when I say element organisation? Well put simply I’m referring to the way in which we group HTML elements in terms of either tables, divs or HTML5. Now to be honest I believe that tables these days are somewhat obsolete and I wouldn’t even bother teaching it to new web designers so the objective of this article is to show you that you don’t need tables! Let’s begin with the trusty <div> element. We’re just going to create a nice layout that could perhaps replace a table! (Just bear in mind that this is a rather basic tutorial).
Dividing, or div, elements are really easy to understand and once you get using them, you won’t ever go back! So lets create a simple page header using div elements.
<div id="header"> <h1>My Website</h1> <div class="nav"> <ul> <li>Home</li> <li>About</li> <li>Contact</li> </ul> </div> </div>
So there we have some code that will create our header, for the moment lets just focus on the <div> elements. So you’ll see that we create these elements by using the standard convention of the less than and greater than symbols and then entering the word “div” which just tells the browser that it is a dividing element. We then have a few parameters that we can set. First off we can give the element an ID which we can later reference in our CSS or JavaScript, so you would only give and ID to something like a header or a main content box (basically just a name that isn’t going to get used again). Then we can give it a class which we can use over again and acts much like and ID. Lastly we can actually apply styling to individual divs, e.g. <div style="display:none"><div>. This comes in handy when we want to show and hide elements on the fly, but you should know that in-line styling isn’t something I advocate.
Lastly you will notice that we end our element with <div>. Now in the code above you’ll notice that we have some elements in between the opening of the div and the closing of it. This is because the whole point of a div to to group elements together so that you can manipulate them later. However you can have an empty div that you can apply styling to if that’s something you’re interested in doing.
At this point in time I only create with divs, however in the near future it will soon become the norm to use HTML5 to group your elements. Now you can already do this, just as long as you are aware that it isn’t yet fully supported. But for when that time comes you should have an idea on how you might style the same sort of code with HTML5. Now I’m not going to cover the in-depth areas of HTML5 just so as to stick to the topic in hand. So here is the code that would replicate the stuff you see above, but in HTML5.
<header> <h1>My Website</h1> <nav> <ul> <li>Home</li> <li>About</li> <li>Contact</li> </ul> </nav> </header>
Now what you will notice about this is that it looks slightly cleaner and somewhat resembles XML, you’ll see that in HTML5 many of the most commonly used names for divs have just been turned into actual tags; something which I’m sure I’ll come to love.
And that’s it for that little segment. To finish I’d like to go over another basic topic regarding using IDs and Classes when naming your elements. First IDs.
An ID, or identification, is used when we want to reference a singular element on our page; it is a name that can be used only once and can be added to elements like so – id="myElement" – that was easy wasn’t it? Now when we want to actually reference an element with an ID in either CSS or JavaScript/jQuery we have to use the hash (or pound) symbol – # – e.g. #myElement { display:none; } in CSS and $("#myElement").hide(); in jQuery. So you give IDs to elements such as the header and main content box so that you can group a number of other elements and apply certain styling to them all.
Next classes. These are used to “class” elements together and more importantly can be used as many times as you like! They can be added to elements like so – class="left" – and you should know that you can add multiple classes to singular elements like so – class="left hidden". This is really useful when you want to have styling that you can apply to whatever elements you might need to, for example you might want to float all elements with a class of “left” to the left. But you might also want to hide some elements using the “hidden” class, I think you can properly see just how useful this can be. Now when you want to manipulate elements with certain classes we simple have to use a full stop (or period), e.g. .left { float:left; } in CSS and – $(".hidden").hide(); – in jQuery.
So I hope this article goes some way towards the eradication of table-based layouts on the web, and I hope you found it useful as a reference about IDs, Classes and divs!