Lección 2: Etiquetas

Todas las páginas webs se componen de texto envuelto en diferentes etiquetas (o tags) donde cada una guarda una propiedad única que es transmitida a su contenido, normalmente texto. Todas ellas se van interconectando por medio de anidamientos (unas dentro de otras) u orden.

Anatomía

Todas ellas poseen una estructura similar a la siguiente.

<etiqueta>Contenido</etiqueta>

En los siguientes ejemplos aclararemos cada sección.

Formato

Veamos algunas etiquetas esenciales para dar formato a nuestros textos.

Etiqueta <p>
Descripción Crea párrafos.
Atributos Globales
Tipo Bloque
<p>En un lugar de la mancha...</p>

En un lugar de la mancha...

El atributo align esta obsoleto.

Etiqueta <strong>
Descripción Marca textos importantes o de gran relevancia.
Atributos Globales
Tipo En línea
Cuando tome este medicamento y guardelo en un sitio oscuro. <strong>No consumir por niños menores de 6 años</strong>
Cuando tome este medicamento y guardelo en un sitio oscuro. No consumir por niños menores de 6 años
Etiqueta <b>
Descripción Da un estilo de negrita al texto.
Atributos Globales
Tipo En línea
Las causas perdidas son las únicas por las que <b>vale la pena luchar</b>.
Las causas perdidas son las únicas por las que vale la pena luchar.
Etiqueta <i>
Descripción Da un estilo en cursiva al texto.
Atributos Globales
Tipo En línea
En <i>900 años por el tiempo y el espacio</i>, nunca me he encontrado con nadie que no fuera importante.
En 900 años por el tiempo y el espacio, nunca me he encontrado con nadie que no fuera importante.
Etiqueta <em>
Descripción Da enfasis a una palabra, solo nombres propios o palabras en otro idioma.
Atributos Globales
Tipo En línea
¡<em>Legolas</em>! ¡¿Qué ven tus ojos de elfo?
¡Legolas! ¡¿Qué ven tus ojos de elfo?
Etiqueta <h1>...<h6>
Descripción Cabeceras o títulos. Se enumeran del 1 al 6 de mayor a menor importancia.
Atributos Globales
Tipo Bloque
<h1>El señor de los anillos</h1>
<h2>La Comunidad del Anillo</h2>
<p>Tres Anillos para los Reyes Elfos bajo el cielo.
Siete para los Señores Enanos en palacios de piedra...</p>

El señor de los anillos

La Comunidad del Anillo

Tres Anillos para los Reyes Elfos bajo el cielo. Siete para los Señores Enanos en palacios de piedra...

Etiqueta <abbr>
Descripción Representa abreviación o acrónimo.
Atributos title: Descripción
Tipo En línea
<p>Estoy aprendiendo <abbr title="Hypertext Markup Language">HTML</abbr> por las mañanas.</p>

Estoy aprendiendo HTML por las mañanas.

Etiqueta <!-- Comentario -->
Descripción Textos que serán ignorados por el navegador pero que son de gran ayuda para crear anotaciones por parte del Diseñador Web responsable.
Atributos Globales
Tipo En línea
<!-- Bloque de texto que describe a Frodo -->
Protagonista de la novela, hijo de Drogo Bolsón y Prímula Brandigamo. Tras la muerte de sus padres, su tío Bilbo le adoptó y le nombró su heredero, hecho que le llevó a poseer el Anillo Único.
Protagonista de la novela, hijo de Drogo Bolsón y Prímula Brandigamo. Tras la muerte de sus padres, su tío Bilbo le adoptó y le nombró su heredero, hecho que le llevó a poseer el Anillo Único.

Diferencia entre las etiquetas de bloque y en línea

Las etiquetas de bloque, como <p>, ocupan todo el ancho de la fila. Uno de sus efectos secundarios es la de empujar la siguiente etiqueta a una nueva fila. Mientras que las etiquetas, por ejemplo <b>, son neutras dejando concatenar todas las que sean necesarias sin alterar la maquetación.

Debes ser consciente de la naturaleza de cada etiqueta para construir tus sitios sin dificultades.

Con CSS es posible cambiarlo a necesidad.

Etiquetas sin cierre

Etiqueta <br>
Descripción Salto de línea. No es un sustituto a los párrafos sino para ajustes menores.
Atributos Globales
Tipo En línea
<p>Doctor Who se estrenó en BBC Television​ tras discusiones<br>y planificaciones que habían durado un año.</p>

Doctor Who se estrenó en BBC Television​ tras discusiones
y planificaciones que habían durado un año.

Anatomía de un documento HTML5

Veamos la estructura mínima de cualquier página web moderna.

<!--Indica que el documento utiliza HTML5-->
<!doctype html>
<!--Hace saber al navegador que la página esta en castellano-->
<html lang="es">
    <head>
        <!--Permite carácteres extraños del alfabeto americano: ñ, á, é...-->
        <meta charset="utf-8"/>
        <!--Título que aparecerá en la pestaña - La estructura será el nombre de la página actual + Descripción del sitio-->
        <title>Document</title>
        <!--Bloquea el zoom en smartphones-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
    </head>
    <body>
       Todo mi contenido 
    </body>
</html>

Puedes usarla como base para empezar cualquier actividad o sitio futuro. Si quieres una versión más completa puedes descargar la plantilla completa.

Espacios en blanco

Etiqueta &nbsp;
Descripción Espacio. Existen alternativas más flexibles en CSS como margin o word-spacing.
Atributos Ninguno
Tipo En línea
El otoño​ es una de las cuatro estaciones del año y una de las dos de la&nbsp;zona intertropical.
El otoño​ es una de las cuatro estaciones del año y una de las dos de la zona intertropical.
Etiqueta <pre>
Descripción El contenido respeta los saltos de línea y espacios.
Atributos Globales
Tipo Bloque
<pre>Pixar:
        - Toy Story.
        - Wally.
        - Los increíbles.
</pre>
Pixar:
        - Toy Story.
        - Wally.
        - Los increíbles.
    

Entidades (Carácteres especiales)

Las entidades HTML son palabras que empiezan con un ampersand (&) y terminan con un punto y coma (;). Son carácteres avanzados que pueden ser propios de la sintaxis HTML, lo cual hace imposible representarlos, o estar fuera de nuestro teclado. El navegador se encargará de traducir siempre que estén bien escritos.

En la siguiente tabla puedes observar algunos de ellos, aunque la lista oficial extensa.

Carácter literal Equivalencia HTML
< &lt;
> &gt;
&quot;
&apos;
& &amp;
© &copy;

Los acentos y la ñ también poseen su equivalencia, aunque no es necesario usarlos gracias al meta utf-8.

2-1 2-2 2-3 2-4 2-5 2-6 2-7

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la política de Protección de Datos.

Escribe el primer comentario