Blog

Etiquetas de HTML5

Hoy vamos a sumergirnos en el fascinante mundo del HTML5, la quinta versión del lenguaje de marcado de hipertexto (HTML), que es la base de cualquier página web. HTML5 introduce mejoras significativas, nuevas APIs y DOM, y ofrece nuevas funciones multimedia, como controles de audio y video, elementos gráficos y etiquetas semánticas. Además, HTML5 permite servicios de geolocalización, almacenamiento web, manejo de errores y una declaración DOCTYPE simplificada

Vamos a explorar las etiquetas de HTML5, explicando qué son y para qué sirven, acompañado de un ejemplo de código y un caso de uso para cada una.

<!DOCTYPE html>

Esta etiqueta es la declaración DOCTYPE y debe ser la primera línea en cualquier documento HTML5. Le indica al navegador que el documento es HTML5.

Caso de uso: Se utiliza al comienzo de cualquier documento HTML5.

<html>

Esta etiqueta es la raíz de una página web y contiene todas las demás etiquetas.

Ejemplo:
html
<!DOCTYPE html>
<html>
</html>

Caso de uso: Se utiliza para envolver todo el contenido de una página web.

<head>

Esta etiqueta contiene metadatos (datos sobre los datos) que no se muestran en la página web, como el título de la página y los enlaces a los archivos CSS.

Ejemplo:
html
<head>
<title>Mi Página Web</title>
</head>

Caso de uso: Se utiliza para incluir metadatos y enlaces a archivos CSS y JavaScript.

<title>

Esta etiqueta define el título de la página, que se muestra en la barra de título del navegador.

Ejemplo:
html
<title>Mi Página Web</title>

Caso de uso: Se utiliza para dar un título a la página web, que se muestra en la barra de título del navegador.

En SEO: La etiqueta «title» desempeña un papel fundamental en SEO. Su propósito es captar la atención de tu público objetivo, llevándolos a hacer clic y acceder a la página. Al redactar un título, es importante considerar una longitud óptima de alrededor de 60 caracteres o 600 píxeles para evitar la truncación. Si estás apuntando a una palabra clave competitiva, es común colocarla al principio, pero también puedes agregar algunas palabras antes de ella para optimizar el espacio y captar la atención de los usuarios. Para palabras clave largas, utiliza la longitud máxima sin sacrificar la legibilidad

<body>

Esta etiqueta contiene todo el contenido que se muestra en la página web, como texto, imágenes, enlaces, etc.

Ejemplo:
html
<body>
<h1>Hola, mundo!</h1>
</body>

Caso de uso: Se utiliza para contener todo el contenido que se muestra en la página web.

<p>

Esta etiqueta define un párrafo.

Ejemplo:
html
<p>Este es un párrafo.</p>

Caso de uso: Se utiliza para crear párrafos de texto.

<h1> a <h6>

Estas etiquetas definen los encabezados, donde `<h1>` es el encabezado de mayor nivel y `<h6>` es el de menor nivel.

Ejemplo:
html
<h1>Encabezado 1</h1>
<h2>Encabezado 2</h2>
<h3>Encabezado 3</h3>
<h4>Encabezado 4</h4>
<h5>Encabezado 5</h5>
<h6>Encabezado 6</h6>

Caso de uso: Se utilizan para crear encabezados y subencabezados en el contenido de la página web.

En SEO:

La etiqueta H1 es considerada como el título principal de una página. Es el encabezado más importante y debe ser utilizado una sola vez en cada página. Esta etiqueta le indica a los motores de búsqueda cuál es el tema principal del contenido y cómo debe ser clasificado.

Al utilizar una etiqueta H1 descriptiva y relevante para el contenido de la página, estás proporcionando una pista clara a los motores de búsqueda sobre el enfoque y la relevancia de tu sitio. Esto facilita que los motores de búsqueda comprendan la temática de tu página y la muestren en los resultados de búsqueda adecuados.

Las etiquetas H2 se utilizan para los subtítulos y subsecciones dentro de una página. Estas etiquetas ayudan a organizar el contenido y proporcionan una jerarquía clara de información.

