Mi plantilla HTML

Plantilla con las etiquetas Html imprescindibles para cualquier proyecto web standard.

etiquetashtmltraducion web
6 mayo, 2021 código html de una pagina web traducida
6 mayo, 2021 código html de una pagina web traducida

Dentro de nuestra secci√≥n de traducciones web incluimos aqu√≠ la traducci√≥n de este art√≠culo sobre la plantilla de etiquetas Html comunes a todos los proyectos web. Una chuleta muy √ļtil para cualquier programador web.

Texto original de Manuel Matuzovic, publicado en https://www.matuzo.at/blog/html-boilerplate/

 

* * *

publicado el 9 de abril, 2021

Todos los elementos que utilizo para la estructura básica de un documento HTML, con explicaciones del por qué.

Normalmente, cuando empiezo un nuevo proyecto, copio la estructura HTML del √ļltimo sitio que constru√≠ o me dirijo a HTML5 Boilerplate y copio su boilerplate. Hace poco no empec√© un nuevo proyecto, pero tuve que documentar la estructura que usamos en el trabajo para los sitios que construimos. As√≠ que, simplemente copiar y pegar no era una opci√≥n, ten√≠a que entender las elecciones que se han hecho. Como pas√© bastante tiempo investigando y armando la estructura, decid√≠ compartirla con ustedes.

Genial, esto es como https://github.com/h5bp/html5-boilerplate pero un poco peor.

-Respuesta de un lector de Hacker News escogida al azar

Mi plan de trabajo

Este es el documento final. Haz scroll hacia abajo para ver los detalles.

<!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="/assets/css/styles.css">
<link rel="stylesheet" href="/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="/favicon.ico">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/my.webmanifest">
<meta name="theme-color" content="#FF00FF">
</head>

<body>
<!-- Content -->
<script src="/assets/js/xy-polyfill.js" nomodule></script>
<script src="/assets/js/script.js" type="module"></script>
</body>
</html>

Explicación línea por línea

General

<!DOCTYPE html>

Para los de la vieja escuela, no necesitas ninguno de los otros tipos de documentos que has aprendido de memoria. Este es el √ļnico. Aunque hoy en d√≠a no hay otras opciones reales, tiene que estar presente por razones de compatibilidad.

<html lang="es" class="no-js">

El atributo lang es uno de los atributos m√°s importantes en HTML, porque es poderoso y responsable de muchas cosas. Puedes leer m√°s sobre √©l en Sobre el uso del atributo lang y El atributo lang: los navegadores diciendo mentiras, diciendo dulces mentiras. Aplicado al elemento html, define el lenguaje natural de la p√°gina. Contiene una √ļnica ¬ęetiqueta de idioma¬Ľ en el formato definido en Tags for Identifying Languages (BCP47), por ejemplo en para el ingl√©s, de para el alem√°n o ru para el ruso.

Utilizo la clase no-js en caso de que quiera aplicar estilos a componentes específicos en navegadores que no soportan JavaScript. Esta clase se eliminará en los navegadores que soportan y ejecutan JavaScript moderno.

<meta charset="UTF-8">

Este atributo declara la codificación de caracteres del documento. Si se deja desactivado, es posible que determinados caracteres se muestren de forma incorrecta en algunos navegadores.

Así es como Safari muestra mi nombre con y sin la meta etiqueta charset.

Manuel Matuzovińá – Manuel Matuzovi√Ą‚Ä°

Debe ir antes del elemento <title> para evitar caracteres defectuosos en el título de la página.

<meta name="viewport" content="width=device-width, initial-scale=1">

La etiqueta meta viewport nos permite cambiar el ancho de la ventana gr√°fica, lo que es necesario para el dise√Īo web responsivo. width=device-width establece el ancho de la ventana gr√°fica al ancho de la pantalla. initial-scale controla el nivel de zoom cuando la p√°gina se carga por primera vez.

No estoy seguro de si configurar initial-scale=1 sigue siendo necesario. Creo que le√≠ en alg√ļn sitio que s√≥lo era necesario para Safari en < iOS 9, pero ya no encuentro el art√≠culo.

La metaetiqueta viewport debe aparecer lo antes posible en el documento para garantizar la correcta representación del mismo.

Desde iOS 9.3 ya no necesitamos la opción shrink-to-fit=no.

Título, descripción y redes sociales

<título>Título
de la p√°gina √ļnica - Mi sitio</t√≠tulo>

El t√≠tulo √ļnico de la p√°gina. Se muestra en muchos lugares, por ejemplo, en la pesta√Īa del navegador, en los resultados de los motores de b√ļsqueda, cuando se guarda una p√°gina como marcador, etc.

