Tutorial HTML5: Etiquetas más comunes
Bienvenido a la tercera parte del tutorial sobre maquetación HTML y CSS; si has llegado hasta aquí te lo agredezco y felicito.
En la parte anterior del tutorial, Tutorial HTML5: la cabecera del documento, vehíamos la cabecera de un documento HTML explicando, por encima, los elementos que podíamos incluir en esta parte del código.
En esta tercera entrega sobre la introducción a HTML vamos a explicar el cuerpo de la página, lo que terminará siendo visible al usuario; concretamente de las etiquetas más comunes para dar formato a nuestro contenido.
Cabeceras o headers
Como en todo documento que se precie, en HTML vamos a poder crear «titulos», para lo que utilizamos estas etiquetas.
A la hora de estructurar nuestro documento disponemos de seis niveles diferentes para las cabeceras HTML; desde h1 hasta h6, quedando su declaración de la siguiente manera:
<h1>Prueba H1</h1> <h2>Prueba H2</h2> <h3>Prueba H3</h3> <h4>Prueba H4</h4> <h5>Prueba H5</h5> <h6>Prueba H6</h6> |
No puedo mostraros el resultado de las mismas dado que tendría que editar los ficheros CSS para que muestre estas etiquetas por defecto pues están adaptadas al diseño actual de la página web.
Básicamente la idea de los 6 niveles corresponde a la relevancia de los mismos. siendo el elemento H1 el más importante y el H6 en de menor importancia. Motores de búsqueda como Google, Yahoo o Bing así lo interpretan.
Párrafos y elementos de resaltado de texto
¿Qué es una página web sin texto? Nada, ¿Verdad?.
Podemos gestionar párrafos con la etiqueta P, de manera que lo incluyamos entre la etiqueta de apertura <p> y la de cierre </p> será tratado por el navegador como un párrafo.
Ahora bien, supongamos que queremos resaltar una parte del texto por ser más relevante, ¿cómo lo hacemos? Tenemos dos vías (las más utilizadas):
- Etiqueta strong: lo que incluyamos entre sus etiquetas de apertura y cierre se mostrará, como forma habitual, en negrita. Un sustituto, aunque no muy utilizado, es el elemento b. La etiqueta strong, como su nombre indica, le da más fuerza a la parte resaltada, destacando entre las demás.
- Etiqueta em: Al igual que la etiqueta strong, sirve para resaltar una parte del texto, pero en esta ocasión no le daremos más fuerza o peso, sino que mayor énfasis (del inglés emphasis).
Con estas dos etiquetas podemos defendernos perfectamente en un blog o cualquier página web, dado que es lo básico para tratamiento de texto.
También existen otro tipo de etiquetas, aunque en desuso como acronym (para definir acrónimos), u (subrayados), tt (teletype o letras espaciadas), big (para letras más grandes) o small (más pequeñas, aún se usa en descripción de imágenes), sup y sub (superíndices y subíndices respectivamente) o, por último, del (texto tachado).
Listas ordenadas, desordenadas y enlazadas
Una forma de manejar datos en un texto es realizar listas; por ejemplo la lista de la compra, lista de tareas pendientes, lista de amigos, lista de enlaces…
En HTML existen dos tipos básicos de listas; las listas ordenadas y las desordenadas y la fusión, mezcla o intercalado de ambas, las listas enlazadas.
Listas ordenadas
A veces el HTML se basa en pensar un poquito «cómo se diría en inglés» y así llegar a la declaración de la etiqueta; en el caso de las listas ordenadas, ordenated list en inglés, la etiqueta es ol.
También tenemos que saber que las listas tienen elementos (índices que listamos) que en inglés serían list index; etiqueta li.
Vamos a por un ejemplo donde se ve claramente cómo funciona y posteriormente lo explico:
<ol> <li>Primer elemento</li> <li>Segundo elemento</li> <li>Tercer elemento</li> </ol> |
Como veis, declaramos la lista con ol y dentro de ello declaramos los índices que queremos listar con las etiquetas li.
El resultado sería este:
Decir que este tipo de listas se llaman ordenadas porque nos ordenan los elementos (1, 2, 3…).
Listas desordenadas
No siempre es útil enumerar los elementos (o índices) de una lista, por lo que también tenemos las listas desordenadas o unordenated list, definidas con las etiquetas ul.
Funcionan exáctamente igual que las listas ordenadas, pero en vez de utilizar el elemento ol utilizamos el elemento ul.
Ejemplo:
<ul> <li>Primer elemento</li> <li>Segundo elemento</li> <li>Tercer elemento</li> </ul><ul> </ul> |
El resultado sería este:
Listas enlazadas
También podemos hacer índices mezclando varias listas de manera que un elemento de lista contenga, a su vez, otra lista y así sucesivamente.
Como esto es algo más complicado, vamos con el ejemplo y así lo veréis claramente:
<!-- Creo una lista ordenada --> <ol> <!-- Tabulo para organizar mejor el asunto y saber cómo está estructurado --> <li>Capitulo 1 <!-- Dentro del primer elemento creo una lista ordenada (capitulo 1.1, capitulo 1,2... --> <ol> <li>Capitulo 1.1</li> <li>Capitulo 1.2</li> </ol> </li> <li>Capitulo 2 <!-- Dentro del segundo capitulo creo una lista desordenada --> <ul> <li>Lista desordenada 1</li> <li>Lista desordenada 2</li> </ul> </li> </ol> |
Y aquí el resultado:
Lo que hacemos con esto, tal y como explicaba arriba, es organizar los datos de una forma mejor. Habrá datos que contengan subdatos y demás; el más claro ejemplo es el índice de un libro (capítulo 1, dentro tendría capitulos 1.1, 1.2, 1.3… y así sucesivamente).
Ids y clases en HTML, nombrando elementos
Podemos referirnos a una etiqueta concreta de nuestro documento HTML de dos formas:
- IDs: Una ID nos ayuda a referirnos a un ÚNICO elemento HTML; no se puede repetir un ID. Se utiliza añadiendo la propiedad id=»nombreID» en la etiqueta correspondiente.
Por ejemplo:<p id="introduccion"> aquí va el párrafo de introducción</p>
- Clases: Una clase es una especie de ID, que nos ayuda a referirnos a VARIOS elementos HTML. El funcionamiento es el mismo que los IDs, pero si podemos usar la misma clase en varias etiquetas HTML. Se utiliza añadiendo la propiedad class=»nombreClase» en la etiqueta correspondiente.
<p class="parrafoResaltado"> aquí va el párrafo que queremos resaltar, puede haber varios.</p>
Esto se utiliza mucho de cara al CSS, puesto que nos ahorra mucho trabajo y nos da mucha flexibilidad a la hora de tener estilos diferentes en nuestro sitio web.
Enlaces (Links)
Los enlaces se utilizan para enviar a otra parte del documento web o a otra página web externa.
Un enlace se construye con la etiqueta a, marcando en la propiedad href el destino. Por ejemplo Este enlace mandará a Google
Para hacer enlaces internos, deberemos indicar en la propiedad href el ID del elemento destino de nuestra propia página precedido de #.
Esto se consigue otorgándole un ID al elemento destino (como vimos en el apartado anterior); por ejemplo: supongamos que queremos enviar a alguien a la parte de las listas de este tutorial; colocaremos la propiedad id=»listas» en el elemento cabecera del apartado en cuestión, en este caso el titulo H2 que dice «Listas ordenadas, desordenadas y enlazadas».
Ejemplo de enlace interno: Ir a las listas
Como veis, es una etiqueta bastante sencilla y que da mucho juego. Me gustaría puntualizar que cualquier página que no corresponda a la actual es considerada como externa (aunque sea de nuestra misma página web).
Etiqueta imagen (img)
La etiqueta imagen se utiliza para insertar imágenes en nuestro sitio web.
Se construye con la etiqueta img y los campos src para indicar la ruta y el alt para mostrar el texto alternativo.
La ruta es el sitio donde está alojada nuestra imagen (bien sea en nuestro propio equipo o bien sea en una web; si es una web tendremos que colocar la URL a la misma http://sitio.com/imagen.png)
Sin embargo, no siempre es posible mostrar las imágenes o bien porque han desaparecido (en caso de que no dependa la imagen de nosotros o sean de un sitio externo). Para estos casos se usa la etiqueta alt; lo que conseguimos con esta etiqueta es, en caso de que la imagen ya no exista, mostrar un texto alternativo.
Por ejemplo:
Lo que nos mostrará lo siguiente:
En otra entrega hablaremos sobre las etiquetas estructurales.
Entrada sujeta a cambios y actualizaciones sin previo aviso.
Seguir con el tutorial
Volver al índice
Anterior: Etiquetas estructurales
Siguiente: Como estructurar el contenido de la página
