[podcast]http://thinkingaccessible.com/podcasts/divide_and_conquer_podcast_4.mp3[/podcast]

Transcript of the podcast:

[Intro music] Welcome to podcast four of Thinking Accessible. Today’s podcast is called Divide and Conquer. I will talk to you about layout versus content.

One of the keys of being successful in web standards is to divide the layout and the content.What I mean by this is that all the content related elements have to be in the HTML and everything else, like the style or the layout is in the CSS.

Your HTML code is strictly the tags that represent the content. So for example the <p> tag  is for paragraph, the <table> tag is for table, the <blockquote> tag is for big quote, etc. CSS is used to style the content. In other words, you use CSS to let’s say centre a page, make a certain <div> have a border, have a listed menu that is horizontal instead of vertical, remove or have different styles of image borders. So all it is is layout for us and it is done in the CSS.

Ok, now let’s see how this works. Please refer to thinkingaccessible.com for a textual transcript of this podcast where you can see exactly what I’m talking about.

So for example a horizontal menu. You would start by putting a <div> with an id, you can name it anything you want, but it should be something that you will recognize when you go to your CSS. I call (the id) menu. So you have your opening <div> with the id menu and then you can start your list. So it’s an unordered list and so you put the <ul> tag, and then you (place) your elements with the <li> tag, the list tag. It’s a menu so you have to put an <a href> tag with the location of that page and then you put the text, and you have the closing </a> tag, the closing </li> tag. So you repeat this as many times as your menu has items. You finish with a closing </ul> tag and the closing </div> tag.

<div id=”menu”>
<ul>
<li><a href=”home.html”>Home</a></li>
<li><a href=”about.html”>About</a></li>
<li><a href=”contact.html”>Contact</a></li>
</ul>
</div>

So now let’s look at the CSS of this. To start this menu id you can use a div to differentiate it from other maybe classes or you can just start with the number sign and then the name of your id. So in this case I have div, number sign, menu. And this one has padding of the menu and also the size of the font, so font-size is included in this one. The next one is the ul, because you want it to specifically target this id, the menu id, you put the ul right after this menu id. It follows the same order as in the HTML. The list-style is none, the list-style is if you want there to be a little circle beside the (text). We don’t want this in this case and it’s always a good idea to void the margin and the padding. The next one is the li tag and again you put the menu id right before it. To make this menu horizontal you have the display at inline which makes it all horizontal, you can also add some padding here for every element in your menu.

div#menu {
padding: 128px 0 0 220px;
font-size: 70%;
}

#menu ul {
list-style: none;
margin: 0;
padding: 0;
}

#menu li {
display: inline;
padding: 0 5px 0 4px;
}

(This is what is looks like:)

That was a simple example of how you (divide) HTML and CSS to have a better separation between the content and the layout.

[Exit music] That’s it for this podcast. I hope you found it useful. You can also see other content at my blog thinkingaccessible.com. Until next time!

Audio from ccMixter entitled “Café Connection“ by Morgantj under Creative Commons.