Other text elements

Other text elements

Denoting a Generic Span of Content

The span element has no meaning in its own right. We use it to apply one of the global attributes to a region of content.

<html>
  <head>
    <title>Example</title>
    <style>
      .fruit {
        border: thin solid black;
        padding: 1px;
      }
    </style>
  </head>
  <body>
    I like <span class="fruit">apples</span> and
    <span class="fruit">oranges</span>.
  </body>
</html>

Highlighting Text

The mark element represents a span of text that is highlighted due to its relevance in another context.

<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    Homophones are words which are pronounced the same, but have different
    spellings and meanings. For example:
    <p>I would like a <mark>pair</mark> of <mark>pears</mark></p>
  </body>
</html>

Denoting Added or Removed Content

We can denote text that has been added or removed from the document using the ins and del elements.

<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    Homophones are words which are pronounced the same, but have different
    spellings and meanings. For example:
    <p>I would like a <mark>pair</mark> of <mark>pears</mark></p>
    <p>
      <del>I can <mark>sea</mark> the <mark>see</mark></del>
      <ins>I can <mark>see</mark> the <mark>sea</mark></ins>
    </p>
  </body>
</html>

Denoting Times and Dates

We use the time element to represent a time of day or a date.

<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    I still remember the best apple I ever tasted. I bought it at
    <time datetime="15:00">3 o'clock</time> on
    <time datetime="1984-12-7">December 7th</time>.
  </body>
</html>