Categoría: HTML5

Dependiendo de la versión de chrome, tendremos 2 formas.

A partir de la versión de chrome 67.0.3396.62

Añadimos este atributo a la etiqueta HTML5 Video

controlslist="nodownload"

Navegador Chrome sin el atributo controllist=»nodownload»

Navegador chrome con el atributo controllist=»nodownload»

El icono para descargar va depender de la versión de chrome instalada

Para versiones anteriores

Deberemos implementar unas clases CSS para ocultar el botón de descargar

video::-internal-media-controls-download-button {display:none}
video::-webkit-media-controls-enclosure {overflow:hidden}
video::-webkit-media-controls-panel {width: calc(100% + 18px); /* Ajustar los pixeles segun se necesite */}

metatag Robots, para que sirve

La metaetiqueta «robots» permite utilizar un enfoque granular y a nivel de página para controlar cómo se deben indexar y servir a los usuarios páginas concretas en los resultados de la Búsqueda de Google.

<meta name="robots" content="noindex" />

La metaetiqueta «robots» del ejemplo anterior indica a los buscadores que no muestren esa página en los resultados de búsqueda.

Como el atributo name tiene el valor robots, la directiva se aplica a todos los rastreadores.

Para aplicarla a un rastreador específico, sustituye el valor robots del atributo name por el nombre del rastreador en cuestión.

Los rastreadores específicos también se denominan user-agent (los rastreadores utilizan su user-agent para solicitar acceso a una página).

El nombre de user-agent del rastreador web estándar de Google es Googlebot.

<meta name="googlebot" content="noindex" />

Los buscadores pueden tener distintos rastreadores con propiedades y fines diferentes.

Directivas de la metaetiqueta «robots» y los elementos «data-nosnippet» y «X-Robots-Tag»

all

No hay restricciones de indexación ni de publicación. Esta directiva es el valor predeterminado y no tiene ningún efecto si se utiliza de forma explícita.

noindex

No se muestra la página en los resultados de búsqueda.

nofollow

No se siguen los enlaces de la página.

none

Equivalente a noindex, nofollow.

noarchive

No se muestra ningún enlace en caché en los resultados de búsqueda.

nosnippet

No se muestra ningún fragmento ni la vista previa de ningún vídeo en los resultados de búsqueda de la página. Es posible que se siga mostrando una miniatura de imagen estática (si está disponible) si permite obtener una mejor experiencia de usuario.

Esto se aplica a todas las formas de resultados de búsqueda (en la Búsqueda web de Google, Google Imágenes o Discover).

max-snippet:[number]

Se usan un máximo de [number] caracteres como fragmento de texto para este resultado de búsqueda (ten en cuenta que una URL puede aparecer como varios resultados de búsqueda en una página de resultados de búsqueda).

No afecta a las vistas previas de imágenes o vídeos y, además, se aplica a todas las formas de resultados de búsqueda (como la Búsqueda web de Google, Google Imágenes, Descubrir o el Asistente). Sin embargo, este límite no se aplica en los casos en los que un editor haya concedido permiso por separado para utilizar el contenido.

Por ejemplo, si el editor proporciona contenido en forma de datos estructurados en la página o tiene un acuerdo de licencia con Google, esta configuración no interrumpe los usos permitidos más específicos. Esta directiva se ignora si no se especifica ningún elemento [number] que se pueda analizar.

Valores especiales:

0: no se mostrará ningún fragmento. Equivalente a nosnippet.
-1: no hay límite de longitud de fragmentos.

Ejemplo: max-image-preview:[setting]

Se establece el tamaño máximo de una vista previa de imagen para la página en los resultados de búsqueda.

Valores setting aceptados:

• none
  No se mostrará ninguna vista previa de la imagen.
• standard
  Es posible que se muestre una vista previa de la imagen predeterminada.
• large
  Es posible que se muestre una vista previa más grande de una imagen, hasta el ancho del viewport.

Se aplica a todo tipo de resultados de búsqueda (como la Búsqueda web de Google, Google Imágenes, Discover o el Asistente). Sin embargo, este límite no se aplica en los casos en los que un editor haya concedido permiso por separado para utilizar el contenido.

Por ejemplo, si el editor proporciona contenido en forma de datos estructurados en la página, como AMP y versiones canónicas de un artículo, o tiene un acuerdo de licencia con Google, esta configuración no interrumpirá los usos permitidos más específicos.

Los editores que no quieran que Google muestre imágenes en miniatura de mayor tamaño cuando sus páginas AMP y la versión canónica de un artículo aparezcan en la búsqueda o en Discover deben especificar un valor max-image-preview de standard o none.

Ejemplo: max-video-preview:[number]

Utiliza fragmentos de vídeo de [number] segundos como máximo para los vídeos de esta página en los resultados de búsqueda.

Otros valores admitidos:

0: como máximo, se puede utilizar una imagen estática, de acuerdo con la configuración de «max-image-preview».
-1: no hay límite.

Se aplica a todo tipo de resultados de búsqueda (en la Búsqueda web de Google, Google Imágenes, Google Vídeos, Discover o el Asistente).

