Template:Abbr

From MozillaWiki
Jump to navigation Jump to search
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

{{{1}}}

Documentation icon Template documentation[view] [edit] [history] [purge]

This template is a front-end for the HTML element <abbr> used by most web browsers to create a tooltip giving the meaning of an abbreviation or an acronym.

Do not use <abbr> to mark up material other than abbreviations. Simply using it to generate tooltips is an abuse of the underlying HTML and an accessibility problem.

Parameters

{{abbr}} takes two unnamed parameters, which both are required.

1

Abbreviation

The abbreviation or acronym. This will show as text on the page.

Usage
  • {{abbr|1|2}}

2

Full meaning

The meaning of the short form. This will show as a tooltip on mouse-over.

Note

This parameter has to be placed after the 1st parameter.

Usage
  • {{abbr|1|2}}

Example

Case What you type What you see Notes
Basic function {{abbr|MSLP|Mean Sea Level Pressure}} MSLP
In inline text See {{abbr|MDN|Mozilla Developer Network}} for more documentation. See MDN for more documentation.

When hovering over the text underlined with a dotted line, "MSLP" in the table above, then something like Mean Sea Level Pressure will appear as a tooltip in most browsers. Popular screen readers, used by visually impaired readers, display the long form in a different way.

Accessibility concerns

This template is intended for use with abbreviations; it is not intended to be a tool for generating tooltips. The Web Content Accessibility Guidelines contain guidelines for using the <abbr> element generated by this template; see section H28: Providing definitions for abbreviations by using the abbr and acronym elements.

See also

  • {{bdi}}: inserts <bdi> tags to allow for inline changes in text direction.
  • {{bdo}}: inserts <bdo> tags, forcing inline changes in text direction.
  • {{code}}: inserts <code> tags.
  • {{mark}}: inserts <mark> tags, highlighting the enclosed text.
  • {{samp}}: inserts <samp> tags.
  • {{var}}: inserts <var> tags.
  • {{varserif}}: inserts <var> tags with serif font styling.