Best Practices of Browser Tags and Information Structuring?

Yep. Take them to Google, click on the 'cached' link, then click on the "Click here for the cached text only" link at the top of the page.

Then explain that in basic terms, that's basically what Google sees - no flash, no javascript, no pretty pictures.

If they are still happy with their site after that - ask them how much budget they have for PPC......

What a great bit of advice. I am going to have to do that the next time I have a client ask me about drop down menus and javascript additions...

Thanks,

Huck

Chris_d's advice in regards to Google's cached text would work PERFECTLY for an all flash site in regards to clients.

How could I forget about the CSS Validator?

WDG HTML Validator
www.htmlhelp.com/tools/validator/

This validator works nicely espescially since the new version of the W3C validator was absurbly slow when they updated it a couple weeks ago.

To return to a point made by Tedster ..the use of an audio browser can point up errors in your pages such as unclosed tags or "<spam>" very effeciently ( and let you take that break that we all forget to do ...whilst it reads your pages back to you )..

There 's a nice free clean one called "speakonia" that syncs in with 'doze just as well as the paid versions of others ...also helps you to remember to build pages that are accessable for the blind and partially sighted ..MS will let you download for various language voices for free ..better quality ones can be got from AT&T ..for a fee ..

There is also an extension for firefox named "HTML validator" using the "tidy" for off line use ...

You might also want to look at the "veiw formatted source" extension ( some scripts can slow the gecko engine down a little on older machines ..but you can toggle the offending scripts on and off in it )...

Also the "veiw rendered source" extension ...

By which time you'll need to install the sidebar extension if you didn't already just to keep it all managable ..;)

Yep. Take them to Google, click on the 'cached' link, then click on the "Click here for the cached text only" link at the top of the page.

I did that on my one of my own sites earlier this year only to be horrified to see half the page missing and some tables in black with black writing on them! Cleaned up the coding and strangely enough, my rankings got better!

It never occured to me that how IE interprets my actual coding could be completely different from Googlebot's.

Great suggestion to check google's cached text. I just did and was relieved not to find any nasty surprises.

I also did a cleanup a few months ago to become more standards compliant and have seen a subsequent boost in rankings.

"Have you found any effective ways to communicate this fact to the client? Drives me batty when they demand JS Dropdown menus..."

I tend to refer them to some of tedster's threads on this subject if they won't believe me...

For example, with drop menus, they can ask for it, I can make it, but I will tell them that studies have shown that using dropdowns decreases visitor clickthroughs of your site. Flash decreases seo performance, ads to page load times with no benefit to end user in terms of providing them with the information they were looking for, with some very rare exceptions where flash is used properly.

Yep. Take them to Google, click on the 'cached' link, then click on the "Click here for the cached text only" link at the top of the page.

Then explain that in basic terms, that's basically what Google sees - no flash, no javascript, no pretty pictures.

If they are still happy with their site after that - ask them how much budget they have for PPC......

Or you can charge them for the drop down menus, charge them for the extra work required to still present the content to search engines, charge them to create traffic partnerships, and charge them to run their ppc campaign. The fact is, there are only three major sources of free search engine traffic, and lots more qualified sites competing for those top spots. It's quite often much more cost effective to blow off the SE's in favor of other means of traffic acquisition, which also frees you to develop in a myriad of ways that would otherwise be impossible. Myself, I won't buy without pretty pictures. The sites I buy from I usually don't find on SE's either.

Great topic! One thing to think about when planning the structure of your page is the order of your html, or what is referred to as source ordered html. This is done through CSS and positioning. It doesn't make sense to me to have a page that does this...

<body>
<h3></h3>
<p></p>
<h2></h2>
<ul>
<li></li>
</ul>
<h1></h1>
</body>

When it should be the other way around...

<body>
<h1></h1>
<p></p>
<h2></h2>
<ul>
<li></li>
</ul>
<h3></h3>
</body>

Don't you think? ;)

I have been thinking about the placement of tags myself. I have my menus at the top of the page and google often shows them in the results though my pages are not properly formatted as we are talking about. I'm going to have to test out a few things I suppose.

I have been working with a structure based on XHTML tags and references and it seems to be coming along beautifully.

