Create meaning from chaos
Divs and spans
In the heyday of HTML 4.01, one tag rose above the rest as a way to section off parts of websites for layout purposes: the humble "div" (division) element. Is part of your website a header? Put it in a div! Is another part content? Put that content in a div! Why not wrap your header and content in a container div, as well? Just put blocks of stuff inside other blocks, then add styles to those blocks to move stuff around on the page. That was the guiding philosophy of web design for a good little while.
But what if you wanted to style a small segment of text? If you put it in a block using a div, it won't stay inline with the surrounding text. That's where the "span" element comes into play. With a span, we can keep content inline with surrounding content. The "span" element is mostly used on lines of text within "div" elements.
Using this design process, we theoretically have a bunch of stylized boxes filled with other stuff, which we can also stylize. We could use inline styling for each element, but then editing each one would be a pain, and we'd lose the power that external or internal styles lend to affect multiple instances of the same element in our document. What can we do?
Classes and ids
To take back some of our CSS-based superpowers to affect all the things on the page, we can give our divs and spans classes and ids. Using the "class" attribute is similar to creating our own, new, semantic elements. We can use a class selector the same way we would use the name of an element to define rules in our CSS. Say we had a div with an attribute class whose value is "a_box":
<div class="a_box">Hello World!</div>
Now let's say that in an internal or externally linked stylesheet we added rules for any element with the class "a_box":
.a_box {
background-color: #FCF;
width: 100px;
height: 100px;
margin: auto;
border: 3px double black;
}
The result of your handiwork would be as below:
The text isn't very pretty, is it? Why don't we surround it in a span. And just for fun, we'll surround the exclamation point in a div with a unique id. (Classes can be used many times on the page, but a given id should be used exactly once per document.)
HTML:
<div class="a_box">
<span class="greeting">Hello World<div id="greeting_exclaim">!</div></span>
</div>CSS:
.greeting {
padding: 20px;
}
This time, what we end up with is:
Well, that's odd. We might expect that giving our span a padding would create equal space on all sides, but it's still wedged up there on the top of our div! Also, by surrounding our exclamation point in a div, it's no longer inline with the rest of the text. We can fix this by changing the display property in CSS.
Block, inline, inline-block
Some elements on the page default to starting on a new line and not letting anything hang out next to them. Those elements have a "display" property value of "block" by default. On the other hand, other elements don't force a new line and allow items to exist on the same line before and after they're placed in the page. Those elements have a "display" property value of "inline" by default. Let's play around with these values and see what we can do with our example:
HTML:
<div class="a_box">
<span class="greeting">Hello World<div id="greeting_exclaim">!</div></span>
</div>CSS:
.greeting {
display: block;
padding: 20px;
}
#greeting_exclaim {
display: inline;
}
Now our example should look like this:
Of course, this example is ridiculous. We could achieve the same effect much more simply by using a div where we used a span and vice versa, since divs are "block" elements and spans are "inline" elements by default. Moreover, we should always be very selective in which items we define using ids, since any given id should only be used once on a page. (A good use of an id is for something like the page title and/or logo, which should be on every page exactly once.)
Think outside the box
Turtles all the way down
Honestly, nesting a million divs inside of each other for layout purposes isn't much more semantic than shoving everything into a table like we did in Lesson 2. After several years drowning in seas of division boxes, the World Wide Web Consortium (W3C) decided enough was enough and started drafting semantic elements to be included in HTML5.
HTML5 semantic elements
This page uses the new semantic elements introduced with HTML5 to break the markup into meaningful boxes, rather than endless layers of "div" tags. Specifically, this page uses:
- <header>
- <nav>
- <article>
- <section>
- <aside>
- <footer>
The exact function of each of these tags is not defined by default; you can use them any way you want, technically. Unless you specify otherwise, they behave like divs with block-type display. You can nest them in any way that makes semantic sense to you. For instance, many people use "aside" to denote a sidebar next to an "article," but I've placed "asides" within "sections" to give this page a bit of a textbookish feeling.
I haven't used every new semantic element in this page. There are plenty more to choose from. You can learn more about these new elements at W3Schools.
Float like a butterfly, align like a…
You can place elements next to other elements with CSS using float, clear, the clearfix hack, and some basic math. Floats are both a big part of how to make horizontal menus and how I placed the "asides" next to content in the "sections" of this page. It's either really complicated or I'm really bad at it, but either way, I can't sufficiently explain it to you. You'll just have to read up on the basics at W3Schools, then check out this article at Smashing Magazine to learn more.
As they say, practice makes perfect! (Or in my case, gets you closer to almost understanding something.)