Etiquetas de texto
Etiquetas de texto
Vamos a ver algunas etiquetas de texto que podemos emplear en nuestras páginas.
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.
La sintaxis en programación y desarrollo web se refiere a las reglas y estructuras que determinan cómo deben escribirse y organizarse los elementos de un lenguaje o tecnología para que sean entendidos y ejecutados correctamente por una máquina o navegador.
En el contexto de HTML:
- La sintaxis HTML define cómo deben organizarse las etiquetas y atributos para estructurar una página web correctamente.
- Cada etiqueta tiene un formato específico, generalmente con una etiqueta de apertura, contenido, y una etiqueta de cierre, por ejemplo:
<p>Este es un párrafo.</p>Aquí:<p>es la etiqueta de apertura.</p>es la etiqueta de cierre.- «Este es un párrafo.» es el contenido.
Características clave de la sintaxis HTML:
- Etiquetas siempre encerradas en
< >.- Las etiquetas de apertura y cierre deben coincidir.
- Atributos dentro de las etiquetas.
- Se usan para definir propiedades, como en:
<img src="imagen.jpg" alt="Descripción de la imagen">
- Se usan para definir propiedades, como en:
- Orden jerárquico.
- Las etiquetas deben estar correctamente anidadas:
<div> <p>Texto dentro de un div.</p> </div> - Aquí
<p>está dentro del<div>y se cierra correctamente.
- Las etiquetas deben estar correctamente anidadas:
Importancia:
Si la sintaxis no es correcta, el navegador puede no interpretar correctamente el código, lo que genera errores o una mala visualización del contenido. En algunos casos, los navegadores «adivinan» las intenciones del desarrollador, pero siempre es mejor escribir un código con sintaxis limpia y válida.
