[html5] Element for advisory, warning, or contingency note
ian at hixie.ch
Tue Mar 4 20:07:59 PST 2014
On Sat, 1 Mar 2014, Gordon Baker wrote:
> I'm wondering what's the best way to mark up paragraphs related to
> advising, warning, FYIs, contingencies, etc. I'm talking about such
> paragraphs that typically are prefixed by the word "Note:" or "n.b.,"
> and are stylized differently from surrounding text.
> For example:
> <ol> <li>Open the lid</li> <li>Place the sheet face down</li> <li>Press
> the copy button</li></ol>
> Note: If the paper jams, then you'll need to... (blah, blah)
> I've noticed that these types of notes frequently occur in the HTML
> spec itself, styled in bold green typeface. For example:
> For short inline annotations, the title attribute could be used.
> Note: Unfortunately, relying on the title attribute is currently
> discouraged as many user agents do not expose the attribute in an
> accessible manner as required by this specification (e.g. requiring a
> pointing device such as a mouse to cause a tooltip to appear, which
> excludes keyboard-only users and touch-only users, such as anyone with a
> modern phone or tablet).
> In the spec, such notes are marked up as <p class="note"> or <div
> class="note">. Is this considered the correct way, or is there a more
> specific element that could be used.
I've been planning on moving these (and examples) to <aside>, though that
requires also changing to using a different heading structure (since
<aside> is a sectioning element and thus resets the outline algorithm to
the top-level heading, if I recall correcty).
> Some candidates I thought might be possible are <strong>, <em>, <i>,
> <b>, and <aside>:
> <aside> I find it hard to say if advisory notes are tangentially related
> to surrounding content -- I would tend to think not. Also, <aside> is a
> sectioning element, and I don't think an advisory note is a different
If it's really just an inline paragraph that you happen to want to have
special styling for, as opposed to a side note, then a class is probably
the right way to go. (One way to look at it is: if you dropped the classes
and CSS, would the document still make sense? Or does it only make sense
if it is properly offset in some stylistic way?)
Ian Hickson U+1047E )\._.,--....,'``. fL
http://ln.hixie.ch/ U+263A /, _.. \ _\ ;`._ ,.
Things that are impossible just take longer. `._.-(,_..'--(,_..'`-.;.'
More information about the Help