For XHTML 1.1 and any type of validation (markup, 508, WAI, etc) is there a need for this attribute in the HTML tag?

xmlns="http://www.w3.org/1999/xhtml"

To pass WAI this is neccesary I know...

<html xml:lang="en">

I have another suggestion for those looking for useful tools. I hardly ever use new tools unless I really find of them (literally) everyday value and Chris Pederick's Web Developer extension for Firefox simply rocks for helping me check for things I would not normally.

xmlns="http://www.w3.org/1999/xhtml"

It is not required for any validation, but it is considered best practice to include it for XHTML documents. It is not vital.

To pass WAI this is neccesary I know...

<html xml:lang="en">

A couple of things here: firstly, you must declare the language, but not necessarily with an

xml:lang

or

lang

attribute. You can also set the content language as a HTTP header and leave out the attributes altogether. The second thing is that support for

xml:lang

is verging on the non-existent - so in real accessibility terms (ie. net the validator) it is always better to use the

lang

attribute instead. This is just one of the reasons why it is not adviseable to use XHTML 1.1 - you should be using XHTML 1.0 Strict instead.

jab, don't use xhtml 1.1 unless you are using it correctly. Here is the relevant spec [w3.org]:

"Why is it disallowed to send XHTML 1.1 documents as text/html?

XHTML 1.1 is pure XML, and only intended to be XML. It cannot reliably be sent to legacy browsers. Therefore XHTML 1.1 documents must be sent with an XML-related media type, such as application/xhtml+xml."

Setting the mimetype must be done server side, it's not something you can do onpage.

It's a fairly common new xhtml user error to assume that xhtml 1.1 is somehow 'better' or 'cooler' than xhtml 1.0 strict. This isn't the case, it's a very specialized xhtml, and it's not meant for normal use. Since MSIE does not support application/xhtml+xml, there is no way you can create an xhtml 1.1 page that would have any reason to exist, although there are a few obsessive types out there who will actually deliver xhtml 1.1 documents to browsers that support that, and xhtml 1.0 docs to things like msie.

This incorrect belief is not unlike having your volume knobs on your amplifiers go up to 11 like spinal tap did because, well, 11 is bigger than 10...

I'm aware of the application/xhtml+xml mimetype but (on my personal site) won't be implementing it except on test pages via PHP header syntax when developing new pages (or the new version of my site). How is 1.1 specialized and for what?

How is 1.1 specialized and for what?

[webmasterworld.com...] msg #2 ;)

This incorrect belief is not unlike having your volume knobs on your amplifiers go up to 11 like spinal tap did because, well, 11 is bigger than 10...

heh heh ..luv it ;)
Currently fixing a site for a client just 'cos of this sort of fad ..some hotshot website builder out clevered themselves into makng a site that can only be read on their machine ( or something tweaked to the point where I have to apologise to my monitor each time I fire it up to uncrypt what they made ..KISS is always the best way )..not every one has the absolute latest bling updated browser /OS combo out there...
...or uses it to look around the shark infested hypersoup .

It may become necessary to add to the flash "skip intro" buttons
<..yep.. much though I personally love flash ( too much chemical recreation when younger I guess ;) ..most folks'es "skip" buttons only show up after the interminable loading has near finished ..very impolite to those on dial-up... >
another option ..
"please click here if you have over I gig of ram and DSL and a CPU bigger than a mustang engine "..
( at which time you can activeX their eyeballs to the calender on the backwall with a clear consciense ;)..
"they" are probably only compensating for deficiencies elsewhere...

Seriously though as 2x4 intimated ..being on the bleeding edge of Wc3 doctypes or anything else is restricting your market /audience ..as is using pure zen garden CSS ( much though I am begining to let such layouts grow upon me ) never forget we are ..by the sole act of being here ..either geekier or more addicted to bathrobe living than your average joe or jane surfer ..most of them only change/update their machines when they discover that there is a new DVD burner /gadget that will let them copy /share /MP3 ( is that a verb now "MP3"? )..what they should normally pay for ..

But they do have the little "coupures" that add up to websites that make money ...so cater to them ..and their old rigs ..better they spend their money with you than on a multi layer DVD burning /reading combo unit ..

