Page is a not externally linkable
DrDoc - 5:40 am on Mar 2, 2006 (gmt 0)
The example below is just a quick first look at what can be done. It's not all that fancy and exciting, perhaps. But it applies simple principles which are applicable regardless of the layout you are seeking after. CSS: <h1>Pure <acronym title="HyperText Markup Language">HTML</acronym>.</h1> <ul><li><a href="#intr">Introduction.</a></li><li><a href="#elem">Allowed Elements.</a></li><li><a href="#attr">Allowed Attributes.</a></li><li><a href="#summ">Summary.</a></li></ul> <ul><li><a href="http://www.webmasterworld.com/">Webmaster World</a></li><li><a href="http://www.webmasterworld.com/forum116/">Accessibility and Usability</a></li><li><a href="http://www.webmasterworld.com/forum83/">CSS</a></li><li><a href="http://www.webmasterworld.com/forum91/">JavaScript and AJAX</a></li><li><a href="http://www.webmasterworld.com/forum9/">Foo</a></li></ul> <h2>Introduction.</h2> <p>This is a page which is constructed without using any wrapper elements, such as divs or tables used for layout. The purpose behind this exercise is to determine whether it is possible to construct a page which is both as simple as possible, while at the same time pleasing to the eye. As you can see, the answer is yes!</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse feugiat enim mollis nisi. Pellentesque auctor diam ut justo. In faucibus, orci nec condimentum venenatis, orci pede dignissim diam, sit amet rutrum mi nisi eget pede. Integer imperdiet, sapien molestie tristique iaculis, nisl arcu suscipit felis, nec aliquet orci dolor a neque.</p> <h2>Allowed Elements.</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse feugiat enim mollis nisi. Pellentesque auctor diam ut justo. In faucibus, orci nec condimentum venenatis, orci pede dignissim diam, sit amet rutrum mi nisi eget pede. Integer imperdiet, sapien molestie tristique iaculis, nisl arcu suscipit felis, nec aliquet orci dolor a neque.</p> <p>Although I personally find the selection of elements objectionable and lacking, for the purposes of this exercise the allowed elements are limited to the following:</p> <ul><li><code>A</code></li><li><code>ABBR</code></li> <p>One can, indeed, wonder why the ability to use a table should be prohibited. Yes, I understand that table <em>layouts</em> should not be used, but there are several perfectly valid uses for both tables and other elements not included in the list above (such as <code><abbr title="division">div</abbr></code> and <code>style</code>). Meanwhile, elements like <code>span</code> are allowed.</p> <h2>Allowed Attributes.</h2> <p>I object to the selection of attributes in the same manner as I did with the elements, although I find the attribute list much more lacking. There are, for example, no <code>type</code> or <code><abbr title="source">src</abbr></code> attributes. Limiting? Yes. Regardless, for the purposes of this exercise the allowed attributes are limited to the following:</p> <ul><li><code>abbr</code></li><li><code>accesskey</code></li> <h2>Summary.</h2> <p>While this is in no way a complete and flawless example of how to power "pure <acronym title="HyperText Markup Language">HTML</acronym>" with <acronym title="Cascading Style Sheets">CSS</acronym> and —as I mentioned above—the exercise is too limiting to warrant 100% real-life application, it demonstrates that it <em>is</em> perfectly possible to create nifty layouts using a lot of wrappers and "fluff" elements resulting in code bloat.</p> <p>I do in no way claim to have created a 100% accessible and usable layout either. In fact, I find the element and attribute selection too limiting to ensure complete accessibility and usability under all circumstances. However, the purpose of this exercise was not related directly to accessibility and usability, although certainly related to it. Instead, the purpose of this demonstration is to show that nice and clean code is not necessarily limiting from a design perspective.</p> </body> So, is it worth it? Not really. Wrapper elements and "sectioning" of a page is not always bad. In fact, by not using wrapper elements the CSS itself gets bloated. So, I guess it is a question of whether you would rather live with bloated CSS or bloated HTML. One could argue that since the external stylesheet is cached that you actually save bandwidth. While this is absolutely true, the "HTML bloat" caused by a few extra elements is so small it can be ignored. Especially considering how quickly the bloated CSS becomes difficult to manage, maintain, and update. Although this is a very simple example, the stylesheet above is quite crazy. Lots of re-defining of various styles. In my opinion, the disallowance of IDs itself makes the exercise ridiculous. It also makes in-page navigation difficult. [edited by: encyclo at 9:07 am (utc) on Mar. 2, 2006]
CSS2 support is an absolute must for an exercise like this to even be considered. I have, therefore, added a conditional comment to Dean Edwards' IE7 fix [dean.edwards.name]. Without reliable CSS2 selectors, the whole effort of creating a pleasing layout utilizing no wrapper elements quickly becomes silly.
* {
border: none;
font-style: normal;
font-weight: normal;
list-style-type: none;
margin: 0;
padding: 0;
}
ul {
float: left;
margin-bottom: 1em;
padding-left: 3em;
}
li {
display: block;
float: left;
width: 8em;
}
ul+ul {
background-color: #fff;
float: right;
margin: 0;
padding: 10px;
padding-right: 1px;
padding-top: 0;
}
ul+ul li {
background-color: #fa0;
border-bottom: 1px solid #fff;
color: #300;
float: none;
padding: 5px;
width: auto;
}
ul+ul li::before {
content: ">";
}
ul+ul li a {
color: #300;
}
abbr, acronym {
cursor: help;
}
body {
font: 100%/130% Verdana;
margin: 0 auto;
padding: 10px;
width: 750px;
}
h1 {
background-color: #099;
border: 3px double #fff;
color: #fff;
font-size: 2em;
padding: 0 5px 1px;
}
h1::first-letter {
background-color: #fff;
color: #099;
font: 1.1em 'Times New Roman';
padding: 3px 2px;
}
h1+ul {
padding-left: 1px;
}
h1+ul li {
border-bottom: 1px solid #fa0;
border-left: 5px solid #fa0;
display: block;
float: left;
margin-right: 5px;
padding: 5px;
padding-right: 40px;
width: auto;
}
h1+ul li a {
color: #099;
display: block;
}
h2 {
border-bottom: 2px solid #c00;
clear: left;
color: #c00;
font-size: 1.5em;
}
h3 {
clear: left;
font-size: 1.3em;
}
h1+p, h2+p, h3+p {
text-indent: 3em;
}
h2, h3, p {
margin-bottom: 1em;
}
p {
line-height: 2em;
}
ul+p {
clear: left;
}
HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Pure HTML</title>
<!--[if lt IE 7]><script src="IE7/ie7-standard-p.js" type="text/javascript"></script><![endif]-->
</head>
<body>
<li><code>ACRONYM</code></li><li><code>ADDRESS</code></li>
<li><code>AREA</code></li><li><code>B</code></li>
<li><code>BLOCKQUOTE</code></li><li><code>BODY</code></li>
<li><code>BR</code></li><li><code>BUTTON</code></li>
<li><code>CAPTION</code></li><li><code>CITE</code></li>
<li><code>CODE</code></li><li><code>DD</code></li>
<li><code>DFN</code></li><li><code>DL</code></li>
<li><code>DT</code></li><li><code>EM</code></li>
<li><code>FIELDSET</code></li><li><code>FORM</code></li>
<li><code>H1</code></li><li><code>HEAD</code></li>
<li><code>HR</code></li><li><code>HTML</code></li>
<li><code>IMG</code></li><li><code>INPUT</code></li>
<li><code>KBD</code></li><li><code>LABEL</code></li>
<li><code>LI</code></li><li><code>LINK</code></li>
<li><code>MAP</code></li><li><code>META</code></li>
<li><code>OL</code></li><li><code>OPTGROUP</code></li>
<li><code>OPTION</code></li><li><code>P</code></li>
<li><code>PARAM</code></li><li><code>PRE</code></li>
<li><code>Q</code></li><li><code>SAMP</code></li>
<li><code>SELECT</code></li><li><code>SPAN</code></li>
<li><code>STRONG</code></li><li><code>SUB</code></li>
<li><code>SUP</code></li><li><code>TEXTAREA</code></li>
<li><code>TITLE</code></li><li><code>TT</code></li>
<li><code>UL</code></li><li><code>VAR</code></li></ul>
<li><code>alt</code></li><li><code>dir</code></li>
<li><code>for</code></li><li><code>hreflang</code></li>
<li><code>label</code></li><li><code>lang</code></li>
<li><code>longdesc</code></li><li><code>summary</code></li>
<li><code>tabindex</code></li><li><code>title</code></li>
<li><code>usemap</code></li></ul>
</html>