HTML5 – Elemento P

El elemento p es un viejo conocido de versiones anteriores de HTML, probablemente es uno de los elementos más comúnmente utilizados. Representa un párrafo, el cual consiste en un bloque de texto que esta separado por lineas en blanco. Muchos navegadores muestran los párrafos con una linea en blanco entre ellos. Del W3C obtenemos este simple ejemplo de utilización de un párrafo:

Continuar

HTML5 – Elemento Div

Se piensa que con la introducción de los nuevos elementos semánticos, el elemento div deja de utilizarse pero no es así. Según la deficinición del W3C: El elemento div no tiene un significado semántico, representa un conjunto de elementos. Puede ser usado con los atributos class, lang y title para darle una semantica a un grupo de varios elementos. W3C Specification

Continuar

HTML5 – Etiqueta Aside

El elemento aside es otra de las nuevos elementos semánticos introducidos en HTML5. Éste elemento puede ser utilizado dentro o fuera de un elemento article, y según su localización tiene un significado u otro. Cuando va incluido dentro del elemento article , su contenido debe estar relacionado con el contenido del elemento contenedor, de manera que su contenido sea relevante para el elemento article y que si se elimina el elemento, el contenido de article quedará incompleto. Algunos usos que se le podrían dar a este elemento son: una aclaración al contenido principal del articulo o una cita.

Continuar

HTML5 – Etiqueta Nav

Cuando se diseña una página web es muy común tener un menú de navegación o un conjunto de enlaces a otras páginas o a distintas partes de la página. En HTML5 se ha creado el elemento nav para delimitar estas secciones. Según la definición del W3C, “el elemento nav representa una sección de una página que contiene links a otras páginas o a partes de la página”. Un posible ejemplo de la utilización de este elemento podría ser el siguiente menú: [html] Fútbol Baloncesto Fútbol Sala [/html] Hay que tener en cuenta que no todos los grupos de links de…

Continuar

HTML5 – Etiqueta Article

El elemento article es otra de las nuevas etiquetas de HTML5. En la especificación de HTML5 se encuentra dentro del grupo de elementos que tienen por finalidad definir secciones, donde también se encuentran elementos como header, hgroup, section, footer, etc. (elementos de sección). Tiene un valor semántico principalmente. Ahora mismo existe mucha confusión con el elemento section. Durante los tres próximos artículos intentaré explicar estos dos elementos, sus diferencias y cual sería la forma más adecuada de utilizar cada uno de estos elementos. Definiendo el Elemento Si leemos la especificación del elemento article , nos dice: “The article element represents…

Continuar

HTML5 – Etiqueta hgroup

La etiqueta <hgroup> es otra de las nuevas etiquetas semánticas introducidas en HTML5. La etiqueta <hgroup> es usada para agrupar un conjunto de elementos h1–h6, por ejemplo, cuando tenemos un titulo y a continuación una pequeña descripción o subtitulo. Pero, ¿cuándo debemos utilizar <hgroup>? y ¿cuándo debemos utilizar header?. Cuando únicamente tenemos un titulo dentro de un articulo o sección no debemos utilizar ni header ni <hgroup>.

Continuar

HTML5 – Etiqueta Header

Normalmente todas las páginas Web suelen tener una cabecera. Ésta suele encontrarse en la parte superior de la página, y en ella suele aparecer el logo o el título de la página y, a lo mejor, un subtitulo que describe el contenido de la página. En HTML4.01 para definir la cabecera se utilizaban divs y se le asignaba una clase llamada header o similar. De esta manera utilizábamos divs tanto para definir la cabecera como el contenido de la página como el pie de página.

En HTML5 se introduce la etiqueta header, la cual tiene únicamente un valor semántico.…

Continuar

Cargar Scripts en HTML5

Cuando desarrollamos una página web solemos introducir scripts (normalmente javascript) o librerías para darle ciertas funcionalidades y hacerla más dinámica. Ésto se puede conseguir incluyendo los scripts dentro de la página o importando ficheros externos. Cuando se añaden estos códigos se puede ralentizar la carga de la página o se pueden producir errores cuando se ejecuta el javascript, ésto es debido a la forma que tienen los navegadores de tratar la etiqueta script, y éste suele ser un problema importante en el desarrollo de una página web. Pero, ¿cómo tratan los navegadores la etiqueta script? Los navegadores parsean el código…

Continuar

HTML5 – Etiqueta Meta

La etiqueta meta representa varios tipos de metadatos que no pueden ser expresados con las etiquetas title, base, link, style y script. Con ella podemos indicar el tipo de codificación de nuestra página y otro tipo de metadatos. Para ello utiliza los atributos name, http-equiv, charset e itemprop. El atributo charset se utiliza para especificar la codificación usada en nuestra página. Únicamente debe existir una etiqueta meta con el atributo charset en la página. En él indicaremos si nuestra página esta codificada en UTF-8, ISO o cualquier otro tipo de codificación. Este elemento debe estar dentro del los primeros 512…

Continuar

HTML5, primeros pasos – semántica

Comenzar un proyecto en HTML5 es muy sencillo, únicamente tenemos que añadir el siguiente doctype como primera línea de nuestro código. El doctype nos sirve para indicar el tipo de documento:

Aquí empezamos a ver una de las características principales de HTML5, la sencillez. En versiones anteriores de HTML se definían varios tipos de etiquetas doctype, ahora sólo existe una etiqueta y como podéis comprobar mucho más sencilla. Si lo que deseamos es actualizar nuestra página en HTML4 lo único que debemos realizar es el cambio del doctype y ya tendremos nuestra página en HTML5. En HMTL5 algunos elementos…

Continuar