En HTML5 además de nuevos elementos, también se incorporan nuevos atributos. Esto resulta fundamental para resolver muchas necesidades de los desarrolladores y maquetadores.
El atributo global hidden se puede aplicar a un elemento para indicar que está oculto, que no se mostrará.
Operando de una manera similar al display:none de CSS, esta opción tiene un sentido semántico que además de no mostrar el elemento, significa que no está visible para el medio o dispositivo que lo esté leyendo.
Modo de uso de atributo hidden en HTML5
Al ser un atributo del tipo booleano, simplemente lo pondremos o no lo pondremos. Un ejemplo de su uso sería:
<span hidden="hidden">Error oculto</span>
El contenido de la línea anterior no será mostrado en los navegadores compatibles con esta característica (Firefox, Chrome, Safari y Opera). Si quitamos hidden="hidden" ese elemento volverá a ser visible. La ventaja es que podremos manipularlo mediante el DOM mediante funciones de JavaScript.
Como podemos ver el atributo hidden en HTML5 es muy fácil de usar y nos permite indicar si un elemento aún no está para visualizar o no debe verse por alguna razón. Vale recordar que esta opción debe usarse de manera incorrecta con fines de SEO o para ocultar menús, por ejemplo.
Para saber más podemos leer el documento publicado por MDN: https://developer.mozilla.org/es/docs/Web/HTML/Global_attributes/hidden.