Evil Markup? Maybe not
Tables... The very word sends shivers down any self proclaimed CSS master. Tables are evil, tables should never be used. Tables should be cast into oblivion from this day forth. Baloney!!
Tables like every other tag in HTML have its uses. However like anything in this world it can be misused. Most Web Designers use applications such as Photoshop, or what have you, to design the look of their site, and then have this same application transform it into HTML. Yes it may be HTML it may even look nice in some cases, but is it correct? Is it Valid? Probably not.
Most applications use tables to transform the image rendition of a layout created by a designer into HTML, however these applications will normally use obsolete, difficult and hard to maintain ways of building a website. Like I mentioned in my previous POST, A simple layout is easier to maintain. Most of the time they'll rely on tables to create the layout because that was the technique used years ago. however as the Web has progressed so have the techniques to design and build websites.
A simple 3 column layout like we saw before ends up a mis-mash of cells and columns instead of a nice fluid understandable piece of code.
Tables
<table>
<tr><td colspan=3>Header area</td></tr>
<tr> <td> Left Column</td>
<td>Center Column with lots of content...</td>
<td>Right Column</td>
</tr>
</table>
Vs DIV's
<div id="header"></div>
<div id="leftcol"></div>
<div id="contentcol"></div>
<div id="rightcol"></div>
7 Lines of code vs 4. And this is just a basic skeleton. Now suppose you want to change the look, like we did in the previous post. Move Navigation to be horizontal, you'd need to go in and alter the entire markup. Now its seems reasonably simple without any content, but imagine tons of content in the middle column, and trying to find where the right column begins after all that content with more tags and text etc...
With the proper use of CSS you couldn't care less what the content of the DIV is where it starts or where it ends. You look at your CSS and you modify that.
Now I must make a confession, calling your columns left, right and center is not a good idea, because like with tables you give them a predetermined location or layout position, and as I showed with CSS, they really don't need nor should they have one.
So for an accurate representation, you could call them navigation, content, and maybe "adbar" or extra_content pane ro something that is descriptive of its contents, but not of its position in the page.
If you need to change its location, style, dimensions etc.. it you can look for their style definitions in the style sheet and change those. So Navigation moves to the top horizontally, "adbar" may end up at the bottom heck you could even set it as the left column instead. All without altering the markup.
You don't have a left column, you have a navigation "pane" for lack of a better word, and you can place it anywhere you want to.
All this without altering your base markup. Do it with tables, and you'll be starting from scratch every time.
This does not immediately mean tables no longer have a place in the world of Web development and should never again be used or heard of. Tables play an important role if used properly.
But how do you use tables properly? You use them to display tabular data.
But now, what is tabular data? Well, it can be many things. It can be a directory, it can be a product listing, it can be a roster sheet for a baseball league etc... All that can be considered tabular data. The common factor? Its data, its listings, its information that has that particular display need and structure, and will not change. In this context tables become a tag to markup how data is to be structured, not where its going to be on the page, or what its going to look like.
<table border=0 cellspacing=0 cellpadding=0 style="border:1px solid #999999;">
<tr><td colspan=3>Players</td></tr>
<tr> <td> Name</td>
<td>Position</td>
<td>Email</td>
</tr>
<tr><td>Peter</td><td>Midfielder</td><td>pete@baseballnuts.com</td></tr>
<tr><td>John</td><td>Rightfielder</td><td>john@baseballnuts.com</td></tr>
<tr><td>Frank</td><td>Pitcher</td><td>frank@baseballnuts.com</td></tr>
<tr><td>Jason</td><td>First Baseman</td><td>jason@baseballnuts.com</td></tr>
</table>
Validation
Validation is simply the product of adhering to the rules and norms set by the W3C for design.
As long as your coding follows those rules it can be considered valid, and stands a good chance of looking the same across all the different platforms.
But hey!, we all make mistakes, and we make even more when we are coding a website. So to help us out the W3C offers a service to check your web pages and make sure it conforms to the set of rules you've specified in your webpage as your Doctype. If you made a mistake and missed something it will tell you and often offer an explanation of the errors.
The W3C's validator is located here:
http://validator.w3.org/
You can use it to run your pages through and make sure there are no errors.
It has 3 ways of checking your website:
- By URL
- By File Upload
- By Direct Input
By Url is the most direct, you give it a URL or address where it can access your website online, and it verifies it.
By File Upload: Takes your base file directly. Reads it and returns its result.
By Direct Input,: By far the easiest option, just copy and paste your entire code, and press the button.
Options 2 and 3 are only useful if your file is 100% pure HTML. If you are working with a server side language like PHP, ASP or Cold Fusion, then its often better to offer the URL. Otherwise the server side code is not processed, and may cause issues that aren't really there in the final page.
Lets take our example website we used in the last post and give it a whirl:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Structure Vs Presentation</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div id="header">
<h1>This is the Main Website Title</h1>
</div>
<div id="navigation">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>
<div id="content">
<h3>This is Content Title</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin odio turpis, hendrerit bibendum fringilla sit amet, lacinia sit amet lacus. Quisque varius tellus vel libero tempor laoreet. Suspendisse vel dignissim tellus. Etiam fringilla consequat eros, in volutpat lectus molestie at. Vivamus vitae mi justo, quis gravida nisi. Tristique senectus et netus et malesuada fames ac turpis egestas...
</p>
<div id='subcontent'>
<p>
Suspendisse potenti. Duis pellentesque, sem varius facilisis vehicula, lectus purus semper mauris, quis laoreet metus sem vel diam. Ut non tellus nulla. Sed egestas dui ac nulla eleifend vulputate. Sed blandit lacus eu arcu luctus et condimentum erat scelerisque...
</p>
<p>
Pellentesque mauris assa, aliquet vel volutpat sed, facilisis vitae urna. Vestibulum consequat metus id magna mollis auctor. Nunc id tellus nec sem auctor convallis ut a quam. Suspendisse vel urna velit, feugiat ultrices leo. Vestibulum orci ipsum, venenatis quis ultrices at, varius sed sem. Nulla facilisi. In porta, nunc vel rutrum adipiscing, dui lectus accumsan... </p>
</div>
<p>
Quisque sit amet dui libero, at pharetra erat. Nullam ante mauris, hendrerit vel accumsan sed, porttitor et purus. Fusce interdum sodales justo, a pretium velit porta eu. In hac habitasse platea dictumst. Etiam semper laoreet dolor quis pharetra. Integer id est vel tortor iaculis laoreet congue non nibh. Cras non dui massa. Sed nulla tortor, volutpat vitae accumsan eget, imperdiet quis nibh. In accums...
</p>
</div>
</body>
</html>
We'll use the Direct Input option, and just copy and paste our website inot the text area as seen in the pic above. Press the button and the Validator Returns 2 Warnings, (about the same thing actually). Our Example Markup is considered valid.
The 2 warnings refer to the lack of character encoding. Its an additional line that tells the browser what encoding to use when displaying the page. Most servers send a predefined header for this, and unless you need a specific encoding you can get by with the standard encoding.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
I'll get into it more in a future post. For now its just a lesser warning we may safely ignore.
Let's introduce a real error shall we:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Structure Vs Presentation</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div id="header">
<h1>This is the Main Website Title</h1>
</div>
<div id="navigation">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>
<div id="content">
<h3>This is Content Title</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin odio turpis, hendrerit bibendum fringilla sit amet, lacinia sit amet lacus. Quisque varius tellus vel libero tempor laoreet. Suspendisse vel dignissim tellus. Etiam fringilla consequat eros, in volutpat lectus molestie at. Vivamus vitae mi justo, quis gravida nisi. Tristique senectus et netus et malesuada fames ac turpis egestas...
</p>
<div id='subcontent'>
<p>
Suspendisse potenti. Duis pellentesque, sem varius facilisis vehicula, lectus purus semper mauris, quis laoreet metus sem vel diam. Ut non tellus nulla. Sed egestas dui ac nulla eleifend vulputate. Sed blandit lacus eu arcu luctus et condimentum erat scelerisque...
</p>
<p>
Pellentesque mauris assa, aliquet vel volutpat sed, facilisis vitae urna. Vestibulum consequat metus id magna mollis auctor. Nunc id tellus nec sem auctor convallis ut a quam. Suspendisse vel urna velit, feugiat ultrices leo. Vestibulum orci ipsum, venenatis quis ultrices at, varius sed sem. Nulla facilisi. In porta, nunc vel rutrum adipiscing, dui lectus accumsan... </p>
</div>
<p>
Quisque sit amet dui libero, at pharetra erat. Nullam ante mauris, hendrerit vel accumsan sed, porttitor et purus. Fusce interdum sodales justo, a pretium velit porta eu. In hac habitasse platea dictumst. Etiam semper laoreet dolor quis pharetra. Integer id est vel tortor iaculis laoreet congue non nibh. Cras non dui massa. Sed nulla tortor, volutpat vitae accumsan eget, imperdiet quis nibh. In accums...
</p>
</div>
<img src="myimage.jpg">
</body>
</html>
I've added an image. But I neglected to include one of the properties that it requires.
When we run it through the Validator, it spits out a big nasty red error:
And here we have its explanation:
Line 38, Column 21: required attribute "ALT" not specified
✉
The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.
It tells me the line number, the code around the error, and why it may be wrong.
Now I can go back to my code and fix it:
<img src="myimage.jpg" alt="This is an Image" >
Should we run it again, it will validate.
At the end and like with many other things, correct usage of tags for their intended purposes will help produce a nicer looking website that is easier to maintain.
Well that's it for my second entry into this Blog. Hope you enjoyed it.
Just go ahead and try to remove my comment! "Phil"!
ReplyDelete