[HTML5] Best practice cheat sheet

Sat Feb 10 04:01:04 PST 2007

Hello!

I work as a teacher (but do some development as well on the side).

For the benefit of myself and my students i have strted to put together 
a cheat sheet of (X)HTML elements. Although only HTML 4.01 strict, XHTML 
1.0 strict and XHMTL 1.1 Mobile are recommended to my students for use 
today, I include all of HTML 3.2, 4.01/X1.0 transitional/frameset, some 
XHTML 2.0 and all of (X)(HTML 5 as well as some proprietary elements as 
reference, to provide a historical perspective and some preparation for 
the future.

Unlike other cheat sheets the emphasis is not on syntax, but on proper 
usage. Any feedback on my work is greatly appreciated.

The cheat sheet is available (during development) at:
http://keryx.se/wasp/html_elements_beta.pdf
http://keryx.se/wasp/html_elements_beta.ods (Open Office Calc)

it is primarily intended for print, but when it reaches 1.0 status, I 
will probably make an HTML version as well.

Many thanks.

Lars Gunther

P.S:

I include an example of feedback i've already has got, in the form of my 
answer to Alexey Feldgendler:

Alexey Feldgendler wrote:
 > 1. <body>, <title>, and <link> have semantic meaning.

Added

 > 2. <script>: probably it's worth noting that scripts can only do 
document.write() in HTML, not in XHTML.

Yes, and innerHTML does not work reliably as well. However, there are 
few good uses fo a beginner in JS to use document.write() at all. 
Unobtrusive techniques are recommended. I'll leave the rest to Google.

 > 3. I think <dialog> should belong with other list elements.
 >

Perhaps, technically it belongs there. When i teach it's useful to 
explain exdactly what "semantics" is.

 > 4. <span> is inline.

Very big OOOPS! (Accidentally deleted)

 > 5. <br> has a semantic meaning: it breaks lines wherever line 
breaking conveys meaning, e.g. in poetry. So it's not only an option for 
WYSIWYG.
 >

I am very slow in introducing the semantic meaning of as it often 
gives my students an "out". "But it's semantic, I may use it!" I'll 
leave it in parenthesis.

 > 6. “Smallprint in HTML5” is the semantic meaning of <small>, not <sub>.
 >

Once again, oooops!

 > 7. “May be only option for WYSIWYG” should not only apply to <b> and 
<i>, but also to <tt>, <font>, <u>, <s>/<strike>.
 >

Maybe - I believe that good WYSIWYG editors should stop enabling easy of 
bad code! I have introduced the thought, with , and , since 
that's where the need is greatest.

One should never use the element - since underlined text should be 
reserved for links. WYSIWYG editors should not allow underlined text 
that's not a link, without strong words of caution!

 > 8. I believe unstyled tables have visible borders, haven't they?

Yes.

 >
 > 9. Don't unstyled <thead> and <tfoot> repeat on each page of printed 
media? I'm not sure about this.

I have never tested it either. it seems to be suggested by the spec, but 
left to the vendor to implement: 
http://css-discuss.incutio.com/?page=PrintingTables

I'll leave this discussion from my "cheat sheet" as it is very hard to 
condense into one or two lines. "Sometimes repeated on each page when 
printed" mystifies more than it clarifies.

 > 10. Because <event-source> is invisible, it's not block.
 >

Removed.

 > 11. <noembed> and <map> are invisible.

Fixed!

 >
 > 12. <frameset> is normal.
 >

Fixed!

 > 13. I believe ruby annotation elements have unstyled appearance.
 >

So do I, but I have no idea what it looks like. I have never tried them.

Many thanks

Lars Gunther