Esta directiva se ignora si no se especifica ningún elemento [number] que se pueda analizar.

Ejemplo:

• notranslate
  No se ofrece una traducción de esta página en los resultados de búsqueda.
• noimageindex
  No se indexan las imágenes de esta página.
• unavailable_after: [date/time]
  No se muestra esta página en los resultados de búsqueda después de la fecha y hora especificadas. La fecha y la hora deben especificarse en formatos ampliamente aceptados, como RFC 822, RFC 850 o ISO 8601. Esta directiva se ignora si no se especifica ningún valor [date/time] válido. De forma predeterminada, el contenido no tiene fecha de caducidad.

https://developers.google.com/search/reference/robots_meta_tag

Consulta la lista completa de los rastreadores de Google.

Por ejemplo, para mostrar una página en los resultados de búsqueda web de Google, pero no en Google Noticias, utiliza la siguiente metaetiqueta:

<meta name="googlebot-news" content="noindex" />

Para especificar varios rastreadores de forma individual, puedes utilizar varias metaetiquetas «robots»:

<meta name="googlebot" content="noindex">
<meta name="googlebot-news" content="nosnippet">

metatag NOODP, para que sirve

Si tu sitio web está listado en el Open Directory Project (DMOZ), los buscadores puede elegir por utilizar el titulo y la descripción de DMOZ en sus resultados de sus búsquedas y no lo que consta en tu pagina web, unas veces ocurre también por que en tu pagina esta faltando el titulo y/o meta descripción.

Para evitar este comportamiento se debe hacer uso de la meta tag NOODP, si por el contrario si que queremos forzar a que los datos los extraiga de DMOZ debemos poner ODP.

Común para todos los buscadores

<meta name="" content="noodp"> Datos propios
<meta name="" content="odp">  Datos de DMOZ

Buscadores específicos

En el name poner el nombre del robot de búsqueda

Robot de Google

<meta name="googlebot" content="noodp"> No DMOZ
<meta name="googlebot" content="odp"> Si DMOZ

Robot de Yahoo

<meta name="slurp" content="noodp"> No DMOZ
<meta name="slurp" content="odp"> Si DMOZ

Robot de Bing

<meta name="msnbot" content="noodp"> No DMOZ
<meta name="msnbot" content="odp"> Si DMOZ

NOTA: El 17 de marzo de 2017 se dio de baja este servicio, con lo que esta meta no tiene ninguna utilidad a fecha de hoy.

Puedes navegar por lo que era dmoz.org, aqui.

Una ruta de exploración segun la especificación HTML5 está formada por varios enlaces que reflejan la estructura jerárquica de un sitio web y permiten que el usuario la explore.

Permitiendo marcar el orden y nombre de los elementos en los resultados de búsquedas de los principales buscadores entre ellos Google, Microsoft y Yahoo! ya lo comprender y lo muestran en sus resultados.

Ejemplo:

<div class="navega">
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://megazona.com" title="megazona.com" itemprop="url" rel="index">
<span itemprop="title">megazona</span></a>
</span>
»
<span itemscope itemtype=http://data-vocabulary.org/Breadcrumb>
<a href=http://megazona.com/html5/ title="Html5" itemprop=url>
<span itemprop=title>html5</span></a>
</span>
»
<span itemscope itemtype=http://data-vocabulary.org/Breadcrumb>
<a href=http://megazona.com/html5/microdatos/ title="Microdatos" itemprop=url>
<span itemprop=title>microdatos</span></a>
</span>
</div>

Buenas prácticas y atributos útiles en HTML

Precarga de archivos con <link rel="preload">

El elemento <link rel="preload"> permite cargar archivos con alta prioridad antes de que sean requeridos, mejorando el rendimiento de la página.

Carga diferida de imágenes e iframes con loading="lazy"

El atributo loading="lazy" permite diferir la carga de imágenes (<img>) e iframes (<iframe>) hasta que sean visibles en la pantalla, optimizando el rendimiento.

Creación de contenido dinámico con srcdoc en <iframe>

El atributo srcdoc permite definir directamente el código HTML dentro de un <iframe>, sin necesidad de un archivo externo.

Descarga de archivos con el atributo download en <a>

El atributo download en enlaces (<a>) permite que el recurso se descargue en lugar de abrirse en el navegador. Además, se puede especificar un nombre personalizado para el archivo.

Uso de etiquetas semánticas en lugar de <div>

En HTML existen etiquetas semánticas como <section>, <header>, <nav> y <footer>, que mejoran la estructura del documento en lugar de depender exclusivamente de <div>.

Autocompletado con <datalist>

La etiqueta <datalist> permite crear listas de opciones sugeridas dentro de un campo <input>, proporcionando funcionalidad similar a <select> pero con autocompletado nativo.

Uso de <template> para elementos inertes

La etiqueta <template> permite definir fragmentos de código HTML que no se renderizan inmediatamente en el DOM, útiles para reutilización y encapsulación sin afectar el estilo global.

Versión alternativa de contenido con <link rel="alternate">

El uso de <link rel="alternate"> permite especificar versiones alternativas de la página actual, como archivos PDF, feeds RSS o traducciones a otros idiomas.

