Contenido

El tag HTML5 dialog

13 ago

+ 10

El tag HTML5 <dialog />, pensado para marcar una conversación, un chat u otro sistema de interacción entre dos o más interlocutores, aporta un valor semántico a nuestro código.

<dialog>
 <dt> <time>14:22</time> egof </dt>
 <dd> I'm not that nerdy, I've only seen 30% of the star trek episodes</dd>
 <dt> <time>14:23</time> kaj</dt>
 <dd> if you know what percentage of the star trek episodes you have seen, you are inarguably nerdy</dd>
 <dt> <time>14:23</time> egof</dt>
 <dd> it's unarguably</dd>
 <dt> <time>14:24</time> kaj</dt>
 <dd> you are not helping your case</dd>
</dialog>

Como podemos ver en el código superior, marcamos el texto como un <dialog /> que posteriormente seccionamos en <dt /> y <dd /> para especificar nombre y frase asociada a esa persona. Tambien usamos el tag <time /> para indicar la hora de la conversación.

Twitter en HTML5

<dialog>
 <dt><a href="http://twitter.com/akamike">@akamike</a>, <time datetime="2009-08-11T12:35:54">13 minutes ago</time></dt>
 <dd>Where is a good place to eat in town?</dd>
 <dt><a href="http://twitter.com/brucel">@brucel</a>, <time datetime="2009-08-11T12:37:56">11 minutes ago</time></dt>
 <dd><a href="http://twitter.com/akamike">@akamike</a> Have your tried The Swine's Flu pub lunches?</dd>
 <dt><a href="http://twitter.com/Rich_Clark">@Rich_Clark</a>, <time datetime="2009-08-11T12:38:04">11 minutes ago</time></dt>
 <dd><a href="http://twitter.com/akamike">@akamike</a> If you like seafood, try the restaurants at the waterfront</dd>
 <dt><a href="http://twitter.com/jackosborne">@jackosborne</a>, <time datetime="2009-08-11T12:40:02">9 minutes ago</time></dt>
 <dd><a href="http://twitter.com/akamike">@akamike</a> What <a href="http://twitter.com/brucel">@brucel</a> said, or there are lots of good bakeries on the high street.</dd>
 <dt><a href="http://twitter.com/spambot148">@spambot148</a>, <time datetime="2009-08-11T12:45:16">4 minutes ago</time></dt>
 <dd><a href="http://twitter.com/akamike">@akamike</a> Gain 1000 followers in 5 minutes!</dd>
</dialog>

Este ejemplo basado en Twitter y sacado de html5Doctor permite visualizar como debería ser la portada de Twitter en HTML5.

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.