[html5] Element for advisory, warning, or contingency note

[Ian Hickson]

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 
> section.

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.   `._.-(,_..'--(,_..'`-.;.'