Imagen de portada en <video> con poster

El atributo poster en la etiqueta <video> permite definir una imagen que se mostrará antes de que el video comience a reproducirse.

Creación de ventanas de diálogo con <dialog>

La etiqueta <dialog> permite crear cuadros de diálogo modales de forma nativa en HTML, con la opción de cerrarlos sin necesidad de JavaScript.

Evitar traducción automática con translate="no"

El atributo translate="no" impide que el contenido de una etiqueta sea traducido automáticamente en herramientas como Google Translate.

Evitar <center>, ya que está obsoleto

La etiqueta <center> ha sido declarada obsoleta y no se recomienda su uso. En su lugar, se pueden utilizar propiedades CSS como text-align: center; o flexbox.

Personalización del color del navegador con <meta name="theme-color">

El uso de <meta name="theme-color"> permite modificar el color de la interfaz del navegador en dispositivos móviles, mejorando la integración visual con la página web.

Contenido editable con contenteditable

El atributo contenteditable convierte cualquier elemento HTML en un campo editable directamente desde el navegador.

<marquee> está obsoleto pero sigue funcionando

La etiqueta <marquee> para crear texto en movimiento está en desuso y no se recomienda su implementación en nuevos proyectos.

Uso de <base> para definir una ruta base

La etiqueta <base> permite establecer una URL base para todos los enlaces y recursos relativos dentro de un documento HTML.

Personalización en redes sociales con Open Graph (<meta property="og:image">)

El uso de <meta property="og:image"> permite definir la imagen que se mostrará al compartir la página en redes sociales, mejorando la apariencia de la vista previa.

Acceso a atributos data-* en JavaScript

Los atributos personalizados data-* pueden ser accedidos en JavaScript a través de element.dataset.nombreAtributo.

Iniciar videos desde un punto específico

En la etiqueta <video>, se puede añadir el fragmento #t=15 al final de la URL para indicar que la reproducción debe comenzar en el segundo 15.

Subtítulos en <video> con <track>

La etiqueta <track> permite añadir subtítulos a un video en formato WebVTT, facilitando la accesibilidad y la comprensión del contenido multimedia.

Elementos semánticos / Estructural

Nuevos para medios de comunicación / Media

El nuevo elemento <canvas>

Nuevos elementos de formulario

Elementos eliminados de la version anterior de HTML

Los siguientes elementos o etiquetas de la version HTML4 fueron eliminados y su uso no sería correcto para la nueva versión de HTML5

• <acronym>
• <applet>
• <basefont>
• <big>
• <center>
• <dir>
• <font>
• <frame>
• <frameset>
• <NOFRAMES>
• <strike>
• <tt>

Requisitos que tiene que cumplir apple-touch-icon.png

• El formato en png
• El ancho y alto del fichero es fijo, los tamaños ha ido aumentado conforme las pantallas han crecido.
• El nombre del fichero debe llamarse apple-touch-icon.png el propio iphone redondeara las esquinas y le dará el efecto típico de los botones del iPhone, si no deseas que el icono se le apliquen los efectos el iPhone deberás guardarlo con el nombre apple-touch-icon-precomposed.png el teléfono al encontrar este fichero dejara el icono tal cual este.
  NOTA: Aunque esto no es del todo cierto, si no existe la meta el navegador buscara directamente en la raiz del website.

Una vez creado el fichero y subido a nuestra web deberemos añadir el siguiente meta en el header

<link rel="apple-touch-icon" href="https://tudominio.com/apple-touch-icon.png">

El nombre del archivo puede ser distinto y la ubicación en la web también, si lo especificamos en la ruta de la meta.

Metas apple-touch-icon con tamaños en html

<link rel="apple-touch-icon" href="[rutaarchivo]">
<link rel="apple-touch-icon-precomposed" href="[rutaarchivo]">
<link rel="apple-touch-icon" sizes="57x57" href="[rutaarchivo]">
<link rel="apple-touch-icon" sizes="60x60" href="[rutaarchivo]"> 
<link rel="apple-touch-icon" sizes="72x72" href="[rutaarchivo]">
<link rel="apple-touch-icon" sizes="76x76" href="[rutaarchivo]">
<link rel="apple-touch-icon" sizes="114x114" href="[rutaarchivo]"> 
<link rel="apple-touch-icon" sizes="120x120" href="[rutaarchivo]">
<link rel="apple-touch-icon" sizes="128x128" href="[rutaarchivo]"> 
<link rel="apple-touch-icon" sizes="144x144" href="[rutaarchivo]"> 
<link rel="apple-touch-icon" sizes="152x152" href="[rutaarchivo]">
<link rel="apple-touch-icon" sizes="167x167" href="[rutaarchivo]">
<link rel="apple-touch-icon" sizes="180x180" href="[rutaarchivo]">

Ejemplo de apple-touch-icon utilizado en megazona

Generadores de apple-touch-icon online

• https://iconifier.net/
• https://manytools.org/http-html-text/apple-touch-icon-generator/
• https://digitalagencyrankings.com/iconogen/