G115Usar elementos semánticos para marcar la estructura

Enlazar a otra página

Un párrafo contiene un hiperenlace a otra página. El hiperenlace se marca utilizando el elemento a.

<p>Do you want to try our new tool yourself? A free demonstration
  version is available in our <a href="download.html">download section</a>
</p>

Usar cite y blockquote para hacer referencia a un libro y a una cita extraída de él

Una página sobre la historia del matrimonio utiliza como ejemplo una cita de la novela de Jane Austen Orgullo y prejuicio. La referencia al libro se marca utilizando el elemento cite y la cita en sí se marca utilizando el elemento blockquote.

<p>Marriage was considered a logical step for a bachelor, as can be seen in the
   first chapter of the novel <cite>Pride and Prejudice</cite>:</p>
<blockquote>
  <p>It is a truth universally acknowledged, that a single man in
   possession of a good fortune, must be in want of a wife.</p>
  <p>However little known the feelings or views of such a man may
   be on his first entering a neighbourhood, this truth is so well
   fixed in the minds of the surrounding families, that he is considered
   the rightful property of some one or other of their daughters.</p>
</blockquote>

Usar el elemento strong para enfatizar texto importante

Un manual de automóvil explica cómo arrancar el motor. Las instrucciones incluyen una advertencia para asegurarse de que la marcha está en punto muerto. El autor considera que la advertencia es tan importante que debe enfatizarse, por lo que la advertencia se marca utilizando el elemento strong.

<h1>How to start the engine</h1>
<p>Before starting the engine, <strong>make sure the gear is in neutral</strong>
   Next, turn the key in the ignition. The engine should start.</p>

Usar los elementos em y strong para enfatizar texto

<p>What the user <em>really</em> meant to say was, 
   <q>This is not ok, it is <strong>excellent</strong>!</q>
</p>

Usar resaltado y color de fondo para identificar visual y semánticamente información importante

<style>
.vocab {
  background-color:cyan;
  font-style:normal;
}
</style>
...
<p>New vocabulary words are emphasized and highlighted with a cyan background.</p>
<p>The <em class="vocab">scathing</em> review of the play seemed a bit too harsh.</p>