@ou-imdt/css/docs/native/abbr.md

The IMDT CSS library styles native elements with light, extendable CSS. It is developed for Interactive Media Developers at the Open University.

# abbr

There are a few ways to use 'abbr' in general the preferred method is to write put the term to be abbreviated before the abbreviation the first time it is used. Using a 'title' attribute is suitable when it is unclear what term is being abbreviated. Formal definition with a dfn tag is the least preferred method as it adds complexity to markup and provides no additional semantics.

## Examples

<div class="card">
    <p><strong>Formal definitions</strong></p>
    <p><dfn id="html"><abbr title="HyperText Markup Language">HTML</abbr>
      </dfn> is a markup language used to create the semantics and structure
      of a web page.</p>
</div>

<details class="compact">
  <summary>HTML</summary>

```html
  <p><strong>Formal definitions</strong></p>
  <p><dfn id="html"><abbr title="HyperText Markup Language">HTML</abbr>
    </dfn> is a markup language used to create the semantics and structure
    of a web page.</p>
```

</details>

<div class="card">
  <p>A <dfn id="spec">Specification</dfn>
    (<abbr title="Specification">spec</abbr>) is a document that outlines
    in detail how a technology or API is intended to function and how it is
    accessed.</p>
</div>

<details class="compact">
  <summary>HTML</summary>

```html
  <p>A <dfn id="spec">Specification</dfn>
    (<abbr title="Specification">spec</abbr>) is a document that outlines
    in detail how a technology or API is intended to function and how it is
    accessed.</p>
```
</details>


<div class="card">
  <p><strong>👍 Defined inline</strong>: the definition in full has been used once just before the
    abbreviation the first time
    it is used.</p>
  <p>JavaScript Object Notation (<abbr>JSON</abbr>) is a lightweight data-interchange format.</p>
</div>

<details class="compact">
  <summary>HTML</summary>

```html
  <p><strong>👍 Defined inline</strong>: the definition in full has been used once just before the
    abbreviation the first time
    it is used.</p>
  <p>JavaScript Object Notation (<abbr>JSON</abbr>) is a lightweight data-interchange format.</p>
```
</details>


<div class="card">
  <p><strong>Inline</strong>: the definition is applied using a 'title' attribute
  is used.</p>
  <p><abbr title="JavaScript Object Notation">JSON</abbr> is a lightweight data-interchange format.</p>
</div>

<details class="compact">
  <summary>HTML</summary>

```html
  <p><strong>Inline</strong>: the definition is applied using a 'title' attribute
  is used.</p>
  <p><abbr title="JavaScript Object Notation">JSON</abbr> is a lightweight data-interchange format.</p>
```
</details>