Tutorial HTML5: Etiquetas más comunes

Maquetación HTML y CSS katharsix

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):

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:
lista ordenada HTML katharsix

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:
lista desordenada HTML katharsix

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:
Lista enlazada HTML en katharsix

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:

  1. 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>
  2. 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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

*

DARÍO BALBONTÍN FERNÁNDEZ es el Responsable del tratamiento de los datos personales del usuario y le informa que estos datos serán tratados de conformidad con lo dispuesto en el Reglamento (UE) 2016/679 de 27 de abril (GDPR) y la Ley Orgánica 3/2018 de 5 de diciembre (LOPDGDD), por lo que se le facilita la siguiente información del tratamiento: Fin del tratamiento: mantener una relación comercial y el envío de comunicaciones sobre nuestros productos y servicios. Criterios de conservación de los datos: se conservarán mientras exista un interés mutuo para mantener el fin del tratamiento y cuando ya no sea necesario para tal fin, se suprimirán con medidas de seguridad adecuadas para garantizar la seudonimización de los datos o la destrucción total de los mismos.Comunicación de los datos: No se comunicarán los datos a terceros, salvo obligación legal. Derechos que asisten al usuario: Derecho a retirar el consentimiento en cualquier momento. Derecho de acceso, rectificación, portabilidad y supresión de sus datos y a la limitación u oposición al su tratamiento. Derecho a presentar una reclamación ante la Autoridad de control (agpd.es) si considera que el tratamiento no se ajusta a la normativa vigente. Datos de contacto para ejercer sus derechos: contacto@dariobf.com.

¡Únete ya a BFLabs GRATIS! Estreno próximamente... Más información