Manuel Matuzović repasa línea por línea un documento HTML estándar. Me gusta. Es una buena referencia y tiene muchas cosas del mismo tipo que suelo poner en la plantilla HTML principal. Me hace pensar en lo obstinado que puede ser este tipo de cosas. ¡Maldita sea cerca de cada línea! No la DOCTYPE, no la <title>, pero casi todo lo demás.
El HTML
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Unique page title - My Site</title>
<script type="module">
document.documentElement.classList.remove('no-js');
document.documentElement.classList.add('js');
</script>
<link rel="stylesheet" href="https://css-tricks.com/assets/css/styles.css">
<link rel="stylesheet" href="https://css-tricks.com/assets/css/print.css" media="print">
<meta name="description" content="Page description">
<meta property="og:title" content="Unique page title - My Site">
<meta property="og:description" content="Page description">
<meta property="og:image" content="https://www.mywebsite.com/image.jpg">
<meta property="og:image:alt" content="Image description">
<meta property="og:locale" content="en_GB">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">
<meta property="og:url" content="https://www.mywebsite.com/page">
<link rel="canonical" href="https://www.mywebsite.com/page">
<link rel="icon" href="https://css-tricks.com/favicon.ico">
<link rel="icon" href="https://css-tricks.com/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="https://css-tricks.com/apple-touch-icon.png">
<link rel="manifest" href="https://css-tricks.com/my.webmanifest">
<meta name="theme-color" content="#FF00FF">
</head>
<body>
<!-- Content -->
<script src="https://css-tricks.com/assets/js/xy-polyfill.js" nomodule></script>
<script src="https://css-tricks.com/assets/js/script.js" type="module"></script>
</body>
</html>Tal vez mi sitio no use JavaScript o no tenga alternativas de JavaScript, por lo que no necesito bailar con ninguno de los nombres de la clase. Tal vez mi sitio no necesite estilos de impresión, pero sí necesito una búsqueda previa de enlaces. Tal vez no me importen las imágenes sociales, pero quiero CSS crítico en la cabeza. Es un texto estándar, no una receta, está destinado a ser cambiado.
Hubo un tiempo en que HTML5 Boilerplate era un gran proyecto en este espacio. ¡Tiene toda una organización de GitHub! ¡La plantilla tiene 50.000 estrellas! Personalmente, siento que el proyecto perdió el rumbo cuando empezó a tener un src y dist carpeta y un proceso de compilación Gulp de 200 líneas, ¿sabes? Funcionó mejor como referencia para las cosas que podría necesitar cualquier proyecto web, pero ahora siento que es intimidante de una manera que no tiene por qué serlo. El archivo de índice repetitivo también es bastante obstinado. Asume Normalize y Modernizr, que ciertamente no son proyectos obsoletos, pero tampoco cosas que veo que los desarrolladores buscan mucho más. ¡Incluso asume el uso de Google Analytics!
No tengo ningún problema con que la gente tenga y comparta documentos estándar, pero considerando lo inevitable que es ser obstinado con ellos, también me gusta el enfoque de la guía de referencia. Solo muéstrame todo lo posible que pueda entrar en el <head> (mucho del valor de estos modelos repetidos), y elegiré y elegiré lo que necesito (o puede haber olvidado). Con ese fin, el proyecto HEAD de Josh Buchea es bastante bueno.