<nav>

Esta etiqueta define una sección de enlaces de navegación.

Ejemplo:
html
<nav>
<a href=»#home»>Inicio</a> |
<a href=»#about»>Acerca de</a> |
<a href=»#contact»>Contacto</a>
</nav>

Caso de uso: Se utiliza para crear una barra de navegación en una página web.

<main>

Esta etiqueta especifica el contenido principal de un documento. El área dentro de la etiqueta `<main>` debe ser única para el documento.

Ejemplo:
html
<main>
<h1>Bienvenido a mi página web</h1>
<p>Aquí es donde va el contenido principal de mi página web.</p>
</main>

Caso de uso: Se utiliza para contener el contenido principal y único de una página web.

<section>

Esta etiqueta define una sección en un documento. Normalmente, una sección tiene un encabezado.

Ejemplo:
html
<section>
<h1>Introducción</h1>
<p>Esta es la introducción de mi artículo.</p>
</section>

Caso de uso: Se utiliza para agrupar contenido relacionado en una página web.

<article>

Esta etiqueta define un contenido independiente, que debería hacer sentido por sí mismo.

Ejemplo:
html
<article>
<h1>Título del Artículo</h1>
<p>Este es el contenido del artículo.</p>
</article>

Caso de uso: Se utiliza para contener un artículo, una entrada de blog, un comentario, etc.

<aside>

Esta etiqueta define contenido aparte del contenido alrededor del `<aside>`. El contenido debería estar relacionado con lo que lo rodea.

Ejemplo:
html
<aside>
<h3>Noticias Relacionadas</h3>
<p>Esta es una noticia relacionada con el contenido principal de la página.</p>
</aside>

Caso de uso: Se utiliza para contener contenido relacionado con el contenido principal, como una barra lateral.

<header>

Esta etiqueta define un encabezado para un documento o una sección.

Ejemplo:
html
<header>
<h1>Encabezado de la Página</h1>
</header>

Caso de uso: Se utiliza para contener el encabezado de una página web o una sección.

<footer>

Esta etiqueta define un pie de página para un documento o una sección.

Ejemplo:
html
<footer>
<p>Copyright &copy; 2023</p>
</footer>

Caso de uso: Se utiliza para contener el pie de página de una página web o una sección.

<a>

Esta etiqueta define un enlace.

Ejemplo:
html
<a href=»https://www.example.com»>Este es un enlace</a>

Caso de uso: Se utiliza para crear enlaces a otras páginas web.

En SEO:

El atributo más básico y esencial de la etiqueta <a> es el atributo href. Este atributo especifica la URL de destino a la que se dirige el enlace.

El atributo rel, abreviatura de «relation» (relación), se utiliza para establecer la relación entre la página actual y la página de destino. Hay varios valores que se pueden utilizar para el atributo rel, cada uno con un significado diferente:

  • rel=»nofollow»: Este valor indica a los motores de búsqueda que no sigan el enlace y no lo tengan en cuenta al determinar la clasificación. Se utiliza generalmente para enlaces de patrocinadores, publicidad pagada u otros enlaces que no deseas que influyan en el SEO de tu sitio.
  • rel=»noopener»: Este valor se utiliza cuando un enlace se abre en una nueva pestaña o ventana. Ayuda a evitar problemas de seguridad al asegurarse de que la página vinculada no tenga acceso a la página actual.
  • rel=»noreferrer»: Similar al atributo rel=»noopener», este valor también se utiliza para evitar problemas de seguridad al abrir enlaces en una nueva pestaña o ventana. Además, oculta la URL de origen de la página vinculada al navegador.
  • rel=»ugc»: Este valor se utiliza para enlaces generados por usuarios, como comentarios o publicaciones en foros. Indica a los motores de búsqueda que el enlace proviene de contenido generado por los usuarios y puede tener un nivel de confiabilidad diferente.
  • rel=»author»: Este valor se utiliza para establecer una relación entre el autor del contenido y la página de destino. Se utiliza principalmente en perfiles de autores, biografías o páginas relacionadas con la autoría de un contenido.

