El HTML5 (HyperText Markup Language) es la quinta revisión del lenguaje de programación “básico” de la World Wide Web. Esta nueva versión pretende remplazar al actual (X)HTML, corrigiendo problemas con los que los desarrolladores web se encuentran, así como rediseñar el código actualizándolo a nuevas necesidades que demanda la web de hoy en día.

Muchas empresas ya están desarrollando sus sitios webs en esta versión del lenguaje. A diferencia de otras versiones de HTML, los cambios en HTML5 comienzan añadiendo semántica y accesibilidad implícitas, especificando cada detalle y borrando cualquier ambigüedad. Se tiene en cuenta el dinamismo de muchos sitios webs (Facebook, twenti, etc.), donde su aspecto y funcionalidad son más semejantes a aplicaciones webs que a documentos.

Mejor estructura

Actualmente es abusivo el uso de elementos DIV para estructurar una web en bloques. El HTML5 nos brinda varios elementos que perfeccionan esta estructuración estableciendo qué es cada sección, eliminando así <div> innecesarios. Este cambio en la semántica hace que la estructura de la web sea más coherente y fácil de entender por otras personas y los navegadores podrán darle más importancia a según qué secciones de la web facilitándole además la tarea a los buscadores, así como cualquier otra aplicación que interprete sitios web. Las webs se dividirán en los siguientes elementos:

 

<! DOCTYPE html>

Doctype es el encargado de indicarle al navegador web que el documento que está abriendo es un documento html. En esta versión el Doctype es mucho más simplificado y compatible con HTML y XHTML.

 

<header></header>

Elemento <header>  representa un grupo de artículos introductorios o de navegación.

 

 

<nav></nav>

El elemento <nav>  representa una sección de una página que es un link a otras páginas o a partes dentro de la página: una sección con links de navegación.  En otras palabras es la barra de navegación con su correspondiente botonera.

No todos los grupos de enlaces en una página tienen que estar en un elemento <nav>, sólo las secciones que consisten en bloques principales de la navegación son apropiadas para ser utilizadas con el elemento <nav>. Puede utilizarse particularmente en el pie de página para tener un menú con un listado de enlaces a varias páginas de un sitio, como el Copyright; home page, política de uso

y privacidad. No obstante, el elemento <footer>  es plenamente suficiente sin necesidad de tener un elemento <nav>.

<article></article>

El elemento <article> representa un componente de una página que consiste en una composición autónoma en un documento, página, aplicación, o sitio web con la intención de que pueda ser reutilizado y repetido. Podría utilizarse en los artículos de los foros, una revista o el artículo de periódico, una entrada de un blog, un comentario escrito por un usuario, un widget interactivo o gadget, o cualquier otro artículo independiente de contenido.

Cuando los elementos de <article> son anidados, los elementos de <article> interiores representan los artículos que en principio son relacionados con el contenido del artículo externo. Por ejemplo, un artículo de un blog que permite comentarios de usuario, dichos comentarios se podrían representar con <article>.

<section></section>

Se utiliza para representar una sección “general” dentro de un documento o aplicación, como un capítulo de un libro. Puede contener subsecciones y si lo acompañamos de h1 – h6 podemos estructurar mejor toda la página creando jerarquías del contenido, algo muy favorable para el  buen posicionamiento web. Si comparamos con un blog, aquí estarían todas las entradas de un post.

<aside></aside>

Representa una sección de la página que abarca un contenido tangencialmente relacionado con el contenido que lo rodea, por lo que se le puede considerar un contenido independiente. Este elemento puede utilizarse para efectos tipográficos, barras laterales, elementos publicitarios, para grupos de elementos de la navegación, u otro contenido que se considere separado del contenido principal de la página.

<footer></footer>

El elemento <footer>  representa el pié de una sección, con información acerca de la página/sección que poco tiene que ver con el contenido de la página, como el autor, el copyright o el año.

Es importante aclarar que las etiquetas <div></div> aún pueden ser utilizadas. Siempre deben usarse cuando necesites una caja con objetivos de diseño gráfico o cualquier cosa que no tenga significado semántico.

Ahora veamos cómo quedaría estructurada una página con las nuevas etiquetas de HTML5 que anteriormente hemos especificado.

 

Ejemplo de una página con HTML5
<header>
<h1>El blog de www.virtualtec.cl</h1>
<h2>Este es el blog de VirtualTec</h2>
</header>
<nav>
Aquí va la barra de navegación
</nav>
<section>
<article>Aquí va un post, con su título en h2</article>
</section>
<aside>

Aquí va la Barra lateral con los últimos posts, enlaces destacados, nube de etiquetas, etc.
</aside>
<footer>
Aquí va el nombre del desarrollador, Diseñador, Copyright, lo que siempre va al pie de una página o lo que quieras colocar.
</footer>

 Mejoras en los formularios

 El elemento input adquiere gran relevancia al ampliarse los elementos que se permitirán en el “type”.

<input type=”search”> Para cajas de búsqueda.

<input type=”number”> Para adicionar o restar números mediante botones.

<input type=”range”> Para seleccionar un valor entre dos valores predeterminados.

<input type=”color”> Seleccionar un color.

<input type=”tel”> Números telefónicos.

<input type=”url”> Direcciones web.

<input type=”email”> Direcciones de email. Lo nuevo es que se auto valida.

<input type=”date”>  Para seleccionar un día en un calendario.

<input type=”month”> Para meses.

<input type=”week”> Para semanas.

<input type=”time”> Para fechas.

<input type=”datetime”> Para una fecha exacta, absoluta y tiempo.

<input type=”datetime-local”> Para fechas locales y frecuencia.

 

 

 Otros elementos muy interesantes

<audio></audio> y <video></video>

Nuevos elementos que permitirán incrustar un contenido multimedia de sonido o de vídeo, respectivamente. Es una de las novedades más importantes e interesantes en este HTML5, ya que permite reproducir y controlar vídeos y audio sin necesidad de plugins como el de Flash.

El comportamiento de estos elementos multimedia será como el de cualquier elemento nativo, y permitirá insertar en un video, enlaces o imágenes, por ejemplo. YouTube, ya ha anunciado que deja el Flash y comienza a proyectar con HTML5.

<embed></embed>

Se emplea para contenido incrustado que necesita plugins como el Flash. Es un elemento que ya reconocen los navegadores, pero ahora al formar parte de un estándar, no habrá conflicto con <object>.

<canvas></canvas>

Este es un elemento que permite que se generen gráficos vectoriales y de bitmaps con Javascript en su interior. Es importante recordar que esta etiqueta fue creada por Apple para su navegador Safari y en un principio existieron problemas para implementarla debido a los derechos de creación. Finalmente las licencias fueron liberadas.

<svg></svg>

(Scalable Vector Graphics), Una etiqueta para insertar dibujos y animaciones vectoriales al esilo de Flash; todo basado en el estándar abierto SVG derivado de XML.

Los diseñadores Web podemos hacer algunas cosas muy bien con HTML 4 y CSS 2.1. Podemos estructurar nuestros documentos de manera lógica y crear sitios que ofrecen información sin depender de diseños arcaicos basados en tablas. Podemos estilizar nuestras páginas web con la belleza y detalle sin recurrir a la línea de etiquetas <font> y <br>. De hecho, nuestros métodos de diseño actuales nos han llevado mucho más allá de la época infernal de la guerra de los navegadores.

Por lo que hemos venido usando HTML 4 y CSS 2.1, sin embargo, podemos hacerlo mejor. Podemos refinar la estructura de nuestros documentos y aumentar su precisión semántica. Podemos afinar la presentación de nuestras hojas de estilo y avanzar en su flexibilidad estilística. A medida que continuamos ampliando los límites de las lenguas existentes, HTML 5 y CSS 3 están ganando popularidad rápidamente, dejando al descubierto su poder colectivo con algunas posibilidades de diseño nuevo y emocionante.

Adiós a la sopa de <div>, hola marcado semántico.

En el pasado, los diseñadores lucharon con diseños basados en tablas semánticamente incorrectas. Con el tiempo, gracias al pensamiento revolucionario de la talla de Jeffrey Zeldman y Meyer Eric , diseñadores inteligentes adoptaron métodos de diseño más correcto semánticamente, la estructuración de sus páginas con elementos <div>  en lugar de tablas, y el uso de hojas de estilo externas para su presentación. Por desgracia, los diseños complejos requieren una diferenciación significativa de elementos estructurales subyacentes, que suele dar lugar al “síndrome de la sopa de <div>”. Tal vez esto te resulta familiar:

<div id="news">
   <div class="section">
        <div class="article">
             <div class="header">
                 <h1> demostración Sopa de Div.</h1>
                 <p> Publicado el 05 de Abril 2012</p>
             </div>
         <div class="content">
            <p> texto Lorem ipsum, bla, bla, bla. </p>
            <p> texto Lorem ipsum, bla, bla, bla. </p>
            <p> texto Lorem ipsum, bla, bla, bla. </p>
         </div>
         <div class"footer">
            <p>Etiqueta: HMTL, código, demo </p>
         </div>
      </div>
      <div class="aside">
         <div class="hader">
            <h1> información tangencial </ h1>
         </div>
         <div class="content">
            <p> texto Lorem ipsum, bla, bla, bla. </p>
            <p> texto Lorem ipsum, bla, bla, bla. </p>
            <p> texto Lorem ipsum, bla, bla, bla. </p>
         </div>
         <div class="footer">
              <p>Etiqueta: HMTL, código, demo </ p>
         </div>
      </div>
   </div>
</div>

Aunque un poco artificial, este ejemplo sirve para ilustrar la redundancia estructural del diseño de diseños complejos con HTML 4 (así como XHTML 1.1 y otros). Afortunadamente, HTML 5 alivia esta “Sopa de <div>”  dándonos un nuevo conjunto de elementos estructurales. Estos nuevos elementos de HTML 5 sustituye el sentido <div> con definiciones más precisas semánticamente, y al hacerlo, dar más “naturalidad” al documento con el estilo  CSS. Con HTML 5, el ejemplo se desarrolla de la siguiente manera:

<section>
   <section>
      <article>
         <header>
            <h1>Demostración de Sopa de Div</h1>
            <p>Publicado el  28 de diciembre de 2011</p>
         </header>
         <section>
            <p>Lorem ipsum text bla,  bla, bla.</p>
            <p>Lorem ipsum text bla,  bla, bla.</p>
            <p>Lorem ipsum text bla,  bla, bla.</p>
         </section>
         <footer>
            <p>Etiqueta: HMTL, code, demo</p>
         </footer>
      </article>
      <aside>
         <header>
            <h1>Información tangencial</h1>
         </header>
         <section>
            <p>Lorem ipsum text bla,  bla, bla.</p>
            <p>Lorem ipsum text bla,  bla, bla.</p>
            <p>Lorem ipsum text bla,  bla, bla.</p>
         </section>
         <footer>
            <p> Etiqueta: HMTL, code, demo </p>
         </footer>
      </aside>
   </section>

</section>

Como puedes ver, HTML 5 nos permite reemplazar nuestra multitud de <div> con elementos estructurales semánticamente significativos. Esta especificidad semántica no sólo mejora la calidad y el significado subyacente de nuestras páginas web, sino que también nos permite eliminar muchas de los atributos “class” y “id” que se requiere previamente para los objetivos de nuestros CSS. De hecho, CSS3 permite eliminar prácticamente todos los atributos “class” y “id”.

 

Adiós atributos class, hola marcado limpio.

Cuando se combina con los nuevos elementos semánticos de HTML 5, CSS3 proporciona a los diseñadores web con poderes divinos en sus páginas web. Con la potencia de HTML 5, se obtiene un control mucho más significativo en la estructura de nuestros documentos, y con el poder de CSS3, nuestro control sobre la presentación de nuestros documentos tiende al infinito.

Incluso sin algunos de los selectores CSS avanzados a nuestra disposición, la nueva variedad de elementos  específicos de HTML 5 nos permiten aplicar estilos a través de secciones similares, sin la necesidad de definir los atributos “class” y “id”. Al estilo de nuestro ejemplo anterior de sopa de <div>, apuntaría a la multitud de atributos a través de la siguiente CSS:

#news { }
.section { }
.article { }
.header { }
.content { }
.footer {}
.aside {}

Por otro lado, al estilo de nuestro ejemplo  HTML 5, pueden dirigirse a las regiones de varios documentos directamente con este CSS:

section { }
article { }
header { }
footer { }
aside { }

Esta es una mejora, pero hay varias cuestiones que deben abordarse. Con el  ejemplo de los <div>, nos dirigimos a cada área en particular mediante el uso de los atributos “class” y   “id”. Usando esta lógica nos permite aplicar estilos a cada región del documento, ya sea colectiva o individualmente. Por ejemplo, en el caso de las divisiones <div>.section y .content  son fáciles de distinguir, sin embargo, en el caso HTML 5, el elemento  <section>  se utiliza para estas dos áreas y otros. Esto se resuelve fácilmente mediante la adición de los selectores de atributos específicos de los distintos elementos <section>.

 

Orientación a los elementos HTML5 sin class o id

Para completar el artículo, vamos a ver algunos ejemplos prácticos de la orientación de los elementos HTML5 sin class o id. Hay tres tipos de selectores CSS que nos permitirá dirigir y diferenciar los elementos de nuestro ejemplo. Son los siguientes:

1.      El descendiente de selección [CSS 2.1]: EF

2.      El selector adyacente [CSS 2.1]: E + F

3.      3.      El selector hijo [CSS 2.1]: E> F

Vamos a echar un vistazo a cómo estos selectores nos permiten apuntar a cada una de las secciones de nuestro documento sin necesidad de class  o id.

 

Dirigirse al elemento <section>  más externo

Debido a lo incompleto de nuestro ejemplo, vamos a suponer que los elementos  <section> ultraperiféricos  se encuentran junto a un elemento <nav>  que a su vez es un descendiente directo de un elemento <body>. En este caso, pueden dirigirse a las regiones <section> ultraperiféricas de la siguiente manera: body nav+section {}

 

Dirigirse al próximo elemento <sectioin>

Como el único descendiente directo del exterior <section>, los próximos elementos <section>  pueden ser específicamente con el siguiente selector: section>section {}

Dirigirse al elemento <article> 

Hay varias maneras de dirigirse al elemento <article> en concreto, pero lo más fácil es usar un selector de descendiente simple: section section article {}

 

Dirigirse a los elementos <header>, < section> y <footer>

En nuestro ejemplo, cada uno de estos tres elementos existen en dos ubicaciones: una vez dentro del elemento <article>  y una vez dentro del elemento<aside>. Esta distinción hace que sea muy fácil dirigirse a cada elemento individual:

article header {}
article section {}
article footer {}

…O colectivamente:

section section header {}
section section section {}
section section footer {}

 DEMOSTRACIÓN

En Visual Studio Daremos Click en Menú à File à New à Project

Y en la Ventana Emergente colocaremos como Nombre del Proyecto “Demo 2 20480”

Le damos click a OK y Nos aparecerá la siguiente ventana donde Seleccionamos Emty y tildamos la opción de WebForm: