html with "content first" discussion...

**Chroniclemaster1** · Aug 23, 2007 22:57

Yes. My point is that if the content is first you typically don't even need that. If you want one you can add one.

Here's the thing, text browsers, keyboard users, and adaptive techonology all three typically tab through page structure. Now if you have a lot of tab points in your content there's a benefit to it (lots of inpage links, form elements, etc.) But for many webpages, you tab twice and you've moved through all the text content no matter how verbose and you're in the navigation at the end of the code.

So when content comes first, there's really no barrier to getting to the navigation. It's very easy and natural.

That's not true the other way around. When navigation comes first, the user has no idea how many times to tab to get to the content. I've seen blind users go to a website hit tab, wait, it's another nav link, tab, wait, it's another nav link, tab, wait... I've seen people in classes walk through 50+ links that way, trying to find content. That's insane. Content should come first.

**Dan Schulz** · Aug 23, 2007 23:24

And how many of those pages included appropriate skip links? I'll bet none of them did.

**wyrd33** · Aug 24, 2007 03:20

I have to be honest, I've never heard of anyone browsing a web site using their tab key. I use my mouse wheel to be honest.

Either way, I've learned a lot from this thread. For kicks, I went to some of your web sites in your signatures. I came across this web site: http://www.autisticcuckoo.net/blog.php Typical blog, yes? Well, after reading the post from the owner, who says he tabs through his content, I decided to hit the tab key. A "jump to navigation" link popped up in the upper left hand corner on the very first tab press. Very nice.

Anyway.. just something interesting I thought I'd throw out there for the conversation.

**all4nerds** · Aug 24, 2007 03:22

Hello

OK content first it is

, no floats , 2 columns follow center, 3 real columns, free standing with borders, usable in IE 6

