Las etiquetas HTML y los atributos
Mostraremos cómo funcionan las etiquetas HTML, anatomía, las etiquetas de texto, de bloque y la estructura de un documento HTML.
Las etiquetas HTML y los atributos
HTML (HyperText Markup Language) es el lenguaje base para estructurar contenido en la web. Se compone de etiquetas que indican la estructura y el significado del contenido, y atributos que añaden información adicional a estas etiquetas.
¿Qué son las etiquetas HTML?
Las etiquetas HTML son palabras clave rodeadas por corchetes angulares (<>). Por lo general, vienen en pares:
- Una etiqueta de apertura:
<nombre_etiqueta> - Una etiqueta de cierre:
</nombre_etiqueta>
El contenido entre estas etiquetas es lo que se muestra o se interpreta.
Ejemplo básico:
<p>Hola, mundo!</p>
<p>: etiqueta de apertura para un párrafo.</p>: etiqueta de cierre.- Contenido: «Hola, mundo!».
¿Qué son los atributos HTML?
Los atributos son información adicional que puedes añadir a las etiquetas para definir propiedades o comportamientos. Siempre se escriben dentro de la etiqueta de apertura.
Sintaxis:
<nombre_etiqueta atributo="valor">Contenido</nombre_etiqueta>
Por ejemplo:
<a href="https://www.ejemplo.com">Visita nuestro sitio</a>
<a>: etiqueta de anclaje (enlace).href: atributo que define la URL del enlace.https://www.ejemplo.com: valor del atributo.
Tipos Comunes de Etiquetas y sus Atributos
1. Etiqueta de Encabezado (<h1> a <h6>)
Usadas para títulos, donde <h1> es el más importante y <h6> el menos importante.
Ejemplo:
<h1>Bienvenido a Mi Sitio</h1>
<h2>Sección Principal</h2>
2. Etiqueta de Párrafo (<p>)
Sirve para definir bloques de texto.
Ejemplo:
<p>Este es un ejemplo de un párrafo.</p>
3. Etiqueta de Imagen (<img>)
Sirve para incrustar imágenes. Nota: Esta etiqueta no necesita cierre.
Atributos comunes:
src: especifica la ubicación de la imagen.alt: texto alternativo que se muestra si la imagen no carga.
Ejemplo:
<img src="imagen.jpg" alt="Descripción de la imagen">
4. Etiqueta de Enlace (<a>)
Crea un enlace a otra página o recurso.
Atributos comunes:
href: URL del enlace.target: especifica dónde abrir el enlace (_self,_blank, etc.).
Ejemplo:
<a href="https://www.google.com" target="_blank">Ir a Google</a>
5. Etiqueta de Lista (<ul> y <ol>)
Crea listas desordenadas (con viñetas) o ordenadas (numeradas).
Ejemplo de lista desordenada:
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
</ul>
Ejemplo de lista ordenada:
<ol>
<li>Primer paso</li>
<li>Segundo paso</li>
</ol>
6. Etiqueta de Botón (<button>)
Crea un botón interactivo.
Ejemplo:
<button type="button">Haz clic aquí</button>
¿Cómo combinar etiquetas y atributos?
Puedes combinar varias etiquetas y atributos para crear contenido más complejo.
Ejemplo:
<a href="https://www.misitio.com" target="_blank">
<img src="logo.png" alt="Logo de Mi Sitio">
</a>
En este caso:
- La etiqueta
<a>enlaza a «https://www.misitio.com«. - La etiqueta
<img>muestra un logo que actúa como enlace.
Práctica
Intenta escribir el siguiente código en un archivo .html y abrelo en tu navegador:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Primer Documento HTML</title>
</head>
<body>
<h1>¡Hola, mundo!</h1>
<p>Este es un documento HTML con varias etiquetas.</p>
<img src="imagen.jpg" alt="Ejemplo de imagen">
<a href="https://www.ejemplo.com" target="_blank">Visita nuestro sitio</a>
</body>
</html>
¡Con estos conceptos y ejemplos, ya tienes una base sólida para crear páginas web! A medida que practiques, te sentirás más cómodo trabajando con etiquetas y atributos en HTML.
Diccionario de Etiquetas HTML
| Etiqueta | Significado | Explicación |
|---|---|---|
| <html> | Raíz del Documento HTML | Define la raíz de un documento HTML. Todas las demás etiquetas deben estar anidadas dentro de esta etiqueta. |
| <head> | Sección de la Cabecera | Contiene metadatos sobre el documento, como el título, enlaces a hojas de estilo y scripts. |
| <body> | Sección del Cuerpo | Contiene el contenido que se muestra en la página web, como texto, imágenes y enlaces. |
| <h1> a <h6> | Encabezados | Se utilizan para definir encabezados, siendo <h1> el más importante y <h6> el menos. |
| <p> | Párrafo | Define un bloque de texto como un párrafo. |
| <a> | Enlace | Crea un hipervínculo a otra página o recurso utilizando el atributo href. |
| <img> | Imagen | Inserta una imagen utilizando el atributo src para la ruta de la imagen. |
| <ul> | Lista Desordenada | Crea una lista con viñetas. Los elementos de la lista se definen usando etiquetas <li>. |
| <ol> | Lista Ordenada | Crea una lista numerada. Los elementos de la lista se definen usando etiquetas <li>. |
| <div> | División | Define un contenedor para contenido, que a menudo se usa para estilos o diseño. |
| <span> | Contenedor en Línea | Se utiliza para agrupar elementos en línea con fines de estilo. |
| <form> | Formulario | Define un formulario para la entrada de usuario, que puede incluir campos de texto, casillas de verificación y botones. |
| <input> | Campo de Entrada | Define un campo de entrada para formularios. El atributo type especifica el tipo de entrada. |
| <button> | Botón | Define un botón clicable. |
| <table> | Tabla | Define una tabla. Las filas se crean usando <tr> y las celdas usando <td> o <th>. |
