Categorías destacadas
Artículo
|
Atributos globales que se podrán utilizar con HTML 5 |
Con la llegada de la versión 5 de HTML, también nos encontramos con nuevas etiquetas que nos proporcionará nuevas funcionalidades. Para estas etiquetas y para algunas que ya existían, aparecen nuevos atributos que se pueden utilizar en la mayoría de las etiquetas. Vamos a repasar algunos atributos que se pueden utilizar en la mayoría de las etiquetas.
Accesskey
Este atributo permite poder acceder alguna zona de la página de una forma más directa, con la pulsación de alguna tecla que le indiquemos. Algún ejemplo podría ser:
En este caso, para poder acceder hasta ahí con el teclado, se debería de pulsar “Ctrl + Alt + A, pero cada navegador podría tener su combinación de teclas.
Class
Este atributo es uno de los más conocidos ya que se utiliza para asignar bloques de estilos por medio de las hojas de estilo..
Contenteditable
Este es uno de los atributos nuevos que nos aparecen y que nos permitirá que un acceso externo permita o no editar o cambiar el contenido de una etiqueta. Es un elemento que se hereda de los padres, por lo que si un elemento padre no se puede editar, los hijos tampoco. Es un elemento booleano.
Contextmenu
Este nuevo atributo viene a ser como si le pusiéramos un id, pero para el caso especial de este tag.
Dir
Este atributo indica la dirección del texto para los idiomas en los que se escribe de derecha a izquierda y no de izquierda a derecha. Solo tiene dos posibles valores: ltr (left to right) o rtl (right to left).
Draggable
Es un atributo que permitirá indicar los bloques que se podrán mover dentro de una web. También se podrá incorporar o eliminar elementos de una página simplemente arrastrándolos. Los valores que podrán tener por defecto son true, false o auto, que es el que trae por defecto.
Hidden
Este atributo permitirá ocultar bloques dentro de la web. Hasta ahora para hacer esto había que utilizar propiedades CSS para ocultarlo, pero ahora con esto no será necesario. Todavía no hay ningún navegador que implemente esta propiedad.
itemid, itemprop, itemref, itemscope y itemtype
El itemscope permite crear un nuevo conjunto de elementos los cuales han de ser de un tipo, que se informa con el itemtype. Este tipo ha de venir dado con una dirección URL (que indica el microdato nuevo)
El itemid es el que identifica al elemento, el itemref hace referencia a otros elementos que han de poder ser utilizados y, para acabar, itemprop viene a ser el que da los valores.
Spellcheck
Otra de las nuevas novedades. Mediante este atributo se podrá indicar qué contenidos o no queremos que sufran una correción ortográfica o gramatical. Tiene tres posibles valores: true, false o default.
Tabindex
Con este atributo conseguiremos que cada vez que pulsemos en la tecla “tab” vaya a un sitio u otro de la página. Hay que tener en cuenta que no todos los elementos permiten tener este atributo, sólo aquellos en los que el usuario puede focalizarse.
Data-*
Gracias a este tipo de atributos podremos crear nuestros propios microformatos de una forma más o menos estándar. Básicamente la idea es la de poder añadir información “oculta” que no moleste a los lectores pero que los navegadores y los robots sean capaces de interpretar si se les añade la forma de hacerlo.
Vía: javiercasares.com
Accesskey
Este atributo permite poder acceder alguna zona de la página de una forma más directa, con la pulsación de alguna tecla que le indiquemos. Algún ejemplo podría ser:
<a accesskey="A" href="http://example.com/">Ejemplo</a>
En este caso, para poder acceder hasta ahí con el teclado, se debería de pulsar “Ctrl + Alt + A, pero cada navegador podría tener su combinación de teclas.
Class
Este atributo es uno de los más conocidos ya que se utiliza para asignar bloques de estilos por medio de las hojas de estilo..
<a class="enlace" href="http://example.com/">Ejemplo</a>
Contenteditable
Este es uno de los atributos nuevos que nos aparecen y que nos permitirá que un acceso externo permita o no editar o cambiar el contenido de una etiqueta. Es un elemento que se hereda de los padres, por lo que si un elemento padre no se puede editar, los hijos tampoco. Es un elemento booleano.
<div contenteditable="false">Este contenido no debería ser editable desde el exterior...</div>
Contextmenu
Este nuevo atributo viene a ser como si le pusiéramos un id, pero para el caso especial de este tag.
Dir
Este atributo indica la dirección del texto para los idiomas en los que se escribe de derecha a izquierda y no de izquierda a derecha. Solo tiene dos posibles valores: ltr (left to right) o rtl (right to left).
<div dir="ltr">Este contenido está escrito de izquierda a derecha...</div>
Draggable
Es un atributo que permitirá indicar los bloques que se podrán mover dentro de una web. También se podrá incorporar o eliminar elementos de una página simplemente arrastrándolos. Los valores que podrán tener por defecto son true, false o auto, que es el que trae por defecto.
Hidden
Este atributo permitirá ocultar bloques dentro de la web. Hasta ahora para hacer esto había que utilizar propiedades CSS para ocultarlo, pero ahora con esto no será necesario. Todavía no hay ningún navegador que implemente esta propiedad.
<div hidden>Este contenido está oculto por no ser relevante para el usuario...</div>
itemid, itemprop, itemref, itemscope y itemtype
El itemscope permite crear un nuevo conjunto de elementos los cuales han de ser de un tipo, que se informa con el itemtype. Este tipo ha de venir dado con una dirección URL (que indica el microdato nuevo)
El itemid es el que identifica al elemento, el itemref hace referencia a otros elementos que han de poder ser utilizados y, para acabar, itemprop viene a ser el que da los valores.
<figure itemscope itemtype="http://n.whatwg.org/work" itemref="licenses"> <img itemprop="work" src="images/house.jpeg" alt="A white house, boarded up, sits in a forest."> <figcaption itemprop="title">The house I found.</figcaption> </figure> <p id="licenses">All images licensed under the <a itemprop="license" href="http://www.opensource.org/licenses/mit-license.php">MIT license</a>.</p>
Spellcheck
Otra de las nuevas novedades. Mediante este atributo se podrá indicar qué contenidos o no queremos que sufran una correción ortográfica o gramatical. Tiene tres posibles valores: true, false o default.
Tabindex
Con este atributo conseguiremos que cada vez que pulsemos en la tecla “tab” vaya a un sitio u otro de la página. Hay que tener en cuenta que no todos los elementos permiten tener este atributo, sólo aquellos en los que el usuario puede focalizarse.
Data-*
Gracias a este tipo de atributos podremos crear nuestros propios microformatos de una forma más o menos estándar. Básicamente la idea es la de poder añadir información “oculta” que no moleste a los lectores pero que los navegadores y los robots sean capaces de interpretar si se les añade la forma de hacerlo.
<div class="spaceship" data-ship-id="92432" data-weapons="laser 2" data-shields="50%" data-x="30" data-y="10" data-z="90"> <button class="fire" onclick="spaceships[this.parentNode.dataset.shipId].fire()">Fire</button> </div>
Vía: javiercasares.com
 |
Publicado por: angel carrero |
|
|
Comentarios
Últimas noticias
· factura
Últimos artículos
