Etiquetas WEB básica

HTML (HyperText Markup Language) es el lenguaje fundamental para crear páginas web. Su estructura se basa en etiquetas que indican al navegador cómo organizar y mostrar el contenido. A continuación, se describen algunas de las etiquetas básicas más utilizadas.

La etiqueta <html> es la que envuelve todo el documento y le indica al navegador que el contenido corresponde a una página HTML. Dentro de ella se encuentran dos secciones principales: <head> y <body>.

Esto es en la etiqueta <head>

Esto muestra solo el titulo que sale en la pestaña.

La etiqueta <header> se utiliza para definir la sección de encabezado de una página web o de una sección dentro de ella. Generalmente contiene elementos introductorios como el título del sitio, logotipos, menús de navegación o información relevante que aparece en la parte superior del contenido.

El propósito principal de <header> es organizar y agrupar la información inicial que ayuda al usuario a identificar rápidamente el contenido de la página. Esta etiqueta forma parte de las etiquetas semánticas de HTML, lo que significa que aporta significado a la estructura del documento y facilita que los navegadores, buscadores y tecnologías de accesibilidad comprendan mejor la organización del contenido.

En muchos sitios web, el <header> suele incluir elementos como encabezados (<h1> a <h6>), barras de navegación (<nav>) o imágenes representativas del sitio. Además, puede utilizarse tanto a nivel de toda la página como dentro de secciones o artículos para introducir el contenido que sigue.

El uso adecuado de la etiqueta <header> contribuye a una estructura más clara del documento HTML, mejora la accesibilidad y favorece el posicionamiento en buscadores al proporcionar una organización lógica del contenido.

Aquí tienes un ejemplo simple de uso de <header>:

Aquí tienes un ejemplo simple de un navbar usando la etiqueta <nav>:

En este ejemplo:

<nav> define la sección de navegación del sitio.
<ul> crea una lista no ordenada para organizar el menú.
<li> representa cada opción del menú.
<a> crea los enlaces que permiten navegar entre páginas.

El navbar normalmente se coloca dentro del <header> o justo debajo de él, y permite que los usuarios se muevan fácilmente entre las diferentes secciones del sitio web.

Veamos otro ejemplo <section>:

Etiqueta <section> en HTML

La etiqueta <section> se utiliza para agrupar contenido relacionado dentro de una página web. Su función principal es dividir el contenido en secciones temáticas, lo que permite organizar mejor la información y facilitar su comprensión tanto para los usuarios como para los navegadores.

Generalmente, una sección representa una parte específica del contenido de la página, como por ejemplo una introducción, una lista de servicios, información sobre una empresa o cualquier bloque de contenido que trate un mismo tema. Por esta razón, es común que dentro de <section> se utilicen encabezados como <h1>, <h2> o <h3> para indicar el título de esa sección.

El uso de <section> también forma parte de las etiquetas semánticas de HTML, lo que significa que ayuda a definir la estructura lógica del documento. Esto mejora la accesibilidad y permite que los motores de búsqueda comprendan mejor cómo está organizado el contenido de la página.

En resumen, la etiqueta <section> sirve para dividir y organizar el contenido en partes claras y relacionadas, facilitando la lectura, la navegación y la estructura general de una página web.

<h1> representa el título principal de la página.
<h2> se usa para subtítulos importantes.
<h3> a <h6> se utilizan para subniveles de contenido cada vez más específicos.

La jerarquía de encabezados ayuda a organizar el contenido y permite que navegadores, buscadores y lectores de pantalla entiendan mejor la estructura del documento.