Etiquetas HTML: ¿Qué son y cómo se usan?
Explora el mundo de las etiquetas HTML, instrucciones que guían al navegador web en la presentación del contenido de páginas. Desde las más usadas hasta aquellas que desatan la creatividad, te sumergirás en ejemplos que revelan su impacto directo en la apariencia y estructura de una página. ¡Acompáñanos en este recorrido donde cada etiqueta cuenta una historia única en el lenguaje de la web!
Sigue las palabras fuertes si quieres un resumen de todo el artículo.
Índice
1. ¿Qué es una etiqueta HTML?
Las etiquetas HTML, o también llamadas «tags HTML» son los componentes básicos de una página web. Son instrucciones que le indican al navegador (como Google) cómo debe estructurar y presentar el contenido de una página. Cada etiqueta está rodeada por corchetes angulares (< >) y generalmente viene en pares de apertura y cierre. La etiqueta de cierre tiene una barra diagonal antes del nombre de la etiqueta.
Por ejemplo, la etiqueta <h1> le dice al navegador que el texto que le sigue es un encabezado de nivel 1. La etiqueta <p> le dice al navegador que el texto que le sigue es un párrafo.
Las etiquetas HTML se escriben en un lenguaje llamado HTML (HyperText Markup Language), que es el lenguaje estándar para crear páginas web.
1.1. ¿Qué es una etiqueta HTML vacía?
Las «etiquetas vacías» o «etiquetas auto-cerradas» son aquellas etiquetas HTML que no tienen contenido interno y no requieren una etiqueta de cierre separada. En lugar de tener una apertura y cierre distintos, estas etiquetas se cierran en sí mismas mediante un formato especial.
La sintaxis general de una etiqueta vacía es la siguiente:
Aquí, <nombre_etiqueta> representa el nombre de la etiqueta, y puedes incluir atributos con sus respectivos valores. Esta forma simplificada de etiquetas se utiliza en situaciones donde la etiqueta no contiene ningún contenido adicional.
Ejemplos comunes de etiquetas o tags HTML vacías:
- Etiqueta de Imagen (<img>): Utilizada para insertar imágenes en una página web.
- Etiqueta de Salto de Línea (<br>): Crea un salto de línea dentro del texto
- Etiqueta de Línea Horizontal (<hr>): Dibuja una línea horizontal en la página.
- Etiqueta de Área de Texto (<textarea>): Define un área de texto en un formulario.
Estas etiquetas vacías son útiles cuando no necesitas proporcionar contenido adicional entre las etiquetas de apertura y cierre, y su uso simplifica la escritura del código. Es importante recordar que no todos los elementos en HTML pueden ser etiquetas vacías; depende de la especificación de cada etiqueta en particular.
1.2. ¿Para que sirven las etiquetas HTML en una página web?
Las etiquetas HTML proporcionan una estructura y un significado semántico al contenido. Cada etiqueta tiene una función específica y contribuye a la presentación, organización y accesibilidad de la información en una página web.
Aquí hay algunas funcionalidades clave de las etiquetas HTML:
- Estructuración del Documento: Las etiquetas como <html>, <head>, y <body> establecen la estructura básica del documento HTML, dividiéndolo en secciones principales.
- Títulos y Encabezados: Las etiquetas <h1>, <h2>, …, <h6> se utilizan para definir títulos y encabezados, proporcionando jerarquía y estructura al contenido.
- Párrafos y Texto: La etiqueta <p> se utiliza para definir párrafos, mientras que otras como <strong>, <em>, <span>, y <div> ayudan a aplicar formato y estilo al texto.
- Enlaces: La etiqueta <a> se usa para crear enlaces, permitiendo la navegación entre páginas web y recursos en línea.
- Imágenes: La etiqueta <img> se emplea para insertar imágenes en la página web, proporcionando contenido visual.
- Listas: Las etiquetas <ul>, <ol>, y <li> se utilizan para crear listas no ordenadas y ordenadas, organizando información de manera estructurada.
- Tablas: Las etiquetas <table>, <tr>, <td>, y <th> se usan para crear tablas, facilitando la presentación de datos en forma tabular.
- Formularios: Las etiquetas <form>, <input>, <select>, y <button> permiten la creación de formularios para recopilar información del usuario.
- Multimedia: Etiquetas como <audio> y <video> facilitan la inclusión de archivos de audio y video en una página web.
- Elementos Semánticos: Etiquetas como <header>, <footer>, <nav>, <article>, y <section> agregan significado semántico y ayudan a estructurar el contenido de manera más clara.
- Meta información: La etiqueta <meta> se utiliza para proporcionar información adicional sobre el documento, como la codificación de caracteres y las descripciones de la página.
- Atributos y Estilos: Los atributos en las etiquetas y la conexión con estilos en CSS permiten personalizar la apariencia y el diseño de la página web.
Al trabajar juntas, estas etiquetas forman la base de la presentación de contenido en la web, proporcionando una estructura clara, facilitando la navegación y mejorando la accesibilidad para los usuarios y los motores de búsqueda.
2. ¿Cómo crear y usar correctamente las etiquetas HTML?.
Utilizar correctamente las etiquetas HTML no solo es esencial para el desarrollo y mantenimiento de una página web, sino que también tiene un impacto directo en cómo los motores de búsqueda como Google interpretan y clasifican el contenido. En este sentido recomiendo ver la importancia de las etiquetas HTML5 semánticas.
Teniendo en cuenta esto, aquí te dejo unos pasos para crear una página web bajo una estructura de etiquetas HTML básica y como lo puedes visualizar en navegadores como Google:
Para este paso recomiendo primero ver el siguiente artículo sobre como instalar Visual Studio Code, esta es la herramienta que nosotros usamos para el desarrollo web, la cual es fácil e intuitiva de usar. En el punto 5 de este artículo veras los paso a paso para crear una página web (de manera básica), lo cual te permitirá realizar este paso para crear y usar una etiqueta HTML de una manera mas sencilla.
- Elige un Editor de Texto:
- Abre un editor de texto como Visual Studio Code, Sublime Text, u otro de tu elección.
- Crea una carpeta para tu proyecto desde tu PC:
- Desde cualquier punto del escritorio de tu ordenar PC sigue los siguientes pasos
"Clic derecho" > "Nuevo" > "Carpeta". Ahora puedes ponerle el nombre que desees a la carpeta que creamos, por ejemplo: «Proyecto_web».
- Desde cualquier punto del escritorio de tu ordenar PC sigue los siguientes pasos
- Abre la carpeta desde Visual Studio Code:
- Una vez dentro del programa, dirígete al
"Menú izq" > "Open Folder", ahora selecciona la carpeta que creamos en el punto anterior desde el escritorio.
- Una vez dentro del programa, dirígete al
- Añade la Estructura HTML:
- Escribe la estructura básica de un documento HTML.
- Puedes copiar y pegar el siguiente código:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de Etiquetas</title>
</head>
<body>
<h1>Bienvenido a mi página web</h1>
<p>Este es un párrafo de texto.</p>
</body>
</html>Lenguaje del código: HTML, XML (xml)- Introduce Contenido Textual (usando etiquetas HTML de contenido) dentro del <body>:
- Entre la etiqueta <body> y </body> (ver ejemplo de código anterior), puedes añadir contenido textual . En la imagen superior sería:
<h1>Bienvenido a mi página web</h1>(etiqueta HTML de encabezados)<p>Este es un párrafo de texto.</p>(etiqueta textual para párrafos)
- Personaliza con CSS:
- Añade estilos a tu página utilizando CSS para mejorar la apariencia.
- Puedes colocar estas reglas de estilo dentro de la etiqueta <style> en el <head> o enlazar a un archivo CSS externo.
- Guardar el Archivo:
- Una vez que hayas copiado y pegados los códigos anteriores, guarda estos cambios para lo cual, puedes usar el atajo
"ctrl + S". O dirigirte a"File" >"Save".
- Una vez que hayas copiado y pegados los códigos anteriores, guarda estos cambios para lo cual, puedes usar el atajo
- Visualiza tu trabajo en el navegador: Ahora, para poder visualizar la página, puedes:
- Dirigirte al archivo
index.htmldesde tu PC, y hacer doble clic en el y se abrirá automáticamente en tu navegador predeterminado. - O directamente desde V S Code, si estas usando la extensión de Live Server, puedes hacer clic derecho en el archivo de
index.htmldesde el menú izquierdo de VSC, y luego en"abrir con Live Server"o en ingles"Open with Live Server".
- Dirigirte al archivo
- Modifica, explora y aprende:
- Realiza ajustes según tus preferencias y continúa aprendiendo y explorando nuevas etiquetas y conceptos.
Como habrás notado, al seguir estos pasos podrás crear una página web básica, pero seguramente te ayudará a entender un poco mas a profundidad que son y para que sirven las etiquetas HTML.
3. Categorías de etiquetas HTML: Bloque vs. En Línea.
Esta clasificación de las etiquetas de bloque y en línea en HTML, se basa en cómo se comportan y cómo afectan el flujo del contenido en una página web.
3.1. Etiquetas de bloque:
Comportamiento:
- Ocupan todo el ancho disponible del contenedor padre.
- Comienzan en una nueva línea.
- Permiten que otros elementos de bloque se coloquen a su lado.
- No se pueden colocar dentro de otras etiquetas en línea.
Ejemplos:
- <h1> – Encabezado
- <p> – Párrafo
- <div> – División
- <ul> – Lista sin ordenar
- <table> – Tabla
Estas etiquetas de bloque se utilizan para crear la estructura principal de una página web, como encabezados, párrafos, secciones y contenedores.
3.2. Etiquetas en línea:
Comportamiento:
- Ocupan solo el espacio necesario para su contenido.
- Se pueden colocar dentro de otras etiquetas en línea o de bloque.
- No comienzan en una nueva línea.
- Permiten que otros elementos en línea se coloquen a su lado.
Ejemplos:
- <strong> – Texto en negrita
- <em> – Texto en cursiva
- <a> – Enlace
- <img> – Imagen
- <span> – Intervalo
Estas etiquetas en línea se utilizan para dar formato al contenido dentro de los elementos de bloque, como el estilo del texto, imágenes y enlaces.
3.3. Ejemplo ilustrativo de etiqueta HTML de bloque y en línea:
En este ejemplo:
- <p> es una etiqueta de bloque que crea un párrafo.
- <strong> es una etiquetas en línea que da formato al texto dentro del párrafo.
4. Tipos de etiquetas HTML más usados.
Estas son las más comunes, hay muchas más etiquetas HTML disponibles para diversas funciones. Las etiquetas se combinan y anidan según la necesidad, creando la estructura completa de una página web.
Algunas de las clases de etiquetas HTML más comunes incluyen:
- Etiquetas de Estructura Básica:
- <html>: Define el inicio y fin del documento HTML.
- <head>: Contiene elementos como <title>, <meta>, y <link> para información del encabezado.
- <body>: Contiene el contenido visible de la página.
- Etiquetas de Encabezado:
- <h1>, <h2>, …, <h6>: Definen títulos y encabezados de diferentes niveles.
- Etiquetas de Texto:
- <p>: Define párrafos de texto.
- <span>: Agrupa contenido en línea para aplicar estilos o scripts.
- <strong> y <em>: Resaltan texto en negrita y cursiva, respectivamente.
- <br>: Crea un salto de línea.
- Etiquetas de Lista:
- <ul>: Define una lista no ordenada.
- <ol>: Define una lista ordenada.
- <li>: Define un elemento de lista.
- Etiquetas de Enlace:
- <a>: Crea enlaces a otras páginas o recursos.
- <link>: Enlaza a recursos externos como hojas de estilo o iconos.
- Etiquetas de Imagen:
- <img>: Inserta imágenes en la página.
- Etiquetas de Tabla:
- <table>: Define una tabla.
- <tr>: Define una fila en una tabla.
- <td>: Define una celda de datos.
- <th>: Define una celda de encabezado.
- Etiquetas de Formulario:
- <form>: Define un formulario.
- <input>: Crea campos de entrada en un formulario.
- <select>, <option>: Crean listas desplegables.
- <button>: Define un botón en un formulario.
- Etiquetas Semánticas:
- <header>, <footer>, <nav>, <main>, <article>, <section>: Añaden significado semántico y ayudan a estructurar el contenido de manera más clara.
- Etiquetas de Multimedia:
- <audio>, <video>: Permiten la incorporación de archivos de audio y video.
- Otras Etiquetas:
- <meta>: Proporciona información adicional sobre el documento.
- <div>: Agrupa contenido para aplicar estilos o scripts.
- <style>: Contiene reglas de estilo CSS.
La elección y comprensión adecuada de las etiquetas son esenciales para desarrollar páginas web efectivas, que ayuden a los navegadores a entender con mayor facilidad la estructura de tus páginas, y a su vez aumentando las probabilidades de mejorar su posicionamiento orgánico SEO en sus search.
5. Etiquetas HTML con atributos y valores.
Como ya dijimos en un comienzo:
LAS ETIQUETAS:
Se utilizan para estructurar y organizar el contenido de una página web, comienza con un signo de menor que < y termina con un signo de mayor que >. La mayoría de las etiquetas tienen una forma de apertura y una forma de cierre, y el contenido se coloca entre estas dos partes.
LOS ATRIBUTOS Y SUS VALORES:
Mientras que los atributos y valores HTML son elementos que permiten incorporar características adicionales al agregarlas a las etiquetas para modificar su comportamiento o apariencia. Aquí ampliamos estos conceptos:
- Los ATRIBUTOS son información adicional que se proporciona dentro de las etiquetas HTML. Se incluyen dentro de la etiqueta de apertura y generalmente tienen un formato clave-valor.
- Los VALORES de atributos permiten personalizar y ajustar el comportamiento o el estilo de los elementos en una página web, brindando flexibilidad y control al desarrollador.
Ejemplo ilustrativo para entender la diferencia entre etiqueta HTML, atributos y valores.
- Etiquetas: Son las que definen el tipo de contenido, en este caso <p> es la etiqueta de apertura para introducir un párrafo y se cierran con una etiqueta de cierre </p> correspondiente.
- Contenido: El contenido es un párrafo, en el ejemplo es «Párrafo de texto en azul«.
- Atributo: style=«color: blue;» es el atributo que contiene la declaración de estilo.
- Los atributos se especifican dentro de la etiqueta de apertura y pueden tener valores asociados.
- Valor: «color: blue;» es el valor del atributo «style». En este caso, establece el color del texto en azul.
- Aclaración: Por lo general, es preferible utilizar CSS para aplicar estilos de manera más organizada y mantenible. Generalmente, los atributos y valores pueden ser utilizados para aplicar estilos en línea.
PREGUNTAS FRECUENTES Y RESUMEN
Las etiquetas HTML son componentes del lenguaje HTML que definen la estructura y el contenido de una página web. Se utilizan para crear elementos como párrafos, encabezados, enlaces, imágenes y formularios, permitiendo así la organización y presentación de información en el navegador.
La sintaxis de las etiquetas HTML incluye una etiqueta de apertura y una de cierre. Por ejemplo, para un párrafo: <p>Contenido del párrafo</p>. Algunas etiquetas son auto-cerrables, como <br> o <img>.
Los tipos de etiquetas HTML incluyen etiquetas de texto (<p>, <h1>-<h6>), etiquetas de enlace (<a>), etiquetas de lista (<ul>, <ol>, <li>), etiquetas de formulario (<input>, <textarea>), y etiquetas multimedia (<img>, <video>).
Las etiquetas HTML se utilizan para crear y organizar elementos en una página web. Por ejemplo, <h1> define un encabezado, <p> define un párrafo, <a> crea un enlace, y <img> inserta una imagen. Estas etiquetas ayudan a estructurar el contenido de manera lógica y accesible.
Algunas de las etiquetas HTML más comunes son <div>, <p>, <a>, <img>, <ul>, <ol>, <li>, <h1> a <h6>, y <form>. Estas etiquetas son fundamentales para estructurar y dar formato al contenido de una página web.
Para cerrar correctamente las etiquetas HTML, utiliza una etiqueta de cierre que corresponde a la etiqueta de apertura. Por ejemplo, <p>Texto</p>. Algunas etiquetas no requieren cierre, como <br> y <img>, pero se recomienda seguir las reglas de XHTML para autocerrarlas: <br />.
Puedes encontrar más información sobre las etiquetas HTML en la documentación de Mozilla Developer Network (MDN). Este recurso ofrece tutoriales, referencias y ejemplos detallados para cada etiqueta HTML.
Para utilizar las etiquetas HTML de manera efectiva, sigue estas mejores prácticas: usa etiquetas semánticas para mejorar la accesibilidad y SEO, valida tu HTML para asegurar compatibilidad, y organiza tu código con indentación y comentarios. Evita el uso excesivo de <div> y <span>, y prioriza las etiquetas adecuadas.