for this example, i want to show how easy it is to get some valid clean xhtml code without the use of tables. for this example, i’ll do the traditional header, content and footer layout to keep things simple.
xhtml shouldn’t be intimidating. i’m surprised to find a lot of coders i know try and avoid it because they don’t know the browser workarounds to get their code validated. but it’s simple, really. once you learn it, you’ll find it’s way easier than using tables in the wysiwyg editor.
so here is the old way many people used to create layouts with tables:
quite messy if you ask me. here’s how i’d set up my code:
in just three lines of code, we have just built the skeleton of a valid site. how easy is that? now comes the important part in setting up your xhtml. without the css file, nothing can be seen, for the most part. here is how i’d set up the css (externally of course):
#header {
background-color: #F0FDFF;
width: 100%;
height: 80px;
margin-bottom: 10px;
clear: both;
}
#content {
border-top: 1px solid #ccc;
font-size: 12px;
line-height: 20px;
color: #444;
height: 400px;
}
#footer {
background-color: #FDFDF2;
width: 690px;
padding: 5px;
font-color: #222;
}
now an important and handy thing to know is that ids and classes can be used to name anything. you can give these to specific form elements as well without having to use the dom. what if i had a div within a div and that div’s class was assigned “left”? then my css code would look like this:
#div .left {
}
but i’ll leave that up to you to research more on classes and xhtml. that can take up a whole new blog if i continued further into the subject.
but in conclusion, there you have it. you’ve coded your first ever xhtml page. granted there are no images or headers, but to keep things strict and xhtml, just make sure to stick to the hierarchy of using h1 tags first, then h2 and h3. also don’t forget to assign alt tags to your images. it’s always best to practice staying 508 compliant and accessible.
Related posts: