Conceptos HTML

Atributos globales

Los atributos globales son aquellos que pueden ser utilizados en cualquier elemento HTML. Algunos ejemplos son:

class: Define una o más clases para un elemento.
id: Define un identificador único para un elemento.
style: Agrega estilos CSS directamente al elemento.
title: Proporciona información adicional sobre un elemento (aparece como un tooltip).

<p class="texto" id="parrafo1" style="color: red;" title="Un párrafo importante">Este es un párrafo.</p>

Atributos class y id

class y id son atributos que permiten asignar estilos y manejar elementos a través de JavaScript.

class: Se utiliza para definir una o más clases que pueden ser compartidas por varios elementos.
id: Se utiliza para identificar un único elemento en la página. Cada id debe ser único dentro del documento.

<div class="container">...</div>

            <div id="header">...</div>

Elementos Línea / Bloque

En HTML, los elementos se dividen en dos categorías: de línea (inline) y de bloque (block).

Elementos de línea: No inician una nueva línea y sólo ocupan el espacio necesario. Ejemplos: <span>, <a>, <img>.
Elementos de bloque: Inician en una nueva línea y ocupan todo el ancho disponible. Ejemplos: <div>, <p>, <h1>-<h6>.

<div>Este es un elemento de bloque.</div>

            <span>Este es un elemento de línea.</span>

Elementos span/div

<span> y <div> son elementos genéricos que se utilizan para aplicar estilos o agrupar contenido.

<div>: Es un contenedor de bloque que agrupa elementos y puede contener otros elementos de bloque o de línea.
<span>: Es un contenedor de línea que se utiliza para agrupar fragmentos de texto o elementos de línea.

<div>

          <span>Texto dentro de un span.</span>

        </div>

HTML Semántica y HTML 5

HTML 5 introdujo nuevos elementos semánticos que mejoran la estructura y accesibilidad del documento.

<header>: Representa el encabezado de una sección o página.
<nav>: Define un conjunto de enlaces de navegación.
<article>: Representa una composición independiente dentro de un documento.
<section>: Define una sección genérica de contenido.
<footer>: Representa el pie de página de una sección o página.

<header>

          <h1>Título de la Página</h1>

        </header>


        <nav>

          <ul>

            <li><a href="#">Enlace 1</a></li>

            <li><a href="#">Enlace 2</a></li>

            <li><a href="#">Enlace 3</a></li>

          </ul>

        </nav>


        <article>

          <h2>Título del Artículo</h2>

          <p>Contenido del artículo...</p>

        </article>


        <section>

          <h3>Título de la Sección</h3>

          <p>Contenido de la sección...</p>

        </section>


        <footer>

          <p>Pie de página...</p>

        </footer>