Descripción general de HTML

El lenguaje de marcado de hipertexto, o HTML, es el lenguaje de marcado estándar para describir la estructura de documentos que se muestran en la Web. HTML consiste en una serie de elementos y atributos que se usan para marcar todos los componentes de un documento a fin de estructurarlo de manera significativa.

Los documentos HTML son básicamente un árbol de nodos, que incluye elementos HTML y nodos de texto. Los elementos HTML proporcionan la semántica y el formato a los documentos, lo que incluye la creación de párrafos, listas y tablas, y la incorporación de imágenes y controles de formularios. Cada elemento puede tener varios atributos especificados. Muchos elementos pueden tener contenido, incluidos otros elementos y texto. Otros elementos están vacíos, y la etiqueta y los atributos definen su función.

Existen varias categorías de elementos, como metadatos, secciones, texto, semántica intercalada, forma, interactivo, contenido multimedia, componentes y secuencias de comandos. Abordaremos la mayoría de estos temas en la serie. Pero primero, ¿qué es un elemento?

Elementos

HTML consta de una serie de elementos que se usan para encerrar o unir diferentes partes del contenido para que aparezca o actúe de cierta manera. Los elementos HTML están delimitados por etiquetas y se escriben con corchetes angulares (< y >).

El título de nuestra página es un encabezado, de nivel uno, para el que usamos la etiqueta <h1>. El título en sí, "Taller de aprendizaje automático", es el contenido de nuestro elemento. El contenido se ubica entre las etiquetas de apertura y cierre. Todo el elemento, la etiqueta de apertura, la etiqueta de cierre y el contenido, es el elemento.

La etiqueta de cierre es la misma que la de apertura, precedida de una barra inclinada.

Los elementos y las etiquetas no son exactamente lo mismo, aunque muchas personas usan los términos de forma indistinta. El nombre de la etiqueta es el contenido entre corchetes. La etiqueta incluye los corchetes. En este caso: <h1>. Un "elemento" son las etiquetas de apertura y cierre, y todo el contenido entre esas etiquetas, incluidos los elementos anidados.

<p>This paragraph has some
  <strong><em>strongly emphasized</em></strong>
  content</p>

Este elemento de párrafo tiene otros elementos anidados. Cuando anidas elementos, es importante que estén correctamente anidados. Las etiquetas HTML se deben cerrar en el orden inverso con el que se abrieron. En el ejemplo anterior, observa cómo <em> se abre y se cierra dentro de las etiquetas <strong> de apertura y cierre, y <strong> está abierto y cerrado dentro de las etiquetas <p>.

Los navegadores no muestran las etiquetas. Las etiquetas se utilizan para interpretar el contenido de la página.

HTML es muy, muy tolerante. Por ejemplo, si omitimos las etiquetas de cierre </li>, las etiquetas de cierre están implícitas.

<ul>
  <li>Blendan Smooth
  <li>Hoover Sukhdeep
  <li>Toasty McToastface
</ul>

Aunque no es válido cerrar un <li>, no es una práctica recomendada. El cierre </ul> es obligatorio. Si se omite la etiqueta de cierre de la lista desordenada, el navegador intentará determinar dónde finalizan los elementos de la lista y de la lista, pero es posible que no estés de acuerdo con la decisión.

La especificación de cada elemento indica si la etiqueta de cierre es obligatoria o no. "Ninguna etiqueta es omisible" en la especificación significa que se requieren una etiqueta de apertura y una de cierre. En la especificación, se proporciona una lista de todas las etiquetas de cierre necesarias.

Si no se cerró <em> o <strong> del ejemplo anterior, el navegador puede o no cerrar el elemento por ti. No cerrar un elemento <em> simplemente da lugar a que el contenido se renderice de manera diferente a la deseada. Si se omite un </ul> y la siguiente etiqueta es una etiqueta de cierre para el contenedor superior de la lista, tienes suerte. Si, por otro lado, se trata de una etiqueta de apertura <h1>, el navegador supondrá que el encabezado forma parte de la lista, incluidos los estilos heredados. Algunas etiquetas de cierre omitidas causan problemas más grandes: no cerrar algunas etiquetas, como <script>, <style>, <template>, <textarea> y <title>, interrumpe el contenido posterior, como se muestra en el siguiente ejemplo.

Si incluyes una parte del contenido en cursiva involuntariamente o con una sangría de encabezado, no destruirás tu negocio. Que la mayor parte de tu contenido aparezca sin estilo en un área de texto de 200 x 300 porque olvidaste agregar un </textarea> o no aparece porque olvidaste cerrar una </style> hace que el sitio sea inutilizable.

En algunos casos, los navegadores incluirán elementos aunque las etiquetas no estén presentes en el lenguaje de marcado. Debido a que los elementos pueden ser implícitos, un elemento puede existir incluso cuando las etiquetas no lo hacen. El navegador agregará un <body></body> alrededor de tu contenido y un <tbody></tbody> alrededor de las filas de tu tabla, incluso si no lo haces. Dicho esto, si bien es válido omitir etiquetas, no lo hagas. Además, como ya se mencionó, asegúrate de que estén anidados correctamente. Tu futuro yo como encargados del lenguaje de marcado, y cualquier otra persona que trabaje en tu base de código te lo agradecerán.

Existen dos tipos de elementos: reemplazados y no reemplazados.

Elementos no reemplazados

El párrafo, el encabezado y las listas marcadas en la sección anterior no se reemplazan. Los elementos que no se reemplazan tienen etiquetas de apertura y (a veces opcionales) de cierre que los rodean, y pueden incluir texto y otras etiquetas como subelementos. Estas etiquetas envolventes pueden convertir una frase o imagen en un hipervínculo, pueden convertir una oración en un encabezado, pueden enfatizar palabras, etcétera.

Elementos reemplazados y anulados

Los elementos reemplazados se reemplazan por objetos, ya sea un widget de la interfaz gráfica de usuario (IU) en el caso de la mayoría de los controles de formularios o un archivo de imagen de trama o escalable en el caso de la mayoría de las imágenes. Cada una se reemplaza por objetos y tiene una apariencia predeterminada. Según el tipo de objeto y el navegador, los estilos aplicables son limitados. Por ejemplo, la mayoría de los navegadores habilitan un estilo limitado en los widgets de la IU y los pseudoelementos relacionados. En el caso de las imágenes de trama, la altura, el ancho, el recorte y el filtrado se realizan fácilmente con CSS, pero no mucho más. Por otro lado, los gráficos vectoriales escalables que usan un lenguaje de marcado basado en XML similar a HTML son totalmente escalables (a menos que contengan imágenes de trama). También son totalmente personalizables. Ten en cuenta que la capacidad de aplicar estilo a un SVG incorporado desde el CSS vinculado al archivo HTML que lo incorpora depende de cómo se configure el SVG.

En este ejemplo, los dos elementos reemplazados <img> y <input> se reemplazan por contenido no textual: una imagen y un objeto de interfaz gráfica de usuario, respectivamente.

<input type="range">
<img src="switch.svg" alt="light switch">

Resultado del código HTML anterior:

Los elementos reemplazados y los vacíos a menudo se confunden. Los elementos nulos son elementos que se cierran automáticamente y están representados por una etiqueta. Esto significa que no existen las etiquetas de cierre para un elemento vacío. De manera opcional, puedes incluir una barra al final de la etiqueta, ya que muchas personas encuentran esa opción para que el lenguaje de marcado sea más fácil de leer. Siguiendo con este ejemplo, cerramos la etiqueta automáticamente con una barra:

<input type="range"/>
<img src="switch.svg" alt="light switch"/>

La barra al final es antigua: es una forma de indicar que el elemento se cierra automáticamente y que no habrá ninguna etiqueta de cierre ni de cierre que coincida.

Los elementos nulos no pueden incluir contenido de texto ni elementos anidados. Los elementos nulos incluyen <br>, <col>, <embed>, <hr>, <img>, <input>, <link>, <meta>, <source>, <track> y <wbr>, entre otros.

La mayoría de los elementos reemplazados son elementos vacíos, pero no todos. Se reemplazaron los elementos video, picture, object y iframe, pero no se anularán. Todos pueden contener otros elementos o texto, por lo que todos tienen una etiqueta de cierre.

Se reemplazan la mayoría de los elementos vacíos, pero, de nuevo, no todos, como vimos con base, link, param y meta. ¿Por qué hay un elemento vacío, que no puede tener ningún contenido, que no se reemplaza y, por lo tanto, no renderiza nada en la pantalla? Proporcionar información sobre el contenido La información la proporcionan los atributos de los elementos.

Atributos

Quizás hayas notado que los ejemplos <img> y <input> tenían más que solo el tipo de elemento en su etiqueta de apertura. Estos bits adicionales de pares nombre/valor separados por espacios (aunque a veces incluir un valor es opcional) se denominan atributos. Los atributos son los que hacen que HTML sea tan eficaz. En esta serie, analizaremos cientos de atributos y valores de atributos, pero aquí solo analizaremos qué son en general y cómo incluirlos.

Los atributos proporcionan información sobre el elemento. El atributo, al igual que el resto de la etiqueta de apertura, no aparecerá en el contenido, pero ayudan a definir cómo se mostrará el contenido a los usuarios videntes y no videntes (tecnologías de asistencia y motores de búsqueda).

Los atributos solo aparecen en la etiqueta de apertura. La etiqueta de apertura siempre comienza con el tipo de elemento. El tipo puede estar seguido por cero o más atributos, separados por uno o más espacios. La mayoría de los nombres de atributos van seguidos de un signo igual que lo equivale al valor del atributo, entre comillas de apertura y cierre.

En este ejemplo, tenemos un vínculo de anclaje con dos atributos. Estos dos atributos convirtieron el "registro" de contenido en un vínculo de anclaje interno que se desplaza hasta el atributo id="register" en la pestaña actual del navegador cuando se hace clic en el vínculo, se lo presiona o se activa con el teclado o algún otro dispositivo.

Los atributos definen el comportamiento, las vinculaciones y la funcionalidad de los elementos. Abordaremos más atributos en la sección Atributos de esta serie. Por ahora, solo ten en cuenta que algunos atributos son globales, es decir, pueden aparecer en la etiqueta de apertura de cualquier elemento. Algunas se aplican solo a varios elementos, pero no a todos, y otras son específicas de un elemento, son relevantes solo para un único elemento.

La mayoría de los atributos son pares nombre/valor. Los atributos booleanos, cuyo valor es verdadero, falso o el mismo que el nombre del atributo, pueden incluirse solo como el atributo: el valor no es necesario.

<img src="switch.svg" alt="light switch" ismap />

Esta imagen tiene tres atributos: src, alt y ismap. El atributo src se usa para proporcionar la ubicación del recurso de imagen SVG. El atributo alt proporciona texto alternativo que describe el contenido de la imagen. El atributo ismap es booleano y no requiere un valor. Esto es solo para explicar qué son los atributos. Abordaremos estos atributos con más detalle en la sección Imágenes.

Si bien los atributos de comillas no siempre son obligatorios, a veces sí lo son. Si el valor incluye un espacio o caracteres especiales, se necesitan comillas. Por este motivo, siempre se recomienda citar. Si el valor del atributo está entre comillas, no es necesario agregar uno o más espacios entre los atributos, pero, para mayor legibilidad y por motivos de legibilidad, se recomienda y se valoran las comillas y los espacios.

El código HTML no distingue mayúsculas de minúsculas, pero algunos valores de atributos sí lo hacen. Los valores definidos en la especificación no distinguen mayúsculas de minúsculas. Por lo general, las cadenas que no se definen como palabras clave distinguen mayúsculas de minúsculas, incluidos los valores id y class.

Ten en cuenta que, si el valor de un atributo distingue mayúsculas de minúsculas en HTML, también lo hará cuando se use como parte de un selector de atributos en CSS y JavaScript.

Para que el lenguaje de marcado sea más fácil de leer, se recomienda, aunque no es obligatorio, marcar el código HTML con letras minúsculas en todos los nombres de elementos y atributos de las etiquetas, y entrecomillar todos los valores de los atributos. Si alguna vez escuchas el término "lenguaje de marcado de estilo XHTML", esto y los elementos vacíos que se cierran automáticamente con una barra al final, es lo que significa.

Apariencia de los elementos

El aspecto predeterminado de los elementos semánticos se establece mediante las hojas de estilo del usuario-agente. La mayoría de los navegadores utilizan hojas de estilo reales para este fin, mientras que otros las simulan en código. El resultado final es el mismo. Aunque la especificación HTML establece algunas restricciones en las hojas de estilo usuario-agente, los navegadores tienen mucha latitud, lo que significa que existen algunas diferencias entre los navegadores.

El elemento que elijas (y, por lo tanto, las etiquetas que uses) debe ser apropiado para el contenido que muestras, ya que las etiquetas tienen significado semántico. La semántica, o role, de un elemento es importante para las tecnologías de accesibilidad y, en algunos casos, para los motores de búsqueda. Se debe usar HTML para estructurar el contenido, no para definir su apariencia. La apariencia es el dominio de CSS. Si bien muchos elementos que alteran la apariencia del contenido, como <h1>, <strong> y <em>, tienen un significado semántico, la apariencia puede cambiar y, por lo general, se modificará con los estilos de autor.

<h1>This header has both <strong>strong</strong> and <em>emphasized</em> content</h1>

Elemento, atributos y JavaScript

El Document Object Model (DOM) es la representación de datos de la estructura y el contenido del documento HTML. A medida que el navegador analiza HTML, crea un objeto JavaScript por cada elemento y sección de texto que se encuentra. Estos objetos se denominan nodos: nodos de elementos y nodos de texto, respectivamente.

Hay una interfaz para definir la funcionalidad de cada elemento HTML. La API de HTML DOM proporciona acceso y control de cada elemento HTML mediante el DOM, y proporciona interfaces para el elemento HTML y todas las clases HTML que se heredan de él. La interfaz HTMLElement representa el elemento HTML y todos sus nodos subordinados. Todos los demás elementos la implementan a través de una interfaz que se hereda de ella. Cada interfaz de herencia tiene un constructor, métodos y propiedades. Mediante las propiedades heredadas de HTMLElement, puedes acceder a todos los atributos globales, así como a los eventos input, pointer, transition y animation. A través del subtipo del elemento individual, como HTMLAnchorElement y HTMLImageElement, puedes acceder a los valores y métodos de atributos específicos del elemento.

Verifica tus conocimientos

Pon a prueba tus conocimientos de HTML