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>
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>
| 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>.
| 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.
| 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?
| 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>
| 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>
| 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.
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>
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 | |
| 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 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>
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 |
|---|---|
| < | < |
| > | > |
| ” | " |
| ’ | ' |
| & | & |
| © | © |
Los acentos y la ñ también poseen su equivalencia, aunque no es necesario usarlos gracias al meta utf-8.