[HTML5] Best practice cheat sheet
webmaster at keryx.se
Sat Feb 10 04:01:04 PST 2007
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
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.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.
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.
> 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
I am very slow in introducing the semantic meaning of <br> 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 <br>, <b> and <i>, since
that's where the need is greatest.
One should never use the <u> 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?
> 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:
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.
> 11. <noembed> and <map> are invisible.
> 12. <frameset> is normal.
> 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.
More information about the Help