El atributo hidden en HTML5

En HTML5 además de nuevos elementos, también se incorporan nuevos atributos.

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.

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.

Más sobre Diseño y desarrollo Web


Acerca de

Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Desarrollo Web y Mobile. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios impresos y digitales. Brindo capacitaciones, clases de formación y consultorías sobre lenguajes y herramientas para Desarrollo Web y móvil en modalidad online y presencial.

8 Comentarios en “El atributo hidden en HTML5
  1. Creo que la sintaxis correcta es
    Error oculto
    y no
    Error oculto
    Tomo como referencia
    http://www.w3.org/html/wg/drafts/html/master/editing.html#the-hidden-attribute

    • Disculpa ha interpretado el html
      [ span hidden ] Error oculto [ / span ]
      en vez de
      [ span hidden = ” hidden ” ] Error oculto [ / span ]

      Sustituimos “” por “]”

      • …. no hay manera 🙁

        • Damián dice:

          Se puede utilizar como explico en el artículo o directamente colocando hidden.

          Probando en Chrome funciona. En algunos navegadores no es compatible.

          Según la especificación el atributo hidden se puede manejar desde JavaScript de la siguiente manera:

          document.getElementById('elemneto1').hidden = true;
          document.getElementById('elemneto2').hidden = false;

  2. Santiago dice:

    Hola buenas mi nombre es Santi y tengo una pregunta. ¿Es posible ver las respuestas de un test online que hacen en la universidad cuya respuesta(si le damos a inspeccionar elemento) a mi parecer esta ocultada por un hidden?. Utilizan Java Script y me gustaria saber si hay alguna manera de manipular el hidden para que te salga cual es la respuesta correcta

    • Hola Santiago. Respecto a tu pregunta, no tengo una respuesta precisa ya que no conozco el test que comentás. Desde el punto de vista programación, en general, lo recomendado es que las respuestas a cuestionarios o tests tengan el proceso del lado servidor. De ese modo se puede asegurar mejor que la respuesta no pueda ser visible hasta que le usuario indique la suya.
      Saludos

  3. aba dice:

    Hola, cual seria el opuesto de hidden? me refiero q ya esta oculto y lo quiero ver

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*



Encontrame en las redes sociales. Contactame.