Los documentos HTML incluyen una declaración de tipo de documento y el elemento raíz <html>. En el elemento <html>, se anidan el encabezado y el cuerpo del documento. Si bien el visitante vidente no puede ver el encabezado del documento, es fundamental que el sitio funcione correctamente. Contiene toda la metainformación, incluida la información para los motores de búsqueda y los resultados de las redes sociales, los íconos de la pestaña del navegador y el acceso directo en la pantalla principal del dispositivo móvil, y el comportamiento y la presentación de tu contenido. En esta sección, descubrirás los componentes que, aunque no están visibles, están presentes en casi todas las páginas web.
Para crear el sitio MachineLearningWorkshop.com (MLW), primero incluye los componentes que deben considerarse esenciales para cada página web: el tipo de documento, el lenguaje humano del contenido, el grupo de caracteres y, por supuesto, el título o nombre del sitio o la aplicación.
Agregar a cada documento HTML
Hay varias funciones que deben considerarse esenciales para todas y cada una de las páginas web. Si faltan estos elementos, los navegadores procesarán el contenido, pero los incluirán. siempre.
<!DOCTYPE html>
Lo primero en cualquier documento HTML es el preámbulo. Para HTML, todo lo que necesitas es <!DOCTYPE html>. Puede parecer un elemento HTML, pero no lo es. Es un tipo especial de nodo llamado "doctype". El doctype le indica al navegador que use el modo estándar. Si se omite, los navegadores usarán un modo de renderización diferente conocido como modo no estándar. Incluir el doctype ayuda a evitar el modo no estándar.
<html>
<html> es el elemento raíz de un documento HTML. Es el elemento superior de <head> y <body>, y contiene todo el contenido del documento HTML, excepto doctype. Si se omite, será implícito, pero es importante incluirlo, ya que este es el elemento en el que se declara el idioma del contenido del documento.
Idioma del contenido
El atributo de idioma lang que se agrega a la etiqueta <html> define el idioma principal del documento. El valor del atributo lang es un código de idioma ISO de dos o tres letras seguido de la región. Esta región es opcional, pero se recomienda usarla, ya que un idioma puede variar mucho según la región. Por ejemplo, el francés es muy diferente en Canadá (fr-CA) y Burkina Faso (fr-BF). Esta declaración de idioma permite que los lectores de pantalla, los motores de búsqueda y los servicios de traducción conozcan el idioma del documento.
El atributo lang no se limita a la etiqueta <html>. Si hay texto en la página que está en un idioma diferente del idioma principal del documento, se debe usar el atributo lang para identificar excepciones al idioma principal del documento. Al igual que cuando se incluye en la cabeza, el atributo lang del cuerpo no tiene efecto visual. Solo agrega semántica, lo que permite que las tecnologías de accesibilidad y los servicios automatizados conozcan el idioma del contenido afectado.
Además de configurar el idioma del documento y las excepciones a ese idioma base, el atributo se puede usar en selectores CSS. <span lang="fr-fr">Ceci n'est pas une pipe.</span> se puede orientar con el atributo y los selectores de idioma [lang|="fr"] y :lang(fr).
<head>
Anidados entre las etiquetas <html> de apertura y cierre, encontramos los dos elementos secundarios: <head> y <body>:
<!DOCTYPE html>
<html lang="en-US">
<head>
</head>
<body>
</body>
</html>
El <head>, o encabezado de metadatos del documento, contiene todos los metadatos de un sitio o una aplicación. El cuerpo incluye el contenido visible. El resto de esta sección se enfoca en los componentes que se encuentran anidados dentro del <head></head> de apertura y cierre.
Componentes obligatorios dentro de <head>
Los metadatos del documento, incluidos el título del documento, el conjunto de caracteres, la configuración del viewport, la descripción, la URL base, los vínculos de la hoja de estilo y los íconos, se encuentran en el elemento <head>. Aunque es posible que no necesites todas estas funciones, siempre incluye la configuración de grupo de caracteres, título y viewport.
Codificación de caracteres
El primer elemento de <head> debe ser la declaración de codificación de caracteres charset. Se incluye antes del título para garantizar que el navegador pueda renderizar los caracteres de ese título y todos los caracteres del resto del documento.
La codificación predeterminada de la mayoría de los navegadores es windows-1252, según la configuración regional. Sin embargo, debes usar UTF-8, ya que habilita la codificación de uno a cuatro bytes de todos los caracteres, incluso de los que ni siquiera sabías que existían. Además, es el tipo de codificación requerido por HTML5.
Incluye lo siguiente para establecer la codificación de caracteres en UTF-8:
<meta charset="utf-8" />
Si declaras UTF-8 (no distingue mayúsculas de minúsculas), incluso puedes incluir emojis en el título (pero no lo hagas).
La codificación de caracteres se hereda en todo el documento, incluso en <style> y <script>. Esta pequeña declaración significa que puedes incluir emojis en los nombres de clase y en selectorAPI (de nuevo, no lo hagas). Si usas emojis, asegúrate de usarlos de una manera que mejore la usabilidad sin afectar la accesibilidad.
Título del documento
Tu página principal y todas las páginas adicionales deben tener un título único. El contenido del título del documento, el texto entre las etiquetas <title> de apertura y cierre, se muestra en la pestaña del navegador, la lista de ventanas abiertas, el historial, los resultados de la búsqueda y, a menos que se definan mejor mediante etiquetas <meta>, en las tarjetas de las redes sociales.
<title>Machine Learning Workshop</title>
Metadatos de viewport
La otra metaetiqueta que debe considerarse esencial es la metaetiqueta viewport, que ayuda a la capacidad de respuesta del sitio y permite que el contenido se renderice bien de forma predeterminada, independientemente del ancho del viewport. Si bien la metaetiqueta de viewport está disponible desde junio de 2007, cuando se lanzó el primer iPhone, recientemente se documentó en una especificación. Sin dudas se recomienda, ya que permite controlar el tamaño y la escala de un viewport, y evita que se reduzca el tamaño del contenido del sitio para adaptarlo a un sitio de 960 px en una pantalla de 320 px.
<meta name="viewport" content="width=device-width" />
El código anterior significa "hacer que el sitio sea responsivo, comenzando por hacer que el ancho del contenido sea el ancho de la pantalla". Además de width, puedes configurar el zoom y la escalabilidad, pero ambos establecen valores accesibles de forma predeterminada. Si quieres ser explícito, incluye lo siguiente:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1" />
El viewport forma parte de la auditoría de accesibilidad de Lighthouse; tu sitio se aprobará si es escalable y no tiene un tamaño máximo establecido.
Hasta ahora, el esquema de nuestro archivo HTML es el siguiente:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Machine Learning Workshop</title>
<meta name="viewport" content="width=device-width" />
</head>
<body>
</body>
</html>
Otro contenido de <head>
Hay mucho más en <head>. Todos los metadatos, de hecho. La mayoría de los elementos que encontrarás en <head> se abordan aquí, y se guardan una gran cantidad de opciones de <meta> para el siguiente capítulo.
Ya viste el conjunto de caracteres meta y el título del documento, pero hay muchos más metadatos fuera de las etiquetas <meta> que deberían incluirse.
CSS
<head> es donde incluyes estilos para tu HTML. Existe una ruta de aprendizaje dedicada a CSS si quieres aprender sobre estilos, pero debes saber cómo incluirlos en tus documentos HTML.
Existen tres formas de incluir CSS: <link>, <style> y el atributo style.
Las dos formas principales de incluir estilos en tu archivo HTML son incluir un recurso externo por medio de un elemento <link> con el atributo rel establecido en stylesheet o incluir CSS directamente en el encabezado del documento, dentro de las etiquetas <style> de apertura y cierre.
La etiqueta <link> es el método preferido para incluir hojas de estilo. Vincular una o varias hojas de estilo externas es bueno para la experiencia del desarrollador y el rendimiento del sitio: puedes mantener CSS en un solo lugar, en lugar de esparcirse por todas partes, y los navegadores pueden almacenar en caché el archivo externo, lo que significa que no es necesario volver a descargarlo con cada navegación de la página.
La sintaxis es <link rel="stylesheet" href="styles.css">, en la que estilos.css es la URL de tu hoja de estilo. A menudo, verás type="text/css". No es necesario. Si incluyes estilos escritos en algo que no sea CSS, el type es necesario. Sin embargo, como no hay ningún otro tipo, este atributo tampoco es necesario. El atributo rel define la relación: en este caso, stylesheet. Si omites este paso, no se vinculará tu CSS.
En breve, descubrirás otros valores de rel, pero primero analicemos otras formas de incluir CSS.
Si deseas que los estilos de tu hoja de estilo externa se encuentren dentro de una capa en cascada, pero no tienes acceso para editar el archivo CSS con el fin de colocarle la información de la capa, debes incluir el CSS con @import dentro de una <style>:
<style>
@import "styles.css" layer(firstLayer);
</style>
Cuando utilices @import para importar hojas de estilo a tu documento (opcionalmente en capas en cascada), las sentencias @import deben ser las primeras sentencias en tu <style> o la hoja de estilo vinculada, fuera de la declaración del grupo de caracteres.
Si bien las capas de cascada aún son bastante nuevas, y es posible que no veas el @import en un <style> de encabezado, a menudo verás propiedades personalizadas declaradas en un bloque de estilo de encabezado:
<style>
:root {
--theme-color: #226DAA;
}
</style>
Los estilos, ya sea mediante <link> o <style>, o ambos, deben ir en el encabezado. Funcionarán si se incluyen en el cuerpo del documento, pero te recomendamos que uses los estilos en el encabezado por razones de rendimiento. Esto puede parecer contradictorio, ya que tal vez creas que deseas que tu contenido se cargue primero, pero en realidad quieres que el navegador sepa cómo renderizar el contenido cuando se carga. En primer lugar, agregar estilos evita que se vuelva a procesar innecesariamente el diseño de un elemento después de su primera representación.
Además, está la única forma de incluir estilos que nunca usarás en el <head> de tu documento: los estilos intercalados. Es probable que nunca uses estilos intercalados en el encabezado, ya que las hojas de estilo de los usuarios-agentes ocultan el encabezado de forma predeterminada. Sin embargo, si deseas crear un editor de CSS sin JavaScript, por ejemplo, para probar los elementos personalizados de tu página, puedes hacer que el encabezado sea visible con display: block y, luego, ocultar todo en él y, luego, con un atributo style intercalado, hacer visible un bloque de estilo editable.
<style contenteditable style="display: block; font-family: monospace; white-space: pre;">
head { display: block; }
head * { display: none; }
:root {
--theme-color: #226DAA;
}
</style>
Si bien puedes agregar estilos intercalados en <style>, es mucho más divertido diseñar tu <style> en tu style. Deshonesta.
Otros usos del elemento <link>
El elemento link se usa para crear relaciones entre el documento HTML y los recursos externos. Algunos de estos recursos se pueden descargar, otros son informativos. El tipo de relación se define según el valor del atributo rel. Actualmente, hay 25 valores disponibles para el atributo rel que se pueden usar con <link>, <a> y <area> o <form>, y unos pocos se pueden usar con todos. Es preferible incluir las relacionadas con la metainformación en el encabezado y las relacionadas con el rendimiento en <body>.
Ahora incluirás otros tres tipos en tu encabezado: icon, alternate y canonical. (incluirás un cuarto tipo, rel="manifest", en el siguiente módulo).
Ícono de página
Usa la etiqueta <link> con el par rel="icon" de atributo/valor para identificar el ícono de página que se usará en tu documento. Un ícono de página es un ícono muy pequeño que aparece en la pestaña del navegador, generalmente a la izquierda del título del documento. Cuando tengas abiertas una cantidad difícil de manejar, las pestañas se reducirán y es posible que el título desaparezca por completo, pero el ícono siempre permanecerá visible. La mayoría de los íconos de página son logotipos de empresas o aplicaciones.
Si no declaras un ícono de página, el navegador buscará un archivo llamado favicon.ico en el directorio de nivel superior (la carpeta raíz del sitio web). Con <link>, puedes usar un nombre de archivo y una ubicación diferentes:
<link rel="icon" sizes="16x16 32x32 48x48" type="image/png" href="/images/mlwicon.png" />
En el código anterior, se indica "usa el mlwicon.png como ícono para situaciones en las que 16, 32 o 48 px tenga sentido". El atributo de tamaños acepta el valor de any para íconos escalables o una lista separada por espacios de valores widthXheight cuadrados donde los valores de ancho y alto son de 16, 32, 48 o más en esa secuencia geométrica, se omite la unidad de píxeles y la X no distingue mayúsculas de minúsculas.
<link rel="apple-touch-icon" sizes="180x180" href="/images/mlwicon.png" />
<link rel="mask-icon" href="/images/mlwicon.svg" color="#226DAA" />
Hay dos tipos de íconos especiales no estándar para el navegador Safari: apple-touch-icon para dispositivos iOS y mask-icon para pestañas fijas en macOS. apple-touch-icon solo se aplica cuando el usuario agrega un sitio a la pantalla principal: puedes especificar varios íconos con diferentes sizes para distintos dispositivos. mask-icon solo se usará si el usuario fija la pestaña en Safari para computadoras de escritorio: el ícono debe ser un SVG monocromático y el atributo color cubre el ícono con el color necesario.
Si bien puedes usar <link> para definir una imagen completamente diferente en cada página o incluso en cada carga de página, no lo hagas. Para lograr coherencia y una buena experiencia del usuario, usa una sola imagen. Twitter usa el pájaro azul: cuando ves el pájaro azul en la pestaña de tu navegador, sabes que esa pestaña está abierta y muestra una página de Twitter sin hacer clic en la pestaña. Google utiliza íconos de página diferentes para cada una de sus aplicaciones: hay un ícono de correo electrónico o de calendario, por ejemplo. Sin embargo, todos los íconos de Google usan el mismo esquema de colores. Una vez más, sabes exactamente cuál es el contenido de una pestaña abierta simplemente a partir del ícono.
Versiones alternativas del sitio
Usamos el valor alternate del atributo rel para identificar traducciones, o representaciones alternativas, del sitio.
Supongamos que tenemos versiones del sitio traducidas al francés y al portugués de Brasil:
<link rel="alternate" href="https://www.machinelearningworkshop.com/fr/" hreflang="fr-FR" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/pt/" hreflang="pt-BR" />
Cuando se usa alternate para una traducción, se debe establecer el atributo hreflang.
El valor alternativo sirve para más que solo las traducciones. Por ejemplo, el atributo type puede definir el URI alternativo para un feed RSS cuando el atributo type se establece en application/rss+xml o application/atom+xml. Enlace a una versión simulada de PDF del sitio.
<link rel="alternate" type="application/x-pdf" href="https://machinelearningworkshop.com/mlw.pdf" />
Si el valor rel es alternate stylesheet, define una hoja de estilo alternativa y se debe establecer el atributo title para darle un nombre a ese estilo alternativo.
Canónico
Si creas varias traducciones o versiones de Machine Learning Workshop, es posible que los motores de búsqueda se confundan con respecto a qué versión es la fuente autorizada. En ese caso, usa rel="canonical" para identificar la URL preferida para el sitio o la aplicación.
Incluye la URL canónica de todas las páginas traducidas y en la página principal. Para ello, indica nuestra URL preferida:
<link rel="canonical" href="https://www.machinelearning.com" />
El vínculo canónico rel="canonical" se usa con mayor frecuencia para realizar publicaciones cruzadas con publicaciones y plataformas de blogs para dar crédito a la fuente original. Cuando un sitio distribuye contenido, debe incluir el vínculo canónico a la fuente original.
Secuencias de comandos
La etiqueta <script> se usa para incluir secuencias de comandos. El tipo predeterminado es JavaScript. Si incluyes otro lenguaje de secuencias de comandos, incluye el atributo type con el tipo de MIME, o bien type="module" si es un módulo de JavaScript. Solo se analizan y ejecutan los módulos de JavaScript y JavaScript.
Las etiquetas <script> se pueden usar para encapsular tu código o descargar un archivo externo. En MLW, no hay un archivo de secuencia de comandos externo porque, contrariamente a la creencia popular, no se necesita JavaScript para tener un sitio web funcional y, bueno, esta es una ruta de aprendizaje de HTML, no de JavaScript.
Más adelante, incluirás algo de JavaScript para crear un huevo de Pascua:
<script>
document.getElementById('switch').addEventListener('click', function() {
document.body.classList.toggle('black');
});
</script>
Este fragmento crea un controlador de eventos para un elemento con el ID switch. Con JavaScript, no quieres hacer referencia a un elemento antes de que exista. No existe todavía, así que no lo incluiremos aún. Cuando agreguemos el elemento del interruptor de luz, agregaremos <script> en la parte inferior de <body>, en lugar de <head>. ¿Por qué? Dos razones. Queremos asegurarnos de que existan elementos antes de que se encuentre la secuencia de comandos que hace referencia a ellos, ya que no se basa en un evento DOMContentLoaded. Además, principalmente, JavaScript no solo bloquea la renderización, sino que el navegador deja de descargar todos los elementos cuando se descargan las secuencias de comandos y no reanuda la descarga de otros elementos hasta que finaliza la ejecución de JavaScript. Por esta razón, a menudo encontrarás solicitudes de JavaScript al final del documento en lugar de en el encabezado.
Hay dos atributos que pueden reducir el bloqueo de la descarga y ejecución de JavaScript: defer y async. Con defer, el procesamiento de HTML no se bloquea durante la descarga, y el código JavaScript solo se ejecuta una vez que el documento haya terminado de renderizarse. Con async, la renderización tampoco se bloquea durante la descarga, pero una vez que se completa la descarga de la secuencia de comandos, se detiene el procesamiento mientras se ejecuta JavaScript.
Para incluir JavaScript de MLW en un archivo externo, puedes escribir lo siguiente:
<script src="js/switch.js" defer></script>
Si agregas el atributo defer, se aplaza la ejecución de la secuencia de comandos hasta que se haya renderizado todo, lo que evita que la secuencia de comandos perjudique el rendimiento. Los atributos async y defer solo son válidos en secuencias de comandos externas.
Capas
Hay otro elemento que solo se encuentra en <head>.. No se usa con mucha frecuencia. El elemento <base> permite configurar una URL y un destino de vínculo predeterminados. El atributo href define la URL base para todos los vínculos relativos.
El atributo target, válido en <base>, así como en vínculos y formularios, establece dónde deben abrirse esos vínculos. El valor predeterminado de _self abre archivos vinculados en el mismo contexto que el documento actual. Otras opciones incluyen _blank, que abre cada vínculo en una ventana nueva, el _parent del contenido actual, que puede ser igual a uno mismo si el iniciador no es un iframe, o _top, que se encuentra en la misma pestaña del navegador, pero sale de cualquier contexto para ocupar toda la pestaña.
La mayoría de los desarrolladores agregan el atributo target a algunos vínculos (si los hay) que quieren abrir en una ventana nueva de los vínculos o el formulario, en lugar de usar <base>.
<base target="_top" href="https://machinelearningworkshop.com" />
Si nuestro sitio web se encuentra anidado dentro de un iframe en un sitio como Yummly, incluir el elemento <base> significaría que cuando un usuario haga clic en cualquier vínculo dentro de nuestro documento, el vínculo se cargará salir del iframe y ocupará toda la ventana del navegador.
Una de las desventajas de este elemento es que los vínculos de anclaje se resuelven con <base>. <base> convierte efectivamente el vínculo <a href="#ref"> en <a target="_top" href="https://machinelearningworkshop.com#ref">, lo que activa una solicitud HTTP a la URL base con el fragmento adjunto.
Otros aspectos que debes tener en cuenta sobre <base>: Solo puede haber un elemento <base> en un documento y debe aparecer antes de que se usen las URLs relativas, incluidas las posibles referencias de hojas de estilo o secuencias de comandos.
El código ahora se ve de la siguiente manera:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Machine Learning Workshop</title>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" src="css/styles.css" />
<link rel="icon" type="image/png" href="/images/favicon.png" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/fr/" hreflang="fr-FR" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/pt/" hreflang="pt-BR" />
<link rel="canonical" href="https://www.machinelearning.com" />
</head>
<body>
<!-- <script defer src="scripts/lightswitch.js"></script>-->
</body>
</html>
Comentarios HTML
Observa que la secuencia de comandos está entre corchetes angulares, guiones y un golpe. Así es como puedes comentar HTML. Dejaremos la secuencia de comandos como comentario hasta tener el contenido real en la página. No se podrá ver ni analizar ningún elemento que esté entre <!-- y -->. Los comentarios HTML se pueden colocar en cualquier parte de la página, incluidos el encabezado o el cuerpo, a excepción de las secuencias de comandos o los bloques de estilo, donde debes usar comentarios de JavaScript y CSS, respectivamente.
Ya abarcaste los aspectos básicos de lo que se incluye en el <head>, pero quieres aprender más que los aspectos básicos. En las próximas secciones, aprenderemos sobre las metaetiquetas y cómo controlar lo que se muestra cuando tu sitio web está vinculado en las redes sociales.
Verifica tus conocimientos
Pon a prueba tus conocimientos sobre la estructura del documento.
¿Cómo identificas el idioma del documento?
language a la etiqueta HTML.lang a la etiqueta HTML.Add the <lang> a <head>.Selecciona elementos que se pueden incluir en <head>.
<p><title><meta>