apologies for the digression ..but it was in danger of getting a little too "trees" and not enough "wood" there for a while ..BTW.. Jab..the extensions I mentioned integrate just fine into the webdev toolbar extension and complement /improve it's source capabilities very well ..

"either geekier or more addicted to bathrobe living than your average joe or jane surfer .."

Never use bathrobes, and I have been known to get out of my baggy sweatpants well before 5 pm. Sometimes anyway... I even left the house today..

re 1.1, it's not the next stricter XHTML, 11 on the knob that is, it's a different animal altogether, with a completely different purpose. If you aren't aware of these issues, you shouldn't be using these things, unless you actually have a real reason to do so. It always cracks me up to see pages serving 1.1 up, minus the correct mimetype of course, which is just wrong, incorrect, and totally pointless. The browsers see nothing but basic error filled html tag soup, but they try to ignore the error and render the page anyway.

...combined with other markup languages such as MathML or SVG...

So what are these languages about and whats a simple real life situation that both would be used in? Between XHTML 1.0 Strict and XHTML 1.1 what two contrasting situations would help me better understand which I should choose?

When I first visited Apache's site I couldn't unstand most of the documentation. I still can't understand a majority of it but I've come a little way. The same is with the W3C. Though I do understand the syntax more, I do not see anything (for example) flagging the topic of this discussion on the difference between XHTML 1.1 and 1.0. Is 1.1 not the proper continuation and evolution of HTML? I'll sit tight on that topic...

I'm not sure about other people but I type my messages while fully clothed! I'm doing my best to work with as current of technologies as possible while not creating issues for people viewing my work (which is mostly just my personal site heh). CSS Zen is nice but their code setup is alien to me.

"XHTML 1.0 Strict and XHTML 1.1 what two contrasting situations would help me better understand which I should choose?"

At this point in your web career, I can think of no time you'd ever use XHTML 1.1. Since MSIE does not support its mimetype, it can't be used commercially, although there might be some intranet type apps where it would make sense. SVG also I believe has no support currently, although it's coming soon.

Basically, I'd say, if you have to ask this question, you shouldn't use 1.1.

In spite of what leosghost said, I think the problems that this thread is bringing up stem from having too much "wood" (XHTML 1.1) and not enough "forest" (fundamental concepts). :-)

One of the most comprehensive presentations of HTML theory and practice was written by Jukka Korpela [cs.tut.fi] for HTML 3.2. (That site has been around for years and is an established authority, so I hope the link will be permitted.) Gah! HTML 3.2?!? You bet. 95% of it is still applicable, and Jukka has always had one of the deepest grasps of what markup is all about of anyone writing on the web. Learn everything on that site, and you'll understand the web better than 99% of the people who make webpages.

Thank you for that superb reference, rjohara. I feel embarrassed that I haven't heard of Jukka Korpela before. Extremely impressive!

I'll drop xhtml (in this thread at least ;-)) as I agree (about wood? heh).

One question I have is how will putting links in an ordered or unordered list benefit you from not?

Aside...
I am working on a single page to display all html tags (valid in xhtml of course) with examples of their minimal acceptable usage (attributes and values) as a reference page that I will share later on in hopes of refining it to meat standards (mostly accessibilities).

Nice reference rjohara! I think a lot of what is there is relavant but I dislike the idea of using markup for presentation as in <b> <hr> and some other tags as someone else earlier mentioned.

I dislike the idea of using markup for presentation

Huh ..!
That's exactly what" markup" ( in the hyper text markup language ) means!... presentation!

Otherwise we'd write "dear surfer... imagine if you will that the following line is in verdana and red and one inch high"

Take a break jab ..walk around some ..outside ...the strain is starting to tell ;)

Opps I meant presentation? Right idea wrong words! Hey it's early for me ok? :-D

This stuff is my break! Better that I do this in my iddle college years then when I've got big ($) clients.

That's exactly what" markup" ( in the hyper text markup language ) means!... presentation!

Huh? (again)

We must be confused about something here. The fundamental idea behind HTML is the separation of structure and presentation. HTML is about structure, CSS (built into the browser or externally written) is about presentation. HTML is not about presentation! That is the job of CSS.

