4: The Web standards model - HTML, CSS and JavaScript

In this part of the curriculum, Jon Lane will take you through the web standards model, explaining how HTML, CSS, and JavaScript should be used on a typical web page, the three-tier model of content, presentation and behavior, and why it is a recognized best practice on the Web today.

( Read the article )

In 4: The Web standards model - HTML, CSS and JavaScript
> Figure 1: Anatomy of an (X)HTML tag.

This should read "Figure 1: Anatomy of an (X)HTML element".

Please be careful not to confuse "tag" and "element", enough people do already and it is a major source of confusion for HTML-beginners.

from the what is xhtml section

Originally posted by lanej0:

All attributes must be given a value (ie. <option selected=”selected”>).

( Read the article )

i'm seeing little black boxes rather than the double quotes in the example above. probably because you're using the slanting style quotes (”) rather than standard ("). Could cause problems for anyone trying to learn from the article!

Regarding the table of differences between HTML and XHTML:

Tags are case insensitive

So are attribute names.

Certain tags don’t need a closing tag (ie. <hr>).

True, but the example given (hr) has the closing tag forbidden (rather then being optional, like p).

Attributes may or may not be enclosed by quotes.

This depends on the value. Quotes are required in some circumstances.

All tags must be closed (ie <hr /> or <hr></hr> are acceptable).

The latter form is not acceptable in HTML compatible XHTML (which is what most people should be writing as they serve their markup up as text/html)

All attributes must be given a value (ie. <option selected=”selected”>).

The same is true for HTML. In <option selected> it is the attribute name (and VI delimiter (=)) that is omitted, not the value.

Originally posted by chrismills:

lrebrown - are you still getting the issue with quotes? I'm using unicode codes for the typography. They look fine on my machine, and I tested it with a few other people too.

I also see squares instead of the quotes. This happens on Firefox 3, although Opera 9.51 and IE7 are fine. There is a similar issue with the en-dashes used in the page ranges of the references (e.g. "The Journal of Awesome Web Standards, 15:7, 57-62").

I think that for the sake of simplicity, as well as adding some educational value, it is best to use & quot ; to fix lrebrown's issue, and & ndash ; for this issue (spaces added to "confuse" the comment system).

Originally posted by chrismills:

lrebrown - are you still getting the issue with quotes? I'm using unicode codes for the typography. They look fine on my machine, and I tested it with a few other people too.

yeh, and like yehudab, it's only affecting firefox 3, not opera 9.51 or IE7. the same character i believe is present elsewhere in the article and displays fine, so it could just be the font family or font size used here.

Originally posted by chrismills:

Thanks dorward - I think I've fixed most of your points with my new description.

Getting better...

If it were up to me, I would add another section at the top about media types, perhaps something along the lines of:

HTML: Servers should deliver HTML to the client with a media type of "text/html".

XHTML: Should use the "application/xhtml+xml" media type but may use "application/xml", "text/xml" or "text/html". If "text/html" is used then the HTML Compatibility Guidelines should be followed because browsers will treat it as HTML (and use error recovery to account for the differences between the languages).

And then I'd change these bits:

Certain elements don’t need a closing tag (ie <p>A paragraph).

How about: "Certain elements don’t need a closing tag (e.g. paragraphs <p>), while others (called "empty elements") forbid the closing tag (e.g. images <img>)."

All elements must be closed—for example <p>A paragraph</p>. Some elements may not contain content and are referred to as “empty elements”. The best way to close these is to write the forward slash after the element’s name, and leave it with just a single tag, for example <hr/>. It can also be done using and opening and closing tag as normal, eg <hr></hr>, but this is not recommended due to the fact that some older browsers that don’t support XHTML very well may misinterpret this, when a proper XHTML doctype is used. It is also recommended that you put a space between the element name and the closing slash, ie <hr />, as it allows older browsers to understand it better.

I'm afraid that seems to be a bit dense (in the "amount of text without breaks" sense).

How about:

All elements must be explicitly closed (e.g. <p>A paragraph</p>). Elements without content may be closed using a slash in the start tag (e.g. <hr></hr> and <hr/> mean the same thing).

If you are serving your XHTML as text/html, then you should use the shorthand syntax on all elements which are defined as being "empty" and place a space before the slash. You should use the long form (with separate start and end tags) on any element which is not defined as empty - even if you don't have any content in it.

Attribute values may or may not be enclosed by quotes.

Some attribute values may be written without being enclosed in quotes.

All attributes must be given a value (ie <option selected="selected">).

The full form must be used for all attributes (e.g. <option selected="selected">)

Oh, and there seems to be a bug in your ATOM generation for this (comments) page. Characters such as < are not being escaped in it, even though they are in the HTML version.

I think there are a z-index bug in the example files.
z-index:-100; make the pen.png disapear in Firefox (I.E 7.0 works fine).
I correct z-index to 100 to see the pen background image in both I.E 7 and Firefox.

The example file index.html has the following in its first few lines:

<!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" xml:lang"en" lang="en">


There seems to be an = sign missing in the last line, which should read

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

With this correction, the W3C Markup Validator accepts the html as valid.

Hi,
I see many experts making comments but I am a new student to all of this. I have the same problem as aroberto observed with the pen.png image not appearing in FireFox. I have version 2.x. The pen does show up in IE but is off center from the example. I used areoberto suggestion to change the -100 to 100. This does not fully correct the problem for me as the image then is on top of the references image in IE and shows up in FireFox the same way. I may try to figure out how to fix on my own but I hardly understand what the 100 is doing in the first place.

The example does show the power and depth of css and I very much enjoyed learning it for the sake of learning it. I can't wait to learn more about it.

I think it's a bit of a pity that in the first code example of the curriculum the content starts with an empty tag that only has presentational purposes (div#bggraphic).

And shouldn't the references be placed in an ordered list?

cheers

Isn't it more robust using the HTML entity for the copyright symbol instead?
I wouldn't be surprised if it would better survive setting the charset incorrectly.

I found "An example page<" , which is a "<" too many.

The reference to Article 22 is wrong. It should be about CSS, which is Article 27. And it also can be link now.