I'll validate my point.
Improper Use of Markup:
I will display the improper use of HTML markup, by creating two static html pages. Using specific tags improperly. Just as people do with tables, by developing structure and layout with tags which were not designed to.
Example 1:
http://goddam.net/improperuseofmarkup.html
Two column page, with main container and columns structured in <li> (list) tags. Title/Headers using <p> (paragraph) tags, and the content areas in <span> (span> tags.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>omgwtfbbq</title>
<style type="text/css" media="all">
body{
text-align: center;
margin: 0;
}
ul.wrap{
display: block;
text-align: center;
width: 702px;
margin: 0 auto;
padding: 0;
list-style: none;
border: 1px solid #000;
}
ul.wrap li.left{
float: left;
width: 200px;
margin: 0;
padding: 0;
}
ul.wrap li.right{
float: left;
width: 500px;
margin: 0;
padding: 0;
}
p.title{
display: block;
padding: 2px 5px;
margin: 0;
background: #efefef;
}
span.block{
display: block;
padding: 5px;
}
.clear{
clear: both;
}
</style>
</head>
<body>
<ul class="wrap">
<li class="left">
<p class="title">Title of Block</p>
<span class="block">This is the block for content and crap</span>
<p class="title">Second Block</p>
<span class="block">This is the block for content and crap</span>
<p class="title">Third Block</p>
<span class="block">This is the block for content and crap</span>
<br class="clear" />
</li>
<li class="right">
<p class="title">Another Block</p>
<span class="block">This is the block for content and crap</span>
<p class="title">And Another Block</p>
<span class="block">This is the block for content and crap</span>
<p class="title">One Last Block</p>
<span class="block">This is the block for content and crap</span>
<br class="clear" />
</li>
<li class="clear"></li>
</ul>
</body>
</html>
Markup Validates:
http://validator.w3.org/check?uri=ht...alidator%2F1.1
CSS Validates:
http://jigsaw.w3.org/css-validator/v...n g=1&lang=en
Example 2:
http://goddam.net/improperuseofmarkup2.html
An entire layout and content, structured with <li> (list) tags.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>omgwtfbbq v2</title>
<style type="text/css" media="all">
body{
text-align: center;
margin: 0;
}
ul.wrap{
display: block;
text-align: center;
width: 702px;
margin: 0 auto;
padding: 0;
list-style: none;
border: 1px solid #000;
}
ul.wrap li.left{
float: left;
width: 200px;
margin: 0;
padding: 0;
}
ul.wrap li.right{
float: left;
width: 500px;
margin: 0;
padding: 0;
}
ul.blocks{
display: block;
margin: 0;
padding: 0;
list-style: none;
}
li.title{
display: block;
padding: 2px 5px;
margin: 0;
background: #999;
}
li.block{
display: block;
padding: 5px;
margin: 0;
}
.clear{
clear: both;
}
</style>
</head>
<body>
<ul class="wrap">
<li class="left">
<ul class="blocks">
<li class="title">Title 1</li>
<li class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
<li class="title">Title 1</li>
<li class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
<li class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
<li class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
<li class="title">Title 1</li>
<li class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
</ul>
</li>
<li class="right">
<ul class="blocks">
<li class="title">Title 1</li>
<li class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
<li class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
<li class="title">Title 1</li>
<li class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
<li class="title">Title 1</li>
<li class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
<li class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
<li class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
</ul>
</li>
<li class="clear"></li>
</ul>
</body>
</html>
Valid Markup:
http://validator.w3.org/check?uri=ht...alidator%2F1.1
Valid CSS:
http://jigsaw.w3.org/css-validator/v... ng=1&lang=en