HTML - Etiquetas básicas
Etiquetas básicas comunes
Encabezados
HTML tiene seis niveles de encabezados, desde <h1> hasta <h6>, para estructurar el contenido de una página web. La etiqueta <h1> es el encabezado principal, mientras que <h6> es el subencabezado más pequeño. Cada nivel de encabezado tiene un estilo e importancia diferentes. El uso de encabezados ayuda a crear una estructura clara para tu contenido, facilitando a los lectores la comprensión de la organización de tu página web.
Párrafos
La etiqueta <p> define párrafos de texto en HTML. Es un elemento a nivel de bloque, lo que significa que los navegadores agregan algo de espacio vertical antes y después de cada elemento <p>. Los párrafos organizan y separan fragmentos de texto, haciendo que tu contenido sea más legible. Usa la etiqueta <p> para agrupar oraciones o ideas relacionadas, creando un flujo lógico de información.
Consejo: Código HTML para un párrafo con espacios extra
<p>Este es un párrafo con espacios extra.</p>Cuando un navegador renderiza este código, mostrará el texto como:
Consejo: Texto renderizado para un párrafo con espacios extra
Este es un párrafo con espacios extra.
Enlaces
La etiqueta <a>, abreviatura de "anchor" (ancla), crea hipervínculos a otras páginas web o recursos. El atributo href dentro de la etiqueta <a> especifica la URL de destino o la ruta al recurso vinculado. Los enlaces se pueden aplicar a texto, imágenes u otros elementos HTML, permitiendo a los usuarios navegar entre diferentes páginas o acceder a información adicional. Al crear enlaces, usa texto claro y descriptivo para indicar el propósito o destino del enlace.
Imágenes
La etiqueta <img> incrusta imágenes en páginas web. Es una etiqueta de cierre automático, lo que significa que no necesita una etiqueta de cierre separada. El atributo src especifica la ruta o URL del archivo de imagen, mientras que el atributo alt proporciona texto alternativo para accesibilidad y optimización de motores de búsqueda. El texto alternativo describe el contenido de la imagen y se muestra cuando la imagen no se puede cargar o cuando un usuario está utilizando tecnologías de asistencia, como lectores de pantalla.
Listas
HTML tiene dos tipos de listas:
| Tipo de lista | Etiqueta | Descripción |
|---|---|---|
| Desordenada | <ul> |
Se usa cuando el orden de los elementos no es importante, típicamente se muestra con viñetas |
| Ordenada | <ol> |
Se usa cuando el orden de los elementos importa, se muestra con marcadores numerados |
Cada elemento dentro de una lista está representado por la etiqueta <li> (elemento de lista). Las listas son útiles para presentar una serie de elementos relacionados o pasos de una manera estructurada.
Énfasis y Énfasis fuerte
Para agregar énfasis a palabras o frases dentro de tu texto, puedes usar las etiquetas <em> y <strong>. La etiqueta <em> indica énfasis y normalmente los navegadores la muestran como texto en cursiva. Transmite un cambio en el significado o tono del contenido enfatizado. La etiqueta <strong> indica énfasis fuerte y normalmente se muestra como texto en negrita. Implica una mayor importancia en comparación con el texto circundante. Usa estas etiquetas con moderación para resaltar puntos clave o llamar la atención sobre partes específicas de tu contenido.
Consejo: Código HTML con etiquetas mal emparejadas
<p>Esto es un párrafo.</div>En este caso, la etiqueta de apertura <p> se cierra con una etiqueta </div>, lo cual es incorrecto. La forma correcta de cerrar el párrafo es:
Consejo: Código HTML corregido para un párrafo
<p>Esto es un párrafo.</p>