¿Cuál es la diferencia entre el atributo oculto y la regla display:none (CSS)?

HTML tiene un atributo, hiddenque se puede utilizar para ocultar contenido.

<article hidden>
   <h2>Article #1</h2>
   <p>Lorem ipsum ...</p>
</article>

CSS tiene la display:none regla, que también se puede usar para ocultar contenido y devolver el espacio que el contenido habría tomado al flujo del documento.

article { display:none; }

Visualmente, parecen idénticos. ¿Hay alguna diferencia semánticamente? Computacionalmente?

¿Qué pautas debo tener en cuenta sobre cuándo usar uno u otro?

La diferencia clave parece ser que hidden los elementos siempre están ocultos independientemente de la presentación:

El atributo oculto no debe usarse para ocultar contenido que podría mostrarse legítimamente en otra presentación. Por ejemplo, es incorrecto usar hidden para ocultar paneles en un cuadro de diálogo con pestañas, porque la interfaz con pestañas es simplemente una especie de presentación desbordada; uno podría igualmente mostrar todos los controles de formulario en una página grande con una barra de desplazamiento. Es igualmente incorrecto usar este atributo para ocultar contenido solo de una presentación: si algo está marcado como oculto, se oculta de todas las presentaciones, incluidos, por ejemplo, los lectores de pantalla.

http://dev.w3.org/html5/spec/Overview.html#el-atributo-oculto

Dado que CSS puede apuntar a diferentes tipos de medios/presentaciones, display: none dependerá de una presentación dada. Por ejemplo, algunos elementos pueden tener display: none cuando se ve en un navegador de escritorio, pero no en un navegador móvil. O bien, estar oculto visualmente pero aún disponible para un lector de pantalla.

Regla simple:

¿Estás ocultando algo porque aún no es semánticamente parte del contenido de la página, como una serie de posibles mensajes de error que aún no se han activado? Utilizar hidden.

¿Está ocultando algo que es parte del contenido de la página, como cambiar un párrafo a un estado contraído para evitar el desorden? Utilizar display:none.

hidden se trata de semántica (si algo es actualmente parte del contenido de la página) y display: none se trata de la presentación del contenido de la página.

Desafortunadamente, hidden NO anulará ninguna display CSS, aunque tendría un sentido intuitivo que algo que no es parte de la página nunca debería mostrarse. Si tu quieres hidden para ser respetado, agregue esta regla css: [hidden] { display: none !important }

Ejemplos:

1. Utilizar hidden para un mensaje de “gracias” que no debería existir como parte de la página hasta que se haya completado un formulario.

2. Utilizar hidden para una serie de posibles mensajes de error que podrían mostrarse al usuario dependiendo de sus acciones en la página. Estos errores no forman parte semánticamente del contenido de la página hasta que se produce un error.

3. Utilizar display: none para la navegación que solo se muestra cuando un usuario se desplaza o hace clic en un botón de menú.

4. Utilizar display: none para paneles con pestañas, donde la única razón para los paneles con pestañas es que sería demasiado abrumador mostrar al usuario todos los paneles simultáneamente. (Quizás si un usuario tuviera una pantalla lo suficientemente ancha, se mostrarían todos los paneles. Por lo tanto, los paneles siempre fueron parte del contenido de la página, por lo que la lógica de presentación CSS es la opción adecuada).

5. Utilizar display: none para colapsar un párrafo o sección dentro de un documento. Esto indica que el párrafo sigue siendo parte del contenido de la página, pero lo ocultamos para comodidad del usuario.

Nota: los dispositivos de accesibilidad se beneficiarían de saber la diferencia entre la navegación o el contenido que está presente pero que no se muestra actualmente, frente al contenido que actualmente no se considera parte de la página y que, por lo tanto, nunca se debe describir al usuario.

¿Cuál es la diferencia entre el hidden atributo (HTML5) y el
display:none regla (CSS)?

MDN confirma que:

Cambiando el valor del CSS display propiedad en un elemento con la
hidden atributo anula el comportamiento.

Y podemos mostrar esto directamente:

.hidden {
  display:none;
}

.not-hidden {
  display: block
}

<p hidden>Paragraph 1: This content is not relevant to this page right now, so should not be seen. Nothing to see here. Nada.</p>
<p class="hidden">Paragraph 2: This content is not relevant to this page right now, so should not be seen. Nothing to see here. Nada.</p>
<p hidden class="not-hidden">Paragraph 3: This content is not relevant to this page right now, so should not be seen. Nothing to see here. Nada.</p>
<p class="hidden not-hidden">Paragraph 4: This content is not relevant to this page right now, so should not be seen. Nothing to see here. Nada.</p>

Esto revela que hay cero diferencia de presentación Entre:

• a) <p hidden>
• b) <p class="hidden"> donde .hidden {display: none;}

Asi que… hidden y class="hidden" son intercambiables verdad?

Equivocado.

Agregando Accesibilidad:

Hay más a considerar que la presentación visual. También deberíamos atender a los lectores de pantalla. para maximizar la accesibilidad (¿verdad?), por lo que la segunda opción inmediatamente anterior debería, más correctamente, verse así:

• b) <p class="hidden" aria-hidden="true"> donde .hidden {display: none;}

¿Por qué se usa un class="hidden" y aria-hidden="true" mejor que usar hidden?

Porque nosotros saber que CSS se puede anular usando la cascada o la especificidad y nosotros saber eso aria-hidden se dirige a agentes de usuario de accesibilidad como lectores de pantalla.

Por el contrario, el HTML5 hidden El atributo es mucho más incompleto. No dice explícitamente lo que hace o deja de hacer y, lo que es peor, parece sugerir que hace cosas que en realidad no hace.

Ver: https://meowni.ca/hidden.is.a.lie.html

Nota final:

Sea cual sea la combinación de HTML, CSS y ARIA que elija, tenga en cuenta que:

Ya tenemos 6 métodos para ocultar contenido con diferentes propósitos/intenciones.

1. display: none;
2. visibility: hidden; (no mostrar, pero mantener el espacio)
3. opacity: 0;
4. width: 0; height: 0;
5. aria-hidden="true"
6. y en el caso de datos de formulario, input type="hidden"

Fuente: https://davidwalsh.name/html5-hidden#comment-501242