HTML describe la estructura de una página web para que el navegador pueda convertir el texto en un documento con encabezados, párrafos, enlaces, listas y otros elementos. Al cargar una página, el navegador lee el código HTML de arriba a abajo, construye un árbol interno de elementos y luego renderiza esa estructura para convertirla en algo que puedes ver e con lo que puedes interactuar. Por lo general, el estilo proviene de CSS y la interactividad de JavaScript, pero HTML es la base sobre la que se integran ambos.
Para mantener clara esa distinción, empieza comparando lo que renderiza el navegador con el código de marcado que lo generó.
Una misma página visible puede definirse mediante diferentes etiquetas, pero cada etiqueta tiene un significado específico. Un párrafo aparece porque el HTML contiene un elemento p, y un enlace es interactivo porque un elemento a indica al navegador que existe un destino de navegación. Si solo se modifica el CSS, el contenido permanece igual aunque su apariencia cambie, ya que el HTML es lo que determina cuál es el contenido.
El HTML se compone de elementos, que son los componentes con nombre —como p y a— que el navegador reconoce. La mayoría de los elementos se escriben utilizando una etiqueta de apertura, como <p>, y una etiqueta de cierre, como </p>, con contenido entre ambas. Algunos son elementos vacíos y no envuelven contenido; un ejemplo es img, que representa una imagen haciendo referencia a un archivo.
Los elementos pueden incluir atributos, que añaden información adicional al elemento y se escriben dentro de la etiqueta de apertura. Un atributo tiene un valor (como href="https://example.com") y el navegador utiliza dicho valor para determinar el comportamiento, por ejemplo, hacia dónde dirige un enlace. Los elementos también pueden estar anidados, lo que significa que un elemento se sitúa dentro de otro; esta relación de padre e hijo influye en la estructura y el significado.
Regla de anidamiento Si olvidas una etiqueta de cierre o superpones etiquetas, el navegador intentará interpretar tu intención, y el resultado visual podría variar de formas inesperadas.
Una página HTML completa comienza con <!doctype html>, lo que indica al navegador que utilice el modo de estándares modernos. El elemento externo html envuelve todo el documento, mientras que head contiene los metadatos que utiliza el navegador y body alberga el contenido que este renderiza en la página. El elemento title se ubica dentro de head y controla el texto de la pestaña, no el contenido visible de la página.