<script type="module"> document.documentElement.
classList. remove('no-js');
  document.documentElement.classList. add('js');
</script>

Estoy testeando el soporte de módulos JS. Si un navegador soporta módulos de JavaScript, significa que es un navegador que soporta JavaScript moderno, como módulos, sintaxis ES 6, fetch, etc. Envío la mayoría de JS sólo a estos navegadores y uso la clase js en CSS, si el estilo de un componente es diferente, cuando JS está activo.

caniuse showing that all modern browser support JS modules

<link rel="stylesheet" href="/assets/css/styles.css">

CSS para el sitio.

<link rel="stylesheet" href="/assets/css/print.css" media="print">

Imprimir CSS para el sitio.

<meta name="description" content="Descripción de la página">

La descripci√≥n √ļnica de la p√°gina, por ejemplo, que aparece en las p√°ginas de resultados de b√ļsqueda. Puede tener cualquier longitud, pero los motores de b√ļsqueda truncan los fragmentos a ~155-160 caracteres.

< meta property="og:title"
content="T√≠tulo √ļnico de la p√°gina - Mi sitio">

El t√≠tulo √ļnico de la p√°gina. Utilizado por los raspadores de URL en plataformas de medios sociales como Twitter o Facebook.

< meta property="og:description"
content="Descripción de la página">

La descripci√≥n √ļnica de la p√°gina. Utilizada por los raspadores de URL en plataformas de medios sociales como Twitter o Facebook.

<meta property="og:image" content="image.jpg">

La imagen que se muestra cuando se comparte el enlace a una p√°gina en las redes sociales, las aplicaciones de chat u otros sitios que raspan las URL.

Lo ideal es que sea una imagen cuadrada con el contenido importante colocado en el centro del cuadrado en un rectángulo con una proporción de 2:1. Esto asegurará que la imagen se vea bien en las tarjetas con imágenes de forma rectangular y cuadrada.

Así es como se verá esta imagen en Twitter y en WhatsApp.

Large rectangle image in a Twitter card
Small square image on Whatsapp

Reglas para Twitter: Las im√°genes para esta Tarjeta admiten una relaci√≥n de aspecto de 2:1 con dimensiones m√≠nimas de 300×157 o m√°ximas de 4096×4096 p√≠xeles. Las im√°genes deben tener un tama√Īo inferior a 5 MB. Se admiten los formatos JPG, PNG, WEBP y GIF.

<meta property="og:image:alt" content="Descripción de la imagen">

Una descripción de la imagen. No utilice esta metaetiqueta si la imagen es puramente decorativa y no proporciona ninguna información significativa. Los lectores de pantalla ignoran la imagen, si no proporcionamos el texto alternativo.

<meta property="og:locale" content="en_GB">

Una propiedad opcional de Open Graph, pero recomendada. Define el lenguaje natural de la p√°gina.

<meta property="og:type" content="website">

El tipo de contenido que est√° compartiendo, por ejemplo, website, article, o video.movie. Una propiedad obligatoria para las p√°ginas v√°lidas de Open Graph.

<meta property="og:url" content="https://www.mywebsite.com/page">

La URL canónica de la página. Una propiedad obligatoria para las páginas válidas de Open Graph.

<meta name="twitter:card" content="summary_large_image">

Esta metaetiqueta define el aspecto de las tarjetas cuando se comparten en Twitter. Hay dos opciones para los sitios web, summary y summary_large_image.

resumen_grande_imagen

A small square image on the left, page title, description and URL on the right.

resumen

Puedes ver que estoy usando una imagen cuadrada para asegurar que la tarjeta se vea bien en ambas variaciones. He pintado la parte superior e inferior de la tarjeta de color rosa para que puedas ver que estas partes se cortar√°n en una summary_large_image.

Iconos y barra de direcciones

<meta name="theme-color" content="#FF00FF">

theme-color proporciona a los navegadores un color CSS para personalizar la visualización de la página o de la interfaz de usuario circundante.

Navegadores compatibles: Chrome, Brave y Samsung Internet en Android.

Pink UI in Brave browser
<link rel="icono" href="/favicon.ico">

Un favicon de 32×32px para los navegadores antiguos. Debe ubicarse en la raíz de su sitio web.

<link rel="icono" href="/favicon.svg" type="image/svg+xml">

La mayor√≠a de los navegadores modernos admiten favicons SVG. Las ventajas del favicon.svg son que se ve mejor cuando se escala, porque es una imagen vectorial y no rasterizada, y que podemos a√Īadir HTML y CSS al SVG, lo que significa que podemos soportar el modo oscuro.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<style>
  path { 
   fill: #153a51;
  }  

  @media (prefers-color-scheme: dark) {
    path {
      fill: #FFFFFF;   
    }   
   }
