Ejemplos de mejoras e incorporaciones respecto a antiguas versiones

HTML5 se desarrolló para simplificar, especificar y organizar el código. Para lograr estos propósitos, se añadieron algunos atributos y etiquetas y se integró HTML con CSS Javascript. Estas incorporaciones y mejoras de versiones anteriores afectan no sólo a nuevos elementos, si no también a como usamos los viejos.

<mark>

La etiqueta <mark> fue añadida para resaltar parte de un texto que no era importante originalmente pero que se vuelve importante dada la actividad actual del usuario. El mejor ejemplo es el resultado de una búsqueda. El elemento <mark> resaltará la parte del texto que coincide con la palabra buscada.

Un ejemplo es la búsqueda de la palabra "coche"; el resultado puede ser mostrado con este código:

<span>Mi <mark>coche</mark> es rojo</span>

El texto representa los resultados de la búsqueda, y las etiquetas <mark> rodean el texto buscado- la palabra "coche". En algunos buscadores, la palabra será resaltada con un fondo amarillo por defecto, pero se puede sobreescribir esos estilos con los propios utilizando CSS.

En el pasado, se conseguía el mismo resultado utilizando el elemento <b>. Sin embargo, la incorporación del <mark> ha ayudado a cambiar el significado y ha creado nuevas funciones para varios elementos entre ellos los siguientes:


<em> debería ser utilizado para indicar énfasis (reemplazando la etiqueta <i> que utilizabamos antes)
<strong> para mostrar importancia
<mark> para resaltar texto importante de acuerdo con las circunstancias
<b> debería ser utilizado solamente cuando ningún otro elemento sea apropiado

<small>


La nueva especificidad de HTML es evidente en algunos elementos como <small>. Este elemento, anteriormente, presentaba cualquier texto con una letra pequeña. La etiqueta se refería al tamaño del texto, independientemente de su significado.

En HTML5 la nueva función del elemento <small> es representar la "letra pequeña", como derechos de copyright, de propiedad, etc.


<small>Copyright &copy; 2013 edu4Java</small>


<cite>


Otro elemento que ha cambiado su naturaleza para ser más específico es <cite>. Ahora las etiquetas <cite> engloban el título de un trabajo, como un libro, película, canción, etc.


<span>Me gusta la película <cite>Casablanca</cite></span>

<address>


El elemento <address> es un elemento viejo que se ha convertido en un elemento estructural. Se usa para plasmar la información de contacto de, por ejemplo, el contenido de un elemento <article> o del cuerpo entero. Este elemento debería ser incluido dentro de un <footer>, como en el ejemplo:


<article>
<header>
<h1>Título del tutorial uno</h1>
</header>
Este es el texto del tutorial
<footer>
<address>
<a href="http://www.edu4java.com/index.html">edu4Java</a>
</address>
</footer>
</article>


<time>


Para mostrar la fecha se puede utilizar simplemente el elemento <p> dentro del <header> de los artículos en los que queremos enseñar la fecha, pero en HTML5 existe un elemento especial para este propósito. El elemento <time> nos permite declarar un sello de tiempo que lee la máquina, así como un texto leible por el ojo humano que representa la fecha y la hora.


<article>
<header>
<h1>Título del tutorial uno</h1>
<time datetime="2013-10-12" pubdate>posted 12-10-2013</time>
</header>
Texto del tutorial uno
</article>

El atributo datetime representa el sello del tiempo que leerá la máquina. El formato del sello del tiempo puede seguir un formato concreto como en este ejemplo: 2013-10-12T12:10:45. También podemos incluir el atributo pubdate, que es añadido para indicar que el valor del atributo datetime representa la fecha de publicación.

 

 


<<Nuevos Elementos Atributos Globales HTML5 >>