Los documentos HTML incluyen una declaración de tipo de documento y el elemento raíz <html>. El elemento <html> contiene el encabezado y el cuerpo del documento.
Si bien el encabezado del documento no se ve fuera del código, es fundamental para que un sitio funcione. Contiene toda la metainformación, incluida la información para los motores de búsqueda y los resultados de redes sociales, los íconos para la pestaña del navegador y el acceso directo a 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, si bien no son visibles, están presentes en casi todas las páginas web.
Para crear el sitio MachineLearningWorkshop.com (MLW), comienza por incluir los componentes que se deben considerar esenciales para cada página web: el tipo de documento, el idioma humano del contenido, el conjunto de caracteres y, por supuesto, el título o el nombre del sitio o la aplicación.
Se agrega a todos los documentos HTML
Hay varios elementos que son esenciales para cada página web. Los navegadores renderizan el contenido si faltan estos elementos, pero debes incluirlos.
<!DOCTYPE html>
Lo primero que aparece en cualquier documento HTML es el preámbulo. En el caso de HTML, solo necesitas <!DOCTYPE html>. Esto parece un elemento HTML, pero en realidad es un nodo especial llamado doctype. El doctype le indica al navegador que use el modo estándar.
Cuando se omite, los navegadores usan un modo de renderización diferente conocido como modo no estándar.
Incluir el DOCTYPE ayuda a evitar el modo no estándar.
<html>
El elemento <html> es el elemento raíz de un documento HTML. Es el elemento principal de <head> y <body>, y contiene todo lo que hay en el documento HTML, excepto el doctype. Si se omite, el idioma se da por implicado, pero debes incluirlo para declarar el idioma del documento.
Idioma del contenido
El atributo lang en la etiqueta <html> define el idioma principal del documento. El valor es un código de idioma ISO seguido de una región opcional.
Por ejemplo, el francés en Canadá es fr-CA, mientras que en Burkina Faso es fr-BF. Esta declaración ayuda a los lectores de pantalla, los motores de búsqueda y los servicios de traducción a identificar el idioma del documento.
Puedes usar el atributo lang en otras etiquetas para identificar excepciones al idioma principal del documento. Al igual que su uso en el encabezado, el atributo lang dentro del cuerpo no tiene ningún efecto visual. Agrega semántica para que las tecnologías de asistencia y los servicios automatizados puedan identificar el idioma de contenido específico.
Además de establecer 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 segmentar con los selectores de atributos y de idioma [lang|="fr"] y :lang(fr).
<head>
Anidado entre las etiquetas de apertura y cierre de <html>, encontramos los dos elementos secundarios: <head> y <body>:
<!DOCTYPE html>
<html lang="en-US">
<head>
</head>
<body>
</body>
</html>
El <head> contiene metadatos de un sitio o una aplicación, mientras que el <body> contiene contenido visible. El resto de esta sección se enfoca en los componentes anidados dentro del elemento <head>.
Componentes obligatorios dentro de <head>
Los metadatos del documento, incluidos el título, el conjunto de caracteres, la configuración de la ventana gráfica, la descripción, la URL base, los vínculos a la hoja de estilo y los íconos, se encuentran en el elemento <head>. Si bien es posible que no necesites todas estas funciones, siempre incluye la configuración del conjunto de caracteres, el título y la ventana gráfica.
Codificación de caracteres
El primer elemento de <head> debe ser la declaración de codificación de caracteres charset. Se coloca 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 en la mayoría de los navegadores es windows-1252, según la configuración regional. Sin embargo, debes usar UTF-8, que permite la codificación de uno a cuatro bytes de todos los caracteres.
Para establecer la codificación de caracteres en UTF-8, incluye lo siguiente:
<meta charset="utf-8" />
Si declaras UTF-8 (sin distinción entre mayúsculas y minúsculas), incluso puedes incluir emojis en el título.
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 las clases y en selectorAPI. Si usas emojis, asegúrate de hacerlo de una manera que mejore la usabilidad sin perjudicar la accesibilidad.
Título del documento
Todas las páginas, la 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 redefina con etiquetas <meta>, en las tarjetas de redes sociales.
<title>Machine Learning Workshop</title>
Metadatos de viewport
La metaetiqueta viewport es fundamental para la capacidad de respuesta del sitio, ya que garantiza que el contenido se renderice bien independientemente del ancho del viewport. Si bien la metaetiqueta viewport existe desde 2007, solo recientemente se documentó en una especificación. Controla el tamaño y la escala del viewport, lo que evita que el contenido se reduzca para adaptarse a pantallas más pequeñas.
<meta name="viewport" content="width=device-width" />
El código anterior significa "haz que el sitio sea responsivo, comenzando por hacer que el ancho del contenido sea el ancho de la pantalla". Además de width, puedes establecer el zoom y la escalabilidad, pero ambos se establecen de forma predeterminada en valores accesibles. 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 aprobará la prueba 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 que se incluye en el <head>. De hecho, todos los metadatos. Si bien la mayoría de los elementos que encontrarás en el <head> se abordan en este módulo, compartiremos más información en el módulo de metadatos.
Ya viste el conjunto de metacaracteres y el título del documento, pero hay muchos más metadatos fuera de las etiquetas <meta> que se deben incluir.
CSS
En <head>, se incluyen los diseños para tu HTML. Hay una ruta de aprendizaje dedicada a CSS si quieres obtener información sobre los diseños, 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 diseños en tu archivo HTML son incluir un recurso externo con un elemento <link> con el atributo rel establecido en stylesheet, o bien incluir CSS directamente en el encabezado de tu documento dentro de las etiquetas de apertura y cierre <style>.
La etiqueta <link> es el método preferido para incluir hojas de estilo. Vincular una o algunas hojas de estilo externas es bueno tanto para la experiencia del desarrollador como para el rendimiento del sitio: puedes mantener el CSS en un solo lugar en lugar de que esté disperso por todas partes, y los navegadores pueden almacenar en caché el archivo externo, lo que significa que no tiene que descargarse de nuevo con cada navegación de página.
La sintaxis es <link rel="stylesheet" href="styles.css">, donde styles.css es el nombre de archivo y la ubicación relativa de tu hoja de estilo. Es posible que veas el atributo type="text/css", pero no es obligatorio. El atributo rel define la relación, que es stylesheet en este caso. Si omites el atributo rel, no se vinculará tu CSS.
Descubrirás otros valores de rel en breve, pero primero aprenderás otras formas de incluir CSS.
Si quieres 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, te recomendamos que incluyas el CSS con @import dentro de un <style>:
<style>
@import "styles.css" layer(firstLayer);
</style>
Cuando usas @import para importar hojas de estilo en tu documento, de forma opcional en capas en cascada, las instrucciones @import deben ser las primeras instrucciones en tu <style> o en la hoja de estilo vinculada, fuera de la declaración del conjunto de caracteres.
Si bien las capas en cascada son bastante nuevas y es posible que no veas el @import en un <style> principal, a menudo verás propiedades personalizadas declaradas en un bloque de estilo principal:
<style>
:root {
--theme-color: #226DAA;
}
</style>
Los estilos, agregados con <link>, <style> o ambos, deben ir en el encabezado. Si bien funcionan cuando se incluyen en el cuerpo del documento, debes agregar estilos en el encabezado por motivos de rendimiento. Esto puede parecer contradictorio, ya que es posible que quieras que tu contenido se cargue primero. Sin embargo, es mejor que el navegador sepa cómo renderizar el contenido cuando se carga. Agregar estilos primero evita el repintado innecesario que se produce si se aplica un estilo a un elemento después de que se renderiza por primera vez.
Una forma de incluir estilos que nunca usarás en el <head> de tu documento son los estilos intercalados. Es probable que nunca uses estilos intercalados en el encabezado, ya que las hojas de estilo de los agentes de usuario ocultan el encabezado de forma predeterminada. Sin embargo, si quieres 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 lo que se encuentre en el encabezado. Después, con un atributo style intercalado, haz que un bloque de estilo editable por el usuario sea visible.
<style contenteditable style="display: block; font-family: monospace; white-space: pre;">
head { display: block; }
head * { display: none; }
:root {
--theme-color: #226DAA;
}
</style>
Puedes agregar estilos intercalados al elemento <style>.
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 y otros son informativos. El tipo de relación se define según el valor del atributo rel. Hay 25 valores disponibles para el atributo rel que se pueden usar con <link>, <a> y <area>, o bien <form>, y algunos que se pueden usar con todos. Es preferible incluir los relacionados con la metainformación en el encabezado y los relacionados con el rendimiento en <body>.
Ahora incluirás otros tres tipos en el encabezado: icon, alternate y canonical. En el próximo módulo, agregarás un cuarto tipo, rel="manifest".
Ícono de página
Usa la etiqueta <link> con rel="icon" para identificar el favicon de tu documento. Un favicon es un ícono pequeño que aparece en la pestaña del navegador, por lo general, a la izquierda del título del documento. Cuando las pestañas se reducen, es posible que desaparezca el título, pero el ícono permanece visible. La mayoría de los favicons son logotipos de empresas o aplicaciones.
Si no declaras un favicon, 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" />
El código anterior indica que se debe usar mlwicon.png como ícono para situaciones en las que tiene sentido usar un tamaño de 16 px, 32 px o 48 px. El atributo sizes acepta el valor de any para los íconos escalables o una lista separada por espacios de valores cuadrados de widthXheight, en la que los valores de ancho y alto son 16, 32, 48 o mayores en esa secuencia geométrica, se omite la unidad de píxel 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 especiales de íconos no estándares para el navegador Safari: apple-touch-icon para dispositivos iOS y mask-icon para pestañas fijadas en macOS.
apple-touch-icon se aplica solo cuando el usuario agrega un sitio a la pantalla principal: puedes especificar varios íconos con diferentes sizes para diferentes dispositivos.
mask-icon solo se usará si el usuario fija la pestaña en Safari para computadoras: el ícono en sí debe ser un SVG monocromático, y el atributo color completa 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 garantizar la coherencia y una buena experiencia del usuario, usa una sola imagen. Google usa diferentes favicons para cada una de sus aplicaciones: por ejemplo, hay un ícono de correo y un ícono de calendario. Sin embargo, todos los íconos de Google usan el mismo esquema de color. El ícono te permite saber exactamente el contenido de una pestaña abierta.
Versiones alternativas del sitio
Usa el valor alternate del atributo rel para identificar las traducciones o las 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 configurar el atributo hreflang.
El valor alternativo no solo se usa para 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.
Vínculo a una versión simulada en PDF del sitio:
<link rel="alternate" type="application/x-pdf" href="https://machinelearningworkshop.com/mlw.pdf" />
Si el valor de 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 del Taller de aprendizaje automático, es posible que los motores de búsqueda no identifiquen la fuente autorizada. Usa rel="canonical" para identificar la URL preferida del sitio o la aplicación.
Incluye la URL canónica en todas tus páginas traducidas y en la página principal, indicando nuestra URL preferida:
<link rel="canonical" href="https://www.machinelearning.com" />
El vínculo canónico rel="canonical" se usa con mayor frecuencia para la publicación cruzada con publicaciones y plataformas de blogs para acreditar la fuente original. Cuando un sitio sindica contenido, debe incluir el vínculo canónico a la fuente original.
Secuencias de comandos
La etiqueta <script> incluye secuencias de comandos. El tipo predeterminado es JavaScript. Si usas otro lenguaje de programación, incluye el atributo type con el tipo MIME o type="module" para un módulo de JavaScript.
Solo se analizan y ejecutan JavaScript y los módulos de JavaScript.
Las etiquetas <script> se pueden usar para encapsular tu código o para descargar un archivo externo. En MLW, no hay ningún archivo de secuencia de comandos externo porque, contrariamente a la creencia popular, no necesitas JavaScript para tener un sitio web funcional. Esta es una ruta de aprendizaje de HTML, no de JavaScript.
Más adelante, incluirás un poco 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 de switch.
Con JavaScript, debes evitar hacer referencia a un elemento antes de que exista. Como switch aún no existe, no incluiremos el controlador de eventos todavía.
Cuando agreguemos el elemento del interruptor de luz, agregaremos el <script> en la parte inferior del <body> en lugar de en el <head>. ¿Por qué? Hay dos motivos. Queremos asegurarnos de que los elementos existan antes de que se encuentre la secuencia de comandos que los referencia, ya que no basamos esta secuencia de comandos en un evento DOMContentLoaded.
Además, principalmente, JavaScript no solo bloquea la renderización, sino que el navegador deja de descargar todos los recursos cuando se descargan las secuencias de comandos y no reanuda la descarga de otros recursos hasta que JavaScript termina de ejecutarse. Por este motivo, a menudo encontrarás solicitudes de JavaScript al final del documento en lugar de en el encabezado.
Existen dos atributos que pueden reducir la naturaleza de bloqueo de la descarga y la ejecución de JavaScript: defer y async. Con defer, el procesamiento de HTML no se bloquea durante la descarga, y JavaScript solo se ejecuta después de que el documento haya terminado de procesarse. Con async, el procesamiento tampoco se bloquea durante la descarga, pero, una vez que finaliza la descarga de la secuencia de comandos, se pausa el procesamiento mientras se ejecuta JavaScript.
Para incluir el código JavaScript de MLW en un archivo externo, puedes escribir lo siguiente:
<script src="js/switch.js" defer></script>
Agregar el atributo defer pospone la ejecución de la secuencia de comandos hasta que se renderiza todo, lo que evita que la secuencia de comandos afecte el rendimiento. Los atributos async y defer solo son válidos en secuencias de comandos externas.
Base
Hay otro elemento que solo se encuentra en <head>.: El elemento <base> que se usa con poca frecuencia permite establecer 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 se deben abrir esos vínculos. El valor predeterminado de _self abre los archivos vinculados en el mismo contexto que el documento actual. Otras opciones incluyen _blank, que abre cada vínculo en una ventana nueva; _parent del contenido actual, que puede ser igual a self si el elemento que abrió la ventana no es un iframe, o _top, que se encuentra en la misma pestaña del navegador, pero se extrajo de cualquier contexto para ocupar toda la pestaña.
La mayoría de los desarrolladores agregan el atributo target a los pocos vínculos (si los hay) que desean abrir en una ventana nueva en los vínculos o el formulario en sí, en lugar de usar <base>.
<base target="_top" href="https://machinelearningworkshop.com" />
Si nuestro sitio web se encontrara 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á fuera del iframe y ocupará toda la ventana del navegador.
Uno de los inconvenientes de este elemento es que los vínculos de anclaje se resuelven con <base>, que convierte 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.<base>
Estos son algunos datos más sobre <base>:
- Solo puede haber un elemento
<base>en un documento. - Debe aparecer antes de que se use cualquier URL relativa, incluidas las posibles referencias a secuencias de comandos o hojas de estilo.
Ahora, el código se ve así:
<!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" href="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
La secuencia de comandos se incluye entre corchetes angulares, guiones y un signo de exclamación, que es la forma en que se comentan los elementos HTML. Todo lo que se encuentre entre <!-- y --> no se verá ni se analizará. Puedes colocar comentarios en HTML en cualquier lugar de la página, excepto dentro de los bloques de secuencias de comandos o de estilo, en los que debes usar comentarios de JavaScript y CSS.
Ya conoces los conceptos básicos de lo que se incluye en <head>, pero quieres aprender más. En las próximas secciones, aprenderemos sobre las metaetiquetas y cómo controlar lo que se muestra cuando se vincula tu sitio web en las redes sociales.
Verifica tus conocimientos
Pon a prueba tus conocimientos sobre la estructura de documentos.
¿Cómo identificas el idioma del documento?
language a la etiqueta HTML.lang a la etiqueta HTML.Add the <lang> al <head>Selecciona los elementos que se pueden incluir en <head>.
<p><title><meta>