<strong>

Esta etiqueta define texto importante. El contenido dentro de la etiqueta `<strong>` se muestra en negrita.

Ejemplo:
html
<p>Este es un texto <strong>importante</strong>.</p>

Caso de uso: Se utiliza para destacar texto importante.

En SEO: El uso de negritas es una técnica comúnmente utilizada en el ámbito del SEO para resaltar palabras o frases clave en el contenido de una página web. Las negritas tienen un impacto tanto en la legibilidad del contenido como en la optimización para motores de búsqueda.

<small>

Esta etiqueta define texto más pequeño.

Ejemplo:
html
<p>Este es un texto <small>más pequeño</small>.</p>

Caso de uso: Se utiliza para mostrar texto en un tamaño más pequeño, como una nota al pie o un texto legal.

<cite>

Esta etiqueta define el título de un trabajo (como un libro, una canción, una película, una pintura, una escultura, etc.).

Ejemplo:
html
<p><cite>El Quijote</cite> es una novela escrita por Miguel de Cervantes.</p>

Caso de uso: Se utiliza para citar el título de un trabajo.

<sub>

Esta etiqueta define texto subíndice.

Ejemplo:
html
<p>Este es un texto <sub>subíndice</sub>.</p>

Caso de uso: Se utiliza para mostrar texto en subíndice, como en fórmulas químicas (H2O).

<sup>

Esta etiqueta define texto superíndice.

Ejemplo:
html
<p>Este es un texto <sup>superíndice</sup>.</p>

Caso de uso: Se utiliza para mostrar texto en superíndice, como en exponentes matemáticos (E = mc^2).

<mark>

Esta etiqueta define texto marcado o resaltado.

Ejemplo:
html
<p>Este es un texto <mark>marcado</mark>.</p>

Caso de uso: Se utiliza para resaltar partes del texto.

<span>

Esta etiqueta es un contenedor en línea que se utiliza para agrupar un fragmento de texto con un propósito específico.

Ejemplo:
html
<p>Este es un texto con un <span style=»color:blue»>fragmento azul</span>.</p>

Caso de uso: Se utiliza para aplicar estilos a partes del texto.

<br>

Esta etiqueta define un salto de línea.

Ejemplo:
html
<p>Este es un texto.<br>Este es otro texto.</p>

Caso de uso: Se utiliza para crear un salto de línea en el texto.

<img>

Esta etiqueta define una imagen.

Ejemplo:
html
<img src=»imagen.jpg» alt=»Descripción de la imagen»>

Caso de uso: Se utiliza para insertar imágenes en una página web.

En SEO: Las imágenes desempeñan un papel fundamental en el SEO debido a su capacidad para mejorar la experiencia del usuario, aumentar la participación y contribuir a un mejor posicionamiento. La etiqueta tiene atributos obligatorios como «src» para especificar la ruta de la imagen y «alt» para el texto alternativo en caso de que la imagen no se pueda mostrar. Se recomienda especificar el ancho y alto de la imagen para evitar parpadeos en la página durante la carga. Otros atributos incluyen «crossorigin», «ismap», «loading», «longdesc», «referrerpolicy», «sizes», «srcset», «usemap», entre otros.

<iframe>

Esta etiqueta define un marco en línea que se utiliza para incrustar otro documento en la página web actual.

Ejemplo:
html
<iframe src=»https://www.example.com»></iframe>

Caso de uso: Se utiliza para incrustar otro documento, como un mapa de Google Maps, en una página web.

En SEO: esta etiqueta está desaconsejada porque Google no la interpreta bien.

<embed>

Esta etiqueta define un contenedor para una aplicación externa o contenido interactivo (un plugin).

Ejemplo:
html
<embed src=»video.swf»>

Caso de uso: Se utiliza para incrustar contenido como videos, juegos, etc.

<object>

Esta etiqueta define un objeto incrustado, como una imagen, un archivo de audio, un archivo de video, una aplicación, etc.

Ejemplo:
html
<object data=»video.swf»></object>

Caso de uso: Se utiliza para incrustar contenido multimedia y aplicaciones.

<video>

Esta etiqueta define un video o una película.

Ejemplo:
html
<video src=»video.mp4″ controls></video>

Caso de uso: Se utiliza para incrustar un video en una página web.

<audio>

Esta etiqueta define sonido o música.

Ejemplo:
html
<audio src=»audio.mp3″ controls></audio>

Caso de uso: Se utiliza para incrustar un audio en una página web.

<source>

Esta etiqueta define múltiples recursos de medios para elementos `<picture>`, `<audio>` y `<video>`.

Ejemplo:
html
<video controls>
<source src=»video.mp4″ type=»video/mp4″>
<source src=»video.ogg» type=»video/ogg»>
</video>

Caso de uso: Se utiliza para especificar múltiples formatos de medios para compatibilidad con diferentes navegadores.

<svg>

Esta etiqueta define gráficos vectoriales escalables, que pueden ser animados y editados con CSS y JavaScript.

Ejemplo:
html
<svg width=»100″ height=»100″>
<circle cx=»50″ cy=»50″ r=»40″ stroke=»black» stroke-width=»3″ fill=»red» />
</svg>

Caso de uso: Se utiliza para crear gráficos vectoriales escalables.

<table>

Esta etiqueta define una tabla.

Ejemplo:
html
<table>
<tr>
<th>Encabezado 1</th>
<th>Encabezado 2</th>
</tr>
<tr>
<td>Dato 1</td>
<td>Dato 2</td>
</tr>
</table>

Caso de uso: Se utiliza para crear tablas de datos.

<caption>

Esta etiqueta define el título de una tabla.

Ejemplo:
html
<table>
<caption>Título de la Tabla</caption>
<tr>
<th>Encabezado 1</th>
<th>Encabezado 2</th>
</tr>
<tr>
<td>Dato 1</td>
<td>Dato 2</td>
</tr>
</table>

Caso de uso: Se utiliza para dar un título a una tabla de datos.

<colgroup>

Esta etiqueta especifica un grupo de una o más columnas en una tabla para formatear.

Ejemplo:
html
<table>
<colgroup>
<col span=»2″ style=»background-color:red»>
</colgroup>
<tr>
<th>Encabezado 1</th>
<th>Encabezado 2</th>
</tr>
<tr>
<td>Dato 1</td>
<td>Dato 2</td>
</tr>
</table>

Caso de uso: Se utiliza para aplicar estilos a grupos de columnas en una tabla de datos.

<tbody>

Esta etiqueta agrupa el cuerpo del contenido en una tabla.

Ejemplo:
html
<table>
<thead>
<tr>
<th>Encabezado 1</th>
<th>Encabezado 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dato 1</td>
<td>Dato 2</td>
</tr>
</tbody>
</table>

Caso de uso: Se utiliza para agrupar el cuerpo del contenido en una tabla de datos.

<thead>

Esta etiqueta agrupa el encabezado del contenido en una tabla.

Ejemplo:
html
<table>
<thead>
<tr>
<th>Encabezado 1</th>
<th>Encabezado 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dato 1</td>
<td>Dato 2</td>
</tr>
</tbody>
</table>

Caso de uso: Se utiliza para agrupar el encabezado del contenido en una tabla de datos.

<tfoot>

Esta etiqueta agrupa el pie del contenido en una tabla.

Ejemplo:
html
<table>
<thead>
<tr>
<th>Encabezado 1</th>
<th>Encabezado 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dato 1</td>
<td>Dato 2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan=»2″>Pie de la tabla</td>
</tr>
</tfoot>
</table>

Caso de uso: Se utiliza para agrupar el pie del contenido en una tabla de datos.

<tr>

Esta etiqueta define una fila en una tabla.

Ejemplo:
html
<table>
<tr>
<th>Encabezado 1</th>
<th>Encabezado 2</th>
</tr>
<tr>
<td>Dato 1</td>
<td>Dato 2</td>
</tr>
</table>

