Mi plantilla HTML.

Plantilla con las etiquetas Html imprescindibles para cualquier proyecto web standard. 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 el 9 de abril, 2021.

etiquetashtmltraducion web

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

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

Resumen de todos los elementos que utilizo para montar la estructura básica de un archivo HTML, con explicaciones del por qué.

Normalmente, cuando empiezo un nuevo proyecto web, copio la estructura de código HTML del último sitio que construí o voy a HTML5 Boilerplate y copio su boilerplate. Hace poco tuve que documentar la estructura que usamos en el trabajo para las webs que construimos. Así que copiar y pegar no era factible, tenía que explicar por qué hacía cada cosa. Como pasé bastante tiempo investigando y armando la estructura, he decido compartirla aquí con todos.

Disclaimer: Texto traducido de forma altruista por un traductor en formación dentro del área de traducciones web. Si necesitas traducciones de profesionales de documentos, sitios web o tiendas online (eCommerce), contacta sin compromiso con nuestra agencia de traducción en Barcelona o alguna de las empresas de traducción de Ibidem Group. Tenemos oficina de traducción en Madrid.

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.

lang Sintaxis de la etiqueta del idioma MDN

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.

Me olvidé por completo de las hojas de estilo de impresión

<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.

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.

Documentos para desarrolladores de Twitter: Tarjetas

<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.

El protocolo 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.

<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

prefiere el esquema de color en los favicons SVG para los iconos en modo oscuro

<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"
}    

]}

Cómo hacer un Favicon en 2021: Seis archivos que se ajustan a la mayoría de las necesidades

<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.

Rate this post

Articulos relacionados

Cómo escribir HTML accesible

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.

Optimización de XML

Traducción al español del artículo «Upconversion» originalmente publicado en inglés