A computer file is just a string of characters: it has no line breaks, no fonts, no paragraphs, not tables. We mark up the string of characters to indicate the structures it contains (paragraphs, emphasis, headlines, table rows, etc.) so a computer can recognize them, and then the computer applies presentational instructions to make the structural elements look (or sound!) a particular way. The missing piece that many people don't realize is that every browser, including Lynx, has a built-in set of presentation rules -- a built in style sheet -- that is the default. These built-in style sheets tend to be rather inelegant, but they work. When we write an external CSS file, what we are doing is telling the computer to override its built-in presentational rules with new rules that we specify. And what sorts of "rules" do CSS files contain? They contain rules telling the computer how to present each of the structural elements that have been labeled by HTML tags in the original file.

HTML = structure
CSS = presentation

There was no real issue concerning that in this thread in the first place.

I am still curious to the benefits or reasons behind menu hyperlinks being used as ol or ul's.

"List" is a semantically accurate description of what a menu is - the ol or ul markup describes a menu quite well and other kinds of mark-up that I can think of would not convey an accurate semantic meaning.

There was even a <menu> tag in html which took <li> children, but that element was deprecated as long ago as html 3.0. Since there is now strong CSS support in browsers for changing the appearance of lists, it makes a lot sense to use a list, as was always intended by the W3C, but seldom practiced,

For vertical menus, using uls works very well, although you need to test the display components cross browser to get a sense of the differences between browsers, which are pretty major. The browsers treat ul/ol/li slightly differently. But that's my preference now, since it's pretty easy to get a good stable display.

For horizontal menus, it's much more complicated, and much harder to get a stable display. I always try using uls horizontally, but I almost always end up dumping them because of display stability issues cross browser. This problem is especially marked when resizing text in for example Firefox. The most stable method can involve uls/lis, but it requires a bunch of little hacks and tweaks to get it fairly solid. Definitely something to try during your college days though, it's how you learn.

The Lynx test is definitely a good one though in terms of really seeing what the structure is doing on the page pre css.

I found a working (Gecko, MSIE, Opera) ul drop down menu but it uses IDs instead of classes. The thread with the code is here...
[webmasterworld.com...]

A menu tag actually sounds useful for SEO purposes as a seach engine would be able to understand normal menu items from ordinary hyperlinks.

Any opinions on using CSS in conjunection with class or id attributes?

I make a document from headings, paragraphs, lists, tables, and forms, and style those defaults.

I then use a class for any exceptions, like:
<ul class="nav"> and <p class="footer"> etc.

It makes for a very simple stylesheet, as the class definition will only contain the differences to the normal rules for that block element.

The style for the links in the navigation bar would be defined using something like:
ul.nav a {the style}
which simplifies things even more (not least of which is adding the class just once to the enclosing <ul> tag instead of having to add it to every single <a href=...> tag in the list).

I am yet another print designer turned web developer and I had a hard time understanding the value of XHTML and CSS at first.

By now, there is certainly no confusion that HTML is for labeling content (or marking it up) to help machines and screen readers understand the semantics of the content. CSS is to control the aesthetics.

The biggest thing I learned in my design process once I really wrapped my brain around it was that the content is the design. There is no page to design without the content. We used to start our web dev projects with design mock-ups because the client wants to see what the site will look like. What mark-up taught me was that design was a discovery process, not an expression as it is with art. I now share with all of my clients that design is our last step. We have no idea what the site will look like until we have pulled all of the pieces together.

With content in hand, we start by semantically labeling all of the written elements. Then I make a dummy sheet with all of the elements and begin dividing them into logical divs. From there I can start sketching how I might arrange them on the page as well as how I would stylize them (meaning colors, typefaces, and graphics). I can't tell you how liberating it has been and how much better my designs are. And since I pulled the design from the content, they easily scale when new content is added.

Our shop has found that hand-coding a site takes less time than a wysiwyg editor. We've also slashed design time by half and our final products are winning awards now. Not to mention, that we don't even think much about SEO anymore because our sites are naturally effective. We save our clients a grip of cash on redesigns since we don't have to redo their HTML and I no longer dread making updates on a site in fear of the sloppy, flacid code I might encounter.

And BTW, our code comes out looking very military. We actually take pride in the fact that our HTML is so clean. Message me and I'll send you some URLs. I'd also be happy to answer more specific questions to aid the transition.