Etiquetas esenciales en HTML5

Este artículo forma parte del Curso HTML5 desde cero.
Haz click aquí para ver el índice.

En módulos anteriores…

En los módulos anteriores has aprendido a definir correctamente un archivo HTML5 y a escribir la estructura básica usando las etiquetas esenciales. Si has seguido las prácticas, tendrás varias noticias con esta estructura y con algunas etiquetas básicas para dar formato al texto. Yo he echo lo mismo; he cogido una noticia de GameWark.com, he seguido las prácticas, y ahora tengo este código:

Como he dicho, he aplicado la estructura aprendida y las etiquetas vistas en el módulo 1 y 2 de este curso. Sin embargo, aún tengo etiquetas invetadas por mí, como <subtitulo> ó <texto pequeño>. En este módulo te voy a enseñar las etiquetas esenciales de html5 con las que podrás dar un buen formato de lectura a tu documento HTML5.

Al finalizar el módulo yo mismo aplicare las etiquetas al ejemplo anterior, y tu podrás poner en práctica lo aprendido con tus noticias.

Etiqueta <p> … </p>

Esta etiqueta sirve para definir párrafos (comienzo y final). El texto que pongas entre estas etiquetas será considerado un párrafo y, en HTML5, los navegadores realizarán ajustes automáticos para mostrar el texto correctamente. Por ejemplo, el texto se ajustará al ancho de pantalla (o al espacio disponible) y entre una palabra y otra el navegador mostrará únicamente un espacio (aunque tu pongas más espacios en blanco).

Etiqueta <b> … </b> y <strong> …. </strong>

Pone el texto en negrita. Se ha debadito sobre si existe diferencia en usar una u otra, a nivel de visualización por parte del usuario o incluso a nivel SEO. La verdad es que hoy en día ambas se ven igual (en negrita) y a nivel SEO, Google no hace distinción entre ellas.

La diferencia real es que la etiqueta <b> significa literalmente poner en negrita (bold), pero la etiqueta <strong> se refiere a que el texto encerrado en ella debe ir destacado, pero cada navegador puede decidir cómo destacar. ¿Qué ocurre? que todos los navegadores deciden destacarla poniéndola en negrita. Resumen, usa la que quieras.

Etiquetas <i> … </i> y <em> …. </em>

Pone el texto en cursiva. Ocurre como en el caso anterior, ambas etiquetas hacen exactamente lo mismo y puedes usar la que mas te guste; los navegadores mostrarán el testo en cursiva.

Etiqueta <s> … </s>

Sirve para tachar con una línea horizontal el texto que queramos. No hay más secretos.

Etiqueta <u> … </u>

Utilizada para subrayar texto mediante una línea horizontal debajo del texto.

Etiqueta <small> … </small>

Se utiliza para definir un texto como «texto pequeño». El navegador interpretará que debe mostrar este texto con una fuente más pequeña, basada en los ajustes de tu propia página web. Es decir, si has definido que el tamaño normal para tu documento HTML5 será de 14px, el navegador mostrará el texto encerrado entre <small> y </small> siempre con una fuente menor a 14px.

Etiquetas <b/> y <wbr>

La etiqueta <br> añade un salto de línea en donde la coloques, ya sea en medio de una palabra, de una frase, de un párrafo, etc. No tiene contenido ni etiqueta de cierre.

Sin embargo, la etiqueta <wbr> sirve para indicar un posible salto de línea para palabras excesivamente largas que puedan hacer descolocar el resto del texto.

Por ejemplo, si queremos añadir la palabra supercalifragilisticoespialidoso sería buena idea indicar al navegador por dónde puede cortar esa palabra en caso de ser necesario. Podría ser algo así:

<p> super<wbr>califragilistico<wbr>espialidoso </p>

En este ejemplo, si se puede mostrar todo en una misma línea el navegador así lo hará, pero si no tuviera espacio suficiente sabrá que puede cortar la palabra en 3 pedazos, haciendo cortes donde hemos añadido las etiquetas.

Etiquetas <h1> … </h1>, <h2> … </h2>, etc.

Estas etiquetas se usan para definir encabezados o títulos dentro del contenido. Existen un total de 6 etiquetas de este tipo, desde <h1> hasta <h6>. De forma genérica, las etiquetas <h1>, <h2> y <h3> muestran el texto con un tamaño mayor al del tamaño standar del documento y el resto de etiquetas se mostrará con un tamaño menor.

Etiqueta <a> … </a>

Sirve para definir y crear un hipervínculo o enlace. Por defecto, los navegadores suelen visualizar estos enlaces en determinados colores y subrayado.

Un enlace tiene 3 estados: no visitado, visitado y activo, y en función de éstos se mostrará de un color o de otro. Estos formatos se puede modificar de diversas formas (las veremos en el Curso de CSS3 desde cero, próximamente).

La sintaxis sería esta:

<a href=»valor» hreflang=»valor» media=»valor» rel=»valor» target=»» type=»valor«>Texto con enlace</a>

Veamos sus atributos:

  • href: Dentro de éste añadimos la URL de destino. Se puede añadir tanto una URL absoluta (p.e. «https://letswebbing.com»), una ruta relativa (p.e. «/contacto») o un ancla o marcador (que es un enlace a una sección del mismo documento).
  • hreflang: Ya lo hemos visto anteriormente, sirve para establecer el idioma del documento enlazado.
  • rel: Para indicar el tipo de relación entre nuestro documento HTML5 y el documento al que vamos a enlazar. Estos son los valores disponibles:
alternateEspecifica la relación del documento con una versión alternativa del mismo (para imprimir, como espejo, traducida, etc.) .
authorEspecifica la relación del enlace con el autor del documento con el que se enlaza.
bookmarkEspecifica la URL que se utiliza como dirección permanente para los marcadores de los navegadores.
helpEspecifica que el enlace tiene relación con un documento de ayuda.
licenseEspecifica que el enlace es la información de licencia sobre el documento web (copyright, copyleft, etc.).
nextEspecifica que el documento web es parte de varios documentos, e indica que el documento enlazado es el siguiente.
prefetchSirve para especifricar desde el documento HTML5 cuál es el siguiente que deberá cargar. De esta forma el navegador solicita información de ese siguiente documento almacenándolo en la caché y, cuando el usuario cargue dicha «página siguiente», el navegador podrá mostrarla mucho más rápido.
prevEspecifica que el documento web es parte de varios documentos e indica que el documento enlazado es el documento anterior.
searchEspecifica que el enlace es la herramienta de búsqueda.
nofollowUtilizado habitualmente para indicar a los motores de búsqueda que no sigan este enlace. Es como decirle a los motores que aunque estemos enlazando a ese documento externo, no tiene relación con nuestro website y no debe tenerlo en cuenta a la hora de conocer nuestra web, indexar nuestra página, etc.
noreferrerEspecifica que no se ha de enviar referencias sobre la procedencia del enlace.
tagEstablece una etiqueta o palabra clave para el documento actual.
  • type: Para especificar el tipo MIME del documento enlazado (ya lo hemos explicado en modulos anteriores).
  • media: Para indicar el tipo de dispositivo/medio que estamos enlazando (visto en módulos anteriores).
  • target: Establece el destino del enlace, y puede tener los siguientes valores:
    • _blank: El enlace se abrirá en una ventana nueva (o pestaña nueva, en función de la configuración del navegador).
    • _self: El enlace se abrirá en la misma ventana en la que se encuentre el usuario.
    • _parent: Abre el enlace en un marco asociado.
    • _top: Abre el enlace ocupando el 100% del espacio disponible en la ventana actual.
    • framename: Abre el enlace en el marco del que especifiquemos el nombre.

Ejemplo – Enlace a una sección del mismo documento. El ancla o marcados se especifica como atributo ID en la sección correspondiente (un párrafo, por ejemplo) y en la etiqueta <a> añadimos el nombre con una almohadilla delante:

Ejemplo – Enlaces con rutas relativas. Las rutas relativas indican la dirección de un archivo o medio basándose en la ruta en la que se encuentra nuestro documento HTML5.

Por ejemplo, imaginemos que nuestro documento HTML5 se encuentra en una carpeta llamada «WEB» y, dentro de la carpeta web, tenemos lo siguiente:

  • Una carpeta llamada «images«.
  • Dentro de esa carpeta «images«, un archivo llamado «logotipo.jpg«
  • Otro documento llamado «contacto.html«

Sobre el ejemplo anterior voy a añadir 2 enlaces, uno al archivo logotipo.jpg y otro al documento contacto.html. Además, voy a añadir un enlace a un correo electrónico de contacto, para que el usuario pueda escribirme un email al hacer clic sobre el texto escribirme un email.

Por último, aprovecho este último ejemplo del módulo para corregir todas las etiquetas inventadas y usar así las correctas, además de añadir alguna otra de ejemplo.

¡A practicar!

Con lo que has leído y aprendido haz las siguientes tareas:

  • Recupera las noticias de los módulos anteriores y aplica correctamente las etiquetas que acabas de aprender.
  • Crea un nuevo proyecto con los siguientes documentos y estructura:
    • Crea un archivo llamado index.html, el cual será el documento principal de tu página web.
    • Crea un archivo en la misma ruta llamado contactar.html. Éste contendrá información para contactar contigo.
    • Crea una carpeta llamada imágenes.
    • Dentro de la carpeta imágenes coloca una imagen llamada logotipo.jpg. (puedes buscar un logotipo de ejemplo en Google y descargar la imagen).
    • Con esta estructura creada, añade la estructura básica HTML5 en el documento index.html y redacta un artículo completo tipo Blog. Si no quieres escribir el artículo desde cero te recomiendo que copies (y de paso, leas) este artículo: https://letswebbing.com/2017/06/28/diseno-programacion-web/

Aprovecha los comentarios para hacer cualquier pregunta sobre lo explicado o sobre cualquier ejercicio que estés haciendo, o incluso sobre tu propio proyecto. Te ayudaré encantado.

Ahora toca asentar conocimientos y, después, ¡a por el siguiente módulo!

Summary
Curso HTML5 - Etiquetas esenciales
Article Name
Curso HTML5 - Etiquetas esenciales
Description
En los módulos anteriores has aprendido a definir correctamente un archivo HTML5 y a escribir la estructura básica usando las etiquetas esenciales.
Author
Publisher Name
Let's Webbing
Publisher Logo

¡Aprende GRATIS!

Suscríbete a la newsletter semanal y aprende con los tutoriales, trucos, miniguías y miles de utilidades sobre diseño, desarrollo y programación de páginas web.

¡EMAIL GUARDADO!

Vaya! Algo ha fallado. Por favor, inténtalo de nuevo