4.14. Introducción a HTML: Estructura básica, etiquetas y atributos: etiquetas de división y extensión

HTML, que significa lenguaje de marcado de hipertexto, es el lenguaje de marcado estándar para crear páginas web y aplicaciones. Comprender la estructura básica de HTML, así como las etiquetas y atributos, es esencial para cualquier desarrollador front-end. En esta sección, nos centraremos específicamente en las etiquetas de división y extensión.

Estructura básica de HTML

Un documento HTML está estructurado como un árbol de elementos y texto. Cada documento comienza con un tipo de documento seguido de la etiqueta raíz . Dentro de la etiqueta , tenemos dos partes principales: el y el .

<!DOCTYPE html>
<html>
<cabeza>
    <title>Título de la página</title>
</cabeza>
<cuerpo>
    El contenido de la página va aquí.
</cuerpo>
</html>

El contiene metainformación sobre el documento, como su título, enlaces a scripts y hojas de estilo. El contiene el contenido real de la página que es visible para los usuarios.

Etiquetas y Atributos

Las etiquetas HTML son los componentes básicos de cualquier página web. Definen el tipo de contenido que se inserta y cómo debe mostrarse. Cada etiqueta comienza con un corchete angular (<) y termina con un corchete angular (>). La mayoría de las etiquetas vienen en pares, con una etiqueta de apertura y una etiqueta de cierre.

Los atributos proporcionan información adicional sobre las etiquetas HTML. Vienen en pares de nombre y valor y siempre se incluyen en la etiqueta de apertura. Por ejemplo, la etiqueta de enlace podría tener un atributo href que indique la URL a la que debe apuntar el enlace.

<a href="https://www.example.com">Enlace a Ejemplo.com</a>

Etiquetas de división y extensión

Las etiquetas de división

y span se utilizan para agrupar otros elementos HTML. La etiqueta
es un elemento de bloque que se usa para agrupar elementos a nivel de bloque, mientras que la etiqueta es un elemento en línea que se usa para agrupar elementos a nivel de línea.

<div>
    <p>Este es un párrafo dentro de una div.</p>
    <p>Este es otro párrafo dentro de la misma división.</p>
</div>

<p>Este es <span>texto resaltado</span> dentro de un párrafo.</p>

Ambas etiquetas se utilizan a menudo con atributos de clase e id para aplicar estilos CSS o comportamientos de JavaScript. Por ejemplo, es posible que tengas un div con la clase "contenedor" al que se le ha aplicado un determinado estilo.

<div class="contenedor">
    <p>Este es un párrafo dentro de un div con la clase "contenedor".</p>
</div>

En resumen, HTML es la columna vertebral de cualquier página web. Comprender la estructura básica de HTML y cómo utilizar etiquetas y atributos es fundamental para convertirse en un desarrollador front-end eficaz. Las etiquetas de división y extensión son particularmente útiles para agrupar elementos y aplicar estilos o comportamientos a grupos de elementos.

Ahora responde el ejercicio sobre el contenido:

¿Cuál es la función de las etiquetas de división y extensión en HTML?

¡Tienes razón! Felicitaciones, ahora pasa a la página siguiente.

¡Tú error! Inténtalo de nuevo.

Imagen del artículo Introducción a HTML: Estructura básica, etiquetas y atributos: HTML semántico

Siguiente página del libro electrónico gratuito:

19Introducción a HTML: Estructura básica, etiquetas y atributos: HTML semántico

3 minutos

¡Obtén tu certificado para este curso gratis! descargando la aplicación Cursa y leyendo el libro electrónico allí. ¡Disponible en Google Play o App Store!

Disponible en Google Play Disponible en App Store

+ 6,5 millones
estudiantes

Certificado gratuito y
válido con código QR

48 mil ejercicios
gratis

Calificación de 4.8/5
en tiendas de aplicaciones

Cursos gratuitos de
vídeo, audio y texto.