Caso de uso: Se utiliza para crear filas en una tabla de datos.

<td>

Esta etiqueta define una celda de datos en una tabla.

Ejemplo:
html
<table>
<tr>
<td>Dato 1</td>
<td>Dato 2</td>
</tr>
</table>

Caso de uso: Se utiliza para crear celdas de datos en una tabla de datos.

<th>

Esta etiqueta define una celda de encabezado en una tabla.

Ejemplo:
html
<table>
<tr>
<th>Encabezado 1</th>
<th>Encabezado 2</th>
</tr>
</table>

Caso de uso: Se utiliza para crear celdas de encabezado en una tabla de datos.

<form>

Esta etiqueta define un formulario HTML para la entrada del usuario.

Ejemplo:
html
<form action=»/submit_form» method=»post»>
<label for=»name»>Nombre:</label><br>
<input type=»text» id=»name» name=»name»><br>
<input type=»submit» value=»Enviar»>
</form>

Caso de uso: Se utiliza para crear formularios para la entrada del usuario.

<fieldset>

Esta etiqueta se utiliza para agrupar elementos relacionados en un formulario.

Ejemplo:
html
<form action=»/submit_form» method=»post»>
<fieldset>
<legend>Información Personal</legend>
<label for=»name»>Nombre:</label><br>
<input type=»text» id=»name» name=»name»><br>
</fieldset>
<input type=»submit» value=»Enviar»>
</form>

Caso de uso: Se utiliza para agrupar elementos relacionados en un formulario.

<legend>

Esta etiqueta define un título para el `<fieldset>`.

Ejemplo:
html
<fieldset>
<legend>Información Personal</legend>
<label for=»name»>Nombre:</label><br>
<input type=»text» id=»name» name=»name»><br>
</fieldset>

Caso de uso: Se utiliza para dar un título a un grupo de elementos relacionados en un formulario.

<label>

Esta etiqueta define una etiqueta para un elemento `<input>`.

Ejemplo:
html
<label for=»name»>Nombre:</label>
<input type=»text» id=»name» name=»name»>

Caso de uso: Se utiliza para dar una etiqueta a un elemento `<input>` en un formulario.

<input>

Esta etiqueta define un campo de entrada donde el usuario puede ingresar datos.

Ejemplo:
html
<label for=»name»>Nombre:</label>
<input type=»text» id=»name» name=»name»>

Caso de uso: Se utiliza para crear campos de entrada en un formulario.

<button>

Esta etiqueta define un botón clickeable.

Ejemplo:
html
<button type=»button»>Haz clic en mí</button>

Caso de uso: Se utiliza para crear botones en una página web.

<select>

Esta etiqueta define una lista desplegable.

Ejemplo:
html
<select name=»cars»>
<option value=»volvo»>Volvo</option>
<option value=»saab»>Saab</option>
<option value=»mercedes»>Mercedes</option>
<option value=»audi»>Audi</option>
</select>

Caso de uso: Se utiliza para crear una lista desplegable en un formulario.

<option>

Esta etiqueta define una opción en una lista desplegable.

Ejemplo:
html
<select name=»cars»>
<option value=»volvo»>Volvo</option>
<option value=»saab»>Saab</option>
</select>

Caso de uso: Se utiliza para crear opciones en una lista desplegable en un formulario.

<textarea>

Esta etiqueta define un campo de entrada de texto multilínea.

Ejemplo:

<label for=»message»>Mensaje:</label>
<textarea id=»message» name=»message»></textarea>

Caso de uso: Se utiliza para crear campos de entrada de texto multilínea en un formulario.

 

Espero que esta guía te sea de utilidad para entender las etiquetas de HTML5. Recuerda que la práctica hace al maestro, así que te animo a que empieces a experimentar con estas etiquetas por ti mismo. ¡Feliz codificación!

Aún no hay comentarios
¿Qué te ha parecido este contenido?

Al pulsar en "Enviar" aceptas nuestra Política de Privacidad - + Información, para tratar tus datos con la finalidad de tramitar las consultas que puedas plantearnos.