Valid XHTML Strict!! ARG..!

[TheFilmGod]

An "id" is a unique identifier. Each time this attribute is used in a document it must have a different value. If you are using this attribute as a hook for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exactly one element).

 

This is what I get when trying to valid my xhtml. From what I understand, this means I can't use the same ID twice in a document. My question is, why is this so? I though class and ID where the same darn thing in XHTML!!! Arg!!!

 

If I choose to not fix this problem will there be a problem? When I create webpages this is how I do it:

<div id="bodytagthing1" class="count">

Content yeay yeah... 

</div>

 

So this allows me to have a class that works the font out and an id that works out the structure of the xhtml. If I wanted to make it valid I would have to do this:

 

<div class="bodytagthing1">

<p class="count"></p>

</div>

 

I am correct? And coming back to my previous question, is it okay to safely ignore the stupid error messages and just not have valid code??

[roopurt18]

What happens when your Javascript does this when you have non-unique IDs?

 

  var el = document.getElementById("nonUniqueID");

 

(It breaks.)

[TheFilmGod]

That makes quite a lot of sense, but in that situation I would set it up so there is a unique id. Only to the place where I need javascript. Typically I don't use javascript. I just stick with php and when I need cool looking effects I go to CSS. Once in a while I need javascript to work and hey! I use a unique id. Would that work???

[php_tom]

It would 'work', but it wouldn't make your page xhtml valid.

[keeB]

Why don't you use the CLASS attribute instead of ID attribute for non-unique identifiers.

 

Isn't that one of their main differentiations (aside from subclasses, etc?)

[ToonMariner]

Its odd - people not understanding why a validator is telling you your code is NOT valid but as it 'works' the developer oftern doesn't see the problem.

 

It is indeed the case that id should be for a solitary, unique element on a page and shoudl NOT appear in multiple places.

 

for styling purposes Keeb rightly states that classes allow you to style multiple elements the same way...

 

stick to the standards and you won't get invalid markup...

[dbrimlow]

A good rule of thumb to get used to is deciding how to ALWAYS use IDs and classes in the first place.

 

IDs should be used to set up those major one time, blank layout structural elements on the page:

main container, heading, navbar, columns (left/right nav, content) and footer.

 

Use Classes for styling the pages "content" - so it can be used repeatedly on the page.

 

 

 

 

[TheFilmGod]

I have reconsidered, and I have changed my xhtml to be valid. I can't sleep at night thinking I did something "not valid." LOL! 

 

Its just surprising for me. I thought id and class were like the same thing. But I guess not.

 

 

Anyways I did have a question. Is there a way to call more than one class at a time?

[roopurt18]

How do you mean?

[ToonMariner]

yes

 

you can have stuff like

 

<p class="red bold"></p> (notice the pace between the two classes

 

css...

 

.red{ color: #f00;}

.bold{font-weight: bold;}

 

 

shoudld provide you with bold red text.

[TheFilmGod]

ToonMariner, thaks for a great reply.

 

Since I now know how to call up multiple classes, I don't have to worry about nonunique ids. Its solves a huge problem! 

 

Last thing, which code is better?

 

<div class="bold">

<span class="red">Hello I am Text</span>

</div>

 

 

Or,

<div class="bold red">

Hello I am text

</div>

[roopurt18]

I'm not sure that IE6 likes multiple classes.  Be warned.

[dbrimlow]

Last thing, which code is better?

 

LOL!! Neither! You should NEVER leave text hanging out there bareassed and exposed to the world.

 

Text should always be contained within a block level element of some kind ... (paragraph, list, heading).

 

The thing most people forget is that a web page was initially intended to convey a text document properly structured like within a word-processor. A PROPERLY structured web page is almost exactly like a word document - it should have headings (h1 - h6) Paragraphs, bullets, etc.

 

Styling how it actually looks is SECONDARY.

 

The problem with 99% of the web pages generated since 1998 is that they were crafted based on how they LOOK first and what they convey last.

 

Luckily, CSS came along to attempt refocusing web coders back to correct markup structure. And it is still taking a long time for people to "get it".

 

To answer your question, however, what is "better", so long as the structure is properly adhered to, is LESS. Use the fewest elements to perform the same task:

 

So, this:

 

<div class="bold">

<span class="red">Hello I am Text</span>

</div>

is better as this:

<div class="style1>
<p>Hello I am Text</p>
</div>
With the css having styled it as:

.style 1 {
color:"red"
font-weight:bold
}

 

And you CAN use multiple classes (it is what they were created for) in any browser:

 

<div class="style1>
<p class="style22">Hello I am Text</p>
</div>

 

Is just fine.

 

Try to avoid "Divitus". The point is to keep your markup clean and lean - making the styles sheet do all the work.

 

[Daniel0]

Its odd - people not understanding why a validator is telling you your code is NOT valid but as it 'works' the developer oftern doesn't see the problem.

 

Right... suppose you speak like Yoda in Star Wars. Other people might understand what you say, but you are still not using correct syntax.

Humans are pretty smart, so they can "automatically" figure out what the person actually meant.

 

Computers are not smart, so the developers of the browsers has to say "hmm... what if the web developer didn't write valid code?!".

 

Last thing, which code is better?

 

<div class="bold">

<span class="red">Hello I am Text</span>

</div>

 

 

Or,

<div class="bold red">

Hello I am text

</div>

 

Neither... image that you wanted to change everything that is red to blue? You'd either have to change .red to have color: blue; or you'd have to go find all the places the class red is used and change the class. You should name the classes after what it is and not how it should look (e.g. title).

[TheFilmGod]

Reply to last post.

 

I know that you should use a good name for your styles like "title." I know my example was weak and didn't get the message across. I wanted to know what is the best way to call up 2 classes. Using the class="... ..." or putting it in one div and then in the span tag. I wasn't asking about the content itself...

 

Reply to the post about structuring everything correctly:

 

What do you mean? I don't understand why its so wrong to have <span class="title">Hello I am text</span> .

 

But you said to use <p class="..."> instead. It creates the same thing doesn't it? Why would users care if they saw the same thing?

 

... Please don't fry me, I'm new to css, I've been doing it only for a month and I think I'm really good at it for just a month of css. You can see my work in the website critique forum posted by "Long Term Project..."

 

Thanks! 

[ToonMariner]

awwww I'll be nice to you film god...

 

its all about semantic markup.

 

the two examples you gave to assess which were 'better' (and others correctly pointed out neither were 'good') do not actuall MEAN anything.

 

when we read something it is broken up into textual entities that we recognize...

 

think of a typical news paper article A GREAT BIG TITLE - A Sub Title - the article itself....

 

OK firts two dead easy H1 and H2...

 

the article can hove lots of textual entities.  Text that we read 'as a story' is broken up into paragraphs to make it easier for us to read.  spot information could be displayed in a bullted list - they are points that we need to know but have no contextual bearing on the 'story'...

 

so look at your content and assess what type if text it is. if its a title of a section give it h1, sub title h2, paragraph p.... and so on

 

a span is used to provide a text holder where you can apply some different display (or aural) rules but has no meaning in terms of changing the actual context of the text in which it sits.....

 

 

Hope my rant was understood etc etc (had big book for brekkie!)

[TheFilmGod]

Although I agree that semantic code helps the programmer, how does it benefit the user? Does the user benefit from it in anyway?

 

Take this site for example (under construction)

 

beastit.com/index2.htm

 

There you will find different sections of content, or as I like to call it, tabs. Does a title of the tab, like "Beast of the Day" be done like this:

 

<h1>Beast of the Day</h1>

 

instead of <div id="beastoftheday" class="title">Beast of the Day</div>

 

I really don't understand. It creates the same thing on the browser.

[Daniel0]

Although I agree that semantic code helps the programmer, how does it benefit the user? Does the user benefit from it in anyway?

 

Take this site for example (under construction)

 

beastit.com/index2.htm

 

There you will find different sections of content, or as I like to call it, tabs. Does a title of the tab, like "Beast of the Day" be done like this:

 

<h1>Beast of the Day</h1>

 

instead of <div id="beastoftheday" class="title">Beast of the Day</div>

 

I really don't understand. It creates the same thing on the browser.

 

Well, "Beast of the Day" is a header (title), so it should have a header tag.

 

I'd probably give your main title (BEAST IT) the <h1> tag and then put the text BEAST IT inside it and use CSS to display an image instead. In that way search engines would for example still be able to read your title. Next I'd give titles like "Beast of the Day" <h2> tags. Inside that box you have titles like "Picture of the Beast", that would then be <h3>. And so forth...

 

It also helps on SEO as you'll build up a sort of structure of the site. If you choose "Show outline" on W3C's validator, then you can see it:

http://validator.w3.org/check?uri=http%3A%2F%2Fbeastit.com%2Findex2.htm&charset=%28detect+automatically%29&doctype=Inline&group=0&outline=1

 

 

This is what you're able to semantically extract from your page:

http://www.w3.org/2005/08/online_xslt/xslt?xmlfile=http%3A%2F%2Fcgi.w3.org%2Fcgi-bin%2Ftidy-if%3FdocAddr%3Dhttp%253A%252F%252Fbeastit.com%252Findex2.htm&xslfile=http%3A%2F%2Fwww.w3.org%2F2002%2F08%2Fextract-semantic.xsl

[dbrimlow]

FilmGod, you are getting caught up in the trap most newbies and non-pros who "make" websites always do.

 

You are building a house based on nothing but how it will look and with no regard for engineering plans or blueprints.

"Why use a poured concrete foundation? The ground looks solid enough to me".

"Look, just slap some plywood on the ground so we can lay down those nice tiles".

"We don't need any columns or beams, the blue siding and roof can be stapled right to the studs ... it looks fine, doesn't it?"

"listing? It doesn't look like it's listing from here within the Microsoft construction trailer. Frankly, I think it looks great ... put the for sale sign on the lawn".

 

See what I mean? A website requires a proper structural foundation. Without it, it may look fine (particularly if you are looking through those Microsoft rose colored windows that hide all the flaws) but it IS going to collapse sooner or later.

 

A website has two things:

 

1. code and structure,

 

2. style - how it looks.

 

One has nothing to do with the other.

We can create an unlimited number of awesome looking diverse websites all using one the same, simple, perfectly coded markup document "blueprint".

 

I mean, consider that for a moment. If you create a perfectly structured text-only html file, with absolutely NO intention of putting any style on it whatsoever ... any of us can take that perfect file and with css create thousands upon thousands of completely unique, stunning, magnificent web sites - because the perfect document follows the rules, the css can be infinitely changed and crafted with confidence that it will always "look" as intended.

 

If the markup document, however, has no proper structure, but "looked" good as one intended it to, testing it only in, say, IE6.0. That file does not follow any known rules. It will not follow easily do as instructed by a css command ... it will need to be "adjusted" for, and that is when you turn css from a science into an "art" that requires trial and error, time, finesse and talent to make a simple thing look good.

 

Dave

 

 

[ToonMariner]

thats what happens at css zen garden same mark up different style sheets.

[keeB]

thats an amazing site, thanks for sharing it

[dbrimlow]

Yeah, csszengarden was the site that made most of us realize how powerful css really was.

[TheFilmGod]

Alright now I'm getting you guys. I now understand why H1 would be so important, and all the other <H..>'s. but what about this:

 

<span class=

 

and <p class =

 

why shouldn't span be used? Why p instead?

[TheFilmGod]

One more thing, what if I do this:

 

<div id="footer" class="red bold"><h1>Hello I am content</h1></div>

 

I am still using the <h1> but it has no styling applied instead it is used to identify a piece of code.

 

Lastly, if this is possible how do I make h1 have no styling?

[Daniel0]

There shouldn't be a problem with that code (other than the names of the classes). What do you mean with having h1 not have any styling?