ETIQUETAS PARA EL MANEJO DEL TEXTO

 Encabezados <h1> <h2> ...

Las etiquetas <h1> <h2> ... <h6> crean texto para encabezados. Se suelen utilizar para títulos, subtítulos, rótulos, etc.

Ejemplo: <h1>Encabezado de primer nivel h1 </h1>

En la siguiente imagen puedes ver el tamaño de cada tipo de cabecera en relación al texto de párrafo:

Para los títulos y subtítulos es preferible utilizar etiquetas de encabezado que cambiar el tamaño de una etiqueta de párrafo ya que las etiquetas de encabezado tienen significado semántico y son utilizadas por los buscadores para dar significado al texto en función de su importancia.

Separadores <hr>

La etiqueta <hr> crea un separador horizontal. Hasta HTML 4 se representaba en forma de línea y tenía atributos para definir la anchura, alineación, ... En HTML5 esta etiqueta se define como un separador semántico más que como un separador visual, aunque los navegadores siguen representando una línea horizontal. Además esta etiqueta ya no tiene atributos, aunque cómo siempre con las hojas de estilo podemos darle el formato que queramos.

Ejemplo: <hr>

Produce este resultado:

---

Con un estilo podemos alinearla al centro, darle un ancho del 80%, darle un borde de 1 px con estilo punteado, color azul:

   hr {
      text-align: center; width: 80%;
      border: 1px dashed  blue;  }
   }   

---

 Etiqueta <q>

La etiqueta <q> se utilizar para poner entre comillas un texto corto.

Ejemplo:

<p> Al despedirse dijo: <q>Hasta nunca</q> y cerró la puerta.</p>

Al despedirse dijo: Hasta nunca y cerró la puerta.

Si el texto entre comillas se refiere a una cita es conveniente añadir el atributo cite con la URL, que no será visible para el usuario.

Ejemplo:

<p> La web aulaClic es <q cite="http://www.aulaclic.es/index.htm">La primera web en español sobre cursos gratuitos online</q> en la fecha actual, 2017.</p>

La web aulaClic es La primera web en español sobre cursos gratuitos online en la fecha actual.

Etiqueta <strong>

La etiqueta <strong> se utiliza para dar importancia a un texto corto. Los navegadores ponen el texto en negrita.

Ejemplo:

<p> Un coche histórico debe tener, al menos, <strong>25 años</strong> desde la primera matriculación.</p>

Un coche histórico debe tener, al menos, 25 años desde la primera matriculación.

Etiqueta <em>

La etiqueta <em> se utiliza para dar énfasis a un texto corto. Los navegadores poner el texto en cursiva.

Ejemplo:

<p> Una página web puede ser consultada desde <em>cualquier</em> parte del mundo.</p>

Una página web puede ser consultada desde cualquier parte del mundo.

Etiqueta <b>

La etiqueta <b> se utiliza para destacar un texto corto, sin que ello signifique que es importante. Los navegadores ponen el texto en negrita.

Ejemplo:

<p> El futbolista es el deportista mejor <b>pagado</b>.</p>

El futbolista es el deportista mejor pagado.

En muchas ocasiones es difícil distinguir si un texto corto es importante, queremos darle énfasis o merece ser destacado, por lo que utilizar las etiquetas <strong> <em> o <b> puede ser un poco ambiguo. Podríamos simplificar diciendo que si queremos ponerlo en cursiva utilizaremos <em>, y si queremos ponerlo en negrita y que sea tenido en cuenta por los buscadores como un texto importante utilizaremos <strong>, y si sólo queremos ponerlo en negrita utilizaremos <b>.

Etiqueta <sub>

La etiqueta <sub> se utiliza para ver texto como subíndice, es decir, colocado en la mitad inferior de la línea.

Ejemplo:

<p> H<sub>2</sub>O. Texto <sub>subíndice</sub></p>

H₂O. Texto _subíndice.

Etiqueta <sup>

La etiqueta <sup> se utiliza para ver texto como superíndice, es decir, colocado en la mitad superior de la línea.

Ejemplo:

<p>x<sup>2</sup>. Texto <sup>superíndice</sup></p>

x². Texto ^superíndice

^ACTIVIDADES:

^{1. Utilizando las etiquetas para el manejo del texto realiza una página web con tus datos personales: nombres, edad, identificación, dirección, celular, nombre de los padres y hermanos si los tiene, ocupación de los padres, intereses, aficiones, metas a largo y corto plazo, etc.} 

^{2. Investiga cual es la etiqueta para colocar imágenes en tu página web y adiciona  fotografías a tu página web personal.}

^{3. Envía tu trabajo hasta el día 7 de Septiembre de 2021, no olvides hacer una descripción de tu correo en el asunto del mismo.}

^WEBGRAFÍA

^{https://www.aulaclic.es/html/t_3_1.htm}