Comprensión de las Etiquetas Dobles y Simples en HTML
En HTML, existen tanto etiquetas en pareja como etiquetas individuales (también conocidas como etiquetas autocontenidas o elementos vacíos). Cada tipo cumple una función específica y tiene su propio propósito.
Etiquetas en pareja
Las etiquetas en pareja constan de una etiqueta de apertura y una de cierre. Pueden envolver contenido y agrupar elementos para modificar algunas propiedades o reunir elementos por significado.
Sintaxis:
<tag_name>Some content</tag_name>
Aquí tienes un ejemplo real de uso de etiquetas en pareja:
index.html
En este ejemplo:
<section>...</section>
: agrupa contenido relacionado;<h1>...</h1>
: añade un encabezado para la sección;<p>...</p>
: contiene un párrafo que explica que la mayoría de las etiquetas HTML vienen en pares.
Etiquetas Simples
Las etiquetas simples consisten únicamente en una etiqueta de apertura y no tienen etiqueta de cierre. Se utilizan cuando la etiqueta no requiere contenido o cuando todo el contenido y comportamiento se especifica mediante atributos.
Sintaxis:
<tag_name />
Aquí tienes un ejemplo real de uso de etiquetas simples:
index.html
Este código incluye dos elementos:
<input />
: crea un campo de entrada de texto. El atributoplaceholder=" name"
muestra una sugerencia dentro del cuadro;<img />
: muestra una imagen de frutas.alt="Fruits"
: texto que se muestra si la imagen no se carga;width
yheight
: definen las dimensiones de la imagen;src
: especifica la URL de la imagen.
Anidación de etiquetas
Al anidar etiquetas, es esencial seguir el orden jerárquico, similar a las muñecas rusas. Cada etiqueta anidada debe estar adecuadamente contenida dentro de su etiqueta principal, respetando siempre las reglas de sintaxis de HTML.
Aquí tienes un ejemplo de etiquetas anidadas:
<tag1>
<tag2>
<tag4>...</tag4>
<tag5>...</tag5>
</tag2>
<tag3>
<tag6>...</tag6>
</tag3>
</tag1>
Considera el siguiente ejemplo válido:
index.html
Este código muestra un párrafo con un enlace y texto enfatizado:
<p>...</p>
: envuelve todo el párrafo;<a href="https://privacy.com">...</a>
: crea un enlace clicable a la Política de Privacidad;<strong>...</strong>
: pone en negrita la palabra "website" para enfatizarla.
Resumen
HTML consiste en etiquetas pareadas y simples, cada una con diferentes propósitos. Las etiquetas pareadas tienen una etiqueta de apertura y otra de cierre para encerrar contenido, mientras que las etiquetas simples se cierran a sí mismas. Anidar correctamente las etiquetas y seguir la jerarquía adecuada es esencial para una estructura HTML bien formada.
¡Gracias por tus comentarios!
Pregunte a AI
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
Pregunte me preguntas sobre este tema
Resumir este capítulo
Mostrar ejemplos del mundo real
Awesome!
Completion rate improved to 2.56
Comprensión de las Etiquetas Dobles y Simples en HTML
Desliza para mostrar el menú
En HTML, existen tanto etiquetas en pareja como etiquetas individuales (también conocidas como etiquetas autocontenidas o elementos vacíos). Cada tipo cumple una función específica y tiene su propio propósito.
Etiquetas en pareja
Las etiquetas en pareja constan de una etiqueta de apertura y una de cierre. Pueden envolver contenido y agrupar elementos para modificar algunas propiedades o reunir elementos por significado.
Sintaxis:
<tag_name>Some content</tag_name>
Aquí tienes un ejemplo real de uso de etiquetas en pareja:
index.html
En este ejemplo:
<section>...</section>
: agrupa contenido relacionado;<h1>...</h1>
: añade un encabezado para la sección;<p>...</p>
: contiene un párrafo que explica que la mayoría de las etiquetas HTML vienen en pares.
Etiquetas Simples
Las etiquetas simples consisten únicamente en una etiqueta de apertura y no tienen etiqueta de cierre. Se utilizan cuando la etiqueta no requiere contenido o cuando todo el contenido y comportamiento se especifica mediante atributos.
Sintaxis:
<tag_name />
Aquí tienes un ejemplo real de uso de etiquetas simples:
index.html
Este código incluye dos elementos:
<input />
: crea un campo de entrada de texto. El atributoplaceholder=" name"
muestra una sugerencia dentro del cuadro;<img />
: muestra una imagen de frutas.alt="Fruits"
: texto que se muestra si la imagen no se carga;width
yheight
: definen las dimensiones de la imagen;src
: especifica la URL de la imagen.
Anidación de etiquetas
Al anidar etiquetas, es esencial seguir el orden jerárquico, similar a las muñecas rusas. Cada etiqueta anidada debe estar adecuadamente contenida dentro de su etiqueta principal, respetando siempre las reglas de sintaxis de HTML.
Aquí tienes un ejemplo de etiquetas anidadas:
<tag1>
<tag2>
<tag4>...</tag4>
<tag5>...</tag5>
</tag2>
<tag3>
<tag6>...</tag6>
</tag3>
</tag1>
Considera el siguiente ejemplo válido:
index.html
Este código muestra un párrafo con un enlace y texto enfatizado:
<p>...</p>
: envuelve todo el párrafo;<a href="https://privacy.com">...</a>
: crea un enlace clicable a la Política de Privacidad;<strong>...</strong>
: pone en negrita la palabra "website" para enfatizarla.
Resumen
HTML consiste en etiquetas pareadas y simples, cada una con diferentes propósitos. Las etiquetas pareadas tienen una etiqueta de apertura y otra de cierre para encerrar contenido, mientras que las etiquetas simples se cierran a sí mismas. Anidar correctamente las etiquetas y seguir la jerarquía adecuada es esencial para una estructura HTML bien formada.
¡Gracias por tus comentarios!