</style><path d="M397.8 117.9v290h-76.4V273.5h-.8l-46.4 97.2h-36.8l-46-96.8h-.8v134h-76.4v-290h80.4l60.8 150.8h.8l61.2-150.8h80.4z"/></svg>

Favicon en mi sitio web en modo día.

A white M on dark background in the browser tab in Chrome

Favicon en mi sitio web en modo noche.

A blue M on light background in the browser tab in Chrome
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

El icono de 180√ó180px que utilizar√°n los dispositivos de Apple si a√Īade la p√°gina a su pantalla de inicio.

<link rel="manifest" href="/mi.webmanifest">

Para los dispositivos Android necesitamos un archivo .webmanifest, que proporcione a los navegadores la información de dónde se encuentran los iconos necesarios para la pantalla de inicio y la pantalla de inicio de las PWA.

{"nombre": "matuzo.at", "iconos":
[ 
{ "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
{ "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }   
]}
<link rel="canonical" href="https://www.mywebsite.com/page">

Utilice el elemento de enlace canónico para evitar los problemas de SEO causados por el contenido duplicado, especificando la fuente original de las páginas que están disponibles en varias URL.

<script src="/activos/js/xy-polyfill.js" nomódulo></script>

Si quiero servir JavaScript dirigido espec√≠ficamente a los navegadores que no soportan m√≥dulos, a√Īado el atributo nomodule, que hace que el script s√≥lo se ejecute en los navegadores heredados, concretamente en IE 11.

<script src="/activos/js/script.js" type="module"></script>

El JavaScript con el type=¬Ľmodule¬Ľ s√≥lo se ejecutar√° en los navegadores que soportan m√≥dulos, es lo contrario del atributo nomodule.

 


 

Esto no es el m√≠nimo absoluto, pero es lo que necesito en la mayor√≠a de los sitios que construyo. Para redondear las cosas, he a√Īadido a este post un mont√≥n de etiquetas que probablemente ya no necesitamos y algunas otras que podr√≠as necesitar ocasionalmente. Si quieres aprender m√°s sobre el elemento <head> y sus hijos, echa un vistazo al fant√°stico repositorio HEAD de Josh Buchea.

¬ŅMe he equivocado en algo o me he olvidado algo? Por favor, d√≠melo en Twitter o por correo electr√≥nico.

Cosas que ya no se necesitan

<meta name="msapplication-TileColor" content="#efefef">

Seg√ļn Andrey Sitnik, esto ya no es necesario en las versiones recientes de Windows.

<meta http-equiv="X-UA-Compatible" content="ie=edge">

A partir de IE11, los modos de documento est√°n obsoletos y no deben seguir utiliz√°ndose, salvo de forma temporal.

A partir de IE11, el modo borde es el modo de documento preferido; representa la mayor compatibilidad con los est√°ndares modernos de que dispone el navegador.

Cambios de compatibilidad en IE11

<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#36b1bf">

Desde Safari 12, ya no necesitamos una variaci√≥n separada del icono para las pesta√Īas ancladas.

Otros elementos dignos de mención

<link rel="preload" href="font.woff2" as="font" type="font/woff2">

Utilice preload si desea asegurarse de que determinados recursos estén disponibles en una fase anterior del ciclo de vida de la página.

<link type="application/atom+xml" rel="alternate" href="/feed.xml" title="Mi blog - Manuel Matuzovic">

Feed RSS para su sitio.

<meta name="format-detection" content="telephone=no">

Desactivar la detecci√≥n autom√°tica y el formato de los n√ļmeros de tel√©fono.

<meta name="twitter:dnt" content="on">

Impida que Twitter utilice la información de su sitio para fines de personalización.

Consulta HEAD para saber m√°s.

Valora este artículo

Articulos relacionados


Traducción de un articulo sobre páginas web, código Html y accesibilidad. Cómo programar una web sin perder de vista la accesibilidad, cómo mejorar el uso de etiquetas web para ofrecer a los usuarios mayor facilidad para navegar e interactuar.

Translation into French of a web coding article by George Ornbo, a software engineer. A tutorial originally written in English and published on his website shapeshed.com/ https://shapeshed.com/site-navigation-in-css-and-xhtml/ Il est très important de coder correctement la...

Traducci√≥n al espa√Īol del art√≠culo ¬ęUpconversion¬Ľ originalmente publicado en ingl√©s