and yes maybe you can bring all your designs to the scrap heap because this has potention and is more what the wc3 had in mind

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>12345 12345 12345 12345 12345</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css">
	html,body{height:100&#37;;}
	
	*{padding:0;margin:0;}
	
	body{
	background:#ccccff;
	font-size:.76em;
	font-family:Verdana, Arial, Geneva, Helvetica, sans-serif;
	}
	
	div,h1,h2{font-size:1em;}
	
	.ab,.left,.right{position:absolute;top:0;}
	
	.ab{
	left:0;
	width:100%;
	background:#ccccff;
	}
	
	.header,.footer{height:94px;}
	
	.header{background:#ffcccc;text-align:right;border:1px solid #000000;margin:1em;}
	
	.middle{
	position:relative;
	background:#ffccff;
	text-align:right;
	min-height:100%;
	margin:-10.2em 12em 0 12em;
	border:1px solid #000000;border-top:none;
	}
	
	.left,.right{width:9.8em;border:1px solid #000000;border-top:none;top:11em;bottom:0;}
	
	.left{
	background:#ffcc99;
	left:-11em;
	}
	
	.right{
	background:#cccc99;
	right:-11em;
	}
	
	.footer{
	background:#cccccc;
	margin:1em 1em 0 1em;
	border:1px solid #000000;
	}
	
	p{padding:.2em .5em .2em .5em;}
	
	.middle h1{padding:.2em .5em .2em .5em;border-top:245px solid #000000;}
	.left h2,.right h2{padding:.2em .5em .2em .5em;border-top:112px solid #000000;}
	
	.x{height:1em;font-size:.5em;line-height:.5em;}
	</style>
	<!--[if IE]>
	<style type="text/css">
	* html .middle{height:100%;}
	* html .left,* html .right{height:60%;}
	* html .footer,* html .header,* html .middle{position:relative;}
	</style>
	<![endif]-->
</head>
<body>


<div class="middle">
<h1>content</h1>
<p>
middle
<!-- 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
 -->
end
</p>
<div class="left">
<h2>content</h2>
<p>left end</p>
</div>
<div class="right">
<h2>content</h2>
<p>right end</p>
</div>
</div>

<div class="footer"><p>footer</p></div>
<p class="x">&nbsp;</p>

<!-- -->
<div class="ab">
<div class="header"><p>header</p>
</div>
</div>


</body>
</html>

**Skyblaze** · Aug 24, 2007 03:33

until now i think the best way maybe is to put navigation first (not exagerately long) so the search engine can follow all of our site pages, and then put a "skip to content" link for screen readers etc. What do ya think?

**Dan Schulz** · Aug 24, 2007 03:52

That's what I've been doing ever since I started using CSS and semantic markup.

**all4nerds** · Aug 24, 2007 03:58

Originally Posted by Dan Schulz

That's what I've been doing ever since I started using CSS and semantic markup.

Hello

Content first we want, with maybe the main links left right or on top in the content box ?

with semantic clean simple A Tags with br after them

**Dan Schulz** · Aug 24, 2007 04:04

Which completely ignores proper source code order.

**all4nerds** · Aug 24, 2007 04:10

Originally Posted by Dan Schulz

Which completely ignores proper source code order.

No, it's not, you are looking at names left right header footer , you can do pages without any names like my demo's, how do you know were they should be ? only by a name ?

mine is in source order ! content first !

I use the container I want at the top in source order

how you can move away from it needs no menu terror, just a few links
And like my little any container first demo, you can have it to your needs if you think a link set is more SEO then content ?

PS I trash code ? were is everybody's else code ?

Content first or any other container in the source order, no more no less ! no ID nor Class name what so ever, got you ! did i not

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>12345 12345 12345 12345 12345</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<!--[if lt IE 7]><script src="../../../IE6-7/IE7_0_9/IE7_0_9/ie7-standard-p.js" type="text/javascript"></script><![endif]-->
	<style type="text/css">
	html,body{height:100%;}
	
	*{padding:0;margin:0;}
	
	body{
	padding:0 12em;
	background:#ffccff;
	font-size:.75em;
	font-family:Verdana, Arial, Geneva, Helvetica, sans-serif;
	}
	div,ul,li,h1,p{font-size:1em;font-weight:100;}
	
	ul{list-style:none;}
	
	div,div+div,div+ul{min-height:100%;margin-top:-8em;}
	
	div+ul{float:right;}
	
	div,div+div{float:left;}
	
	body>div{
	background:#ccccff;
	width:100%;
	margin-right:-100%;
	text-align:right;
	}
	
	div+div{margin-left:-12em;background:transparent;text-align:left;}
	
	div+div,div+ul{width:12em;}
	
	div+ul{float:right;margin-right:-12em;}
	
	div+ul+ul{
	min-height:8em;
	clear:both;
	background:#cccccc;
	margin:0 -12em;
	text-align:left;
	position:relative;
	}
	
	p,li{padding:.2em .5em .2em .5em;min-height:1%;}
	
	div+div p,h1,div+ul li{padding:16.2em .5em .2em .5em;}
	
	ul+ul+div{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	background:#ffcccc;
	text-align:right;
	min-height:8em;
	height:8em;
	margin:0;
	z-index:100;
	}
	</style>
</head>
<body>

<div><h1>vvvv</h1></div>

<div><p>xxxx</p></div>

<ul><li>yyyyy</li></ul>

<ul><li>zzzzz</li></ul>

<div><p>wwwww</p></div>

</body>
</html>

**Dan Schulz** · Aug 24, 2007 13:34

You know what? I give up. I'm not going to engage in a debate where tempers flare and people start getting emotional and personal.

Next time it happens, I'm dragging an Advisor in to clean things up.

**all4nerds** · Aug 24, 2007 22:24

Originally Posted by Dan Schulz

Next time it happens, I'm dragging an Advisor in to clean things up.

Hello

Please Do

clean up ? i only showed how you can do it , i stay out of any discussions why and why not, and I can have my own views on things or not ?

**markbrown4** · Aug 25, 2007 00:15

I'm going to side with Tommy on this, his voice should be the most authoritive of any here about accessibility.

I personally put the content first, because that's what I prefer to encounter. I go to a web page to read the content, not to go somewhere else immediately.

For a screen-reader user Content First is best, also it does have some effect in SEO. This post in the SEO or Accessibility Forums would turn up different answers perhaps...

**Dan Schulz** · Aug 25, 2007 01:19

The SEO benefit would be minimal.

**AutisticCuckoo** · Aug 25, 2007 10:03

Originally Posted by markbrown4

I'm going to side with Tommy on this, his voice should be the most authoritive of any here about accessibility.

Thanks for the vote of confidence, Mark.

However, in this case I'm only conveying my personal preference. Accessibility-wise, I don't think it matters – at least not as long as you have a skip link.

Studies and questionnaires show that there's approximately a 50/50 distribution when it comes to this preference, and that includes screen reader users.

**Chroniclemaster1** · Aug 25, 2007 19:44

me too.

If for some reason you choose to put navigation first, you can certainly use one. In fact I would say that it's absolutely critical that you do.

I simply was saying that I can't think of any reason why you would benefit by having the navigation first in code. Whereas, content first has a couple accessibility related benefits. And the tab order of most browsers automatically delivers a more intuitive user interface when content comes first. Ergo, that's how I structure my HTML.

User Tag List

Thread: html with "content first" discussion...

Thread Tools

Display

Bookmarks

Bookmarks

Posting Permissions