Latest web development tutorials

elementos semánticos HTML5

Semántica = significado.

elementos semánticos = elemento de detección.

Lo que es elementos semánticos?

A los elementos semánticos pueden describir claramente su importancia para el navegador y desarrolladores.

Ejemplos de elementos no-semánticos: <div> y <span> - independientemente de su contenido.

Ejemplos de elementos semánticos: <form>, <table> y <img> - define claramente su contenido.

Soporte para el navegador

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9 o superior, Firefox, Chrome, Safari y Opera soporta elementos semánticos.

Nota: Internet Explorer 8 y versiones anteriores no son compatibles con este elemento, pero la parte inferior del artículo ofrece una solución compatible.

HTML5 nuevos elementos semánticos

Muchos sitios web existentes incluyen el código HTML siguiente: <div id = "nav">, <div class = "header"> o <div id = "pie">, para indicar enlaces de navegación, la cabeza y la cola.

HTML5 ofrece una nueva elementos semánticos para definir una parte diferente de la página Web:

  • <Header>
  • <Nav>
  • <Sección>
  • <Artículo>
  • <Aparte>
  • <Figcaption>
  • <Figura>
  • <Pie de página>

elemento <section> HTML5

<Sección> define la sección del documento (sección, la sección). Tales como capítulos, encabezados, pies u otras partes del documento.

De acuerdo con el documento del W3C HTML 5: sección contiene un conjunto de contenidos y su título.

Ejemplos

<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section>

Trate »

elemento <article> HTML5

<Artículo> define el contenido independiente. .

<Article> elemento Ejemplo:

  • mensaje del foro
  • Blog post
  • noticia
  • comentario

Ejemplos

<article>
<h1>Internet Explorer 9</h1>
<p>Windows Internet Explorer 9(缩写为 IE9 )在2011年3月14日21:00 发布。</p>
</article>

Trate »

HTML5 elemento <nav>

<Nav> para definir la sección de enlaces de navegación.

<Nav> se utiliza para definir la navegación página enlaza algunas zonas, pero no todos los enlaces deben ser incluidos en el elemento <nav>!

Ejemplos

<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>

Trate »

elemento <aside> HTML5

<Aparte> define el contenido de la página más allá del área principal de contenido (como la barra lateral).

Contenido a un lado la etiqueta debe estar asociada con el área de contenido principal.

Ejemplos

<p>My family and I visited The Epcot center this summer.</p>

<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>

Trate »

elemento <header> HTML5

<Header> describe el área de la cabeza del documento

<Header> elemento nota se describe el área de visualización se utiliza para definir el contenido.

En la página se puede utilizar el elemento <header> múltiple.

El ejemplo siguiente define la cabecera del artículo:

Ejemplos

<article>
<header>
<h1>Internet Explorer 9</h1>
<p><time pubdate datetime="2011-03-15"></time></p>
</header>
<p>Windows Internet Explorer 9(缩写为 IE9 )是在2011年3月14日21:00发布的</p>
</article>

Trate »

HTML5 elemento <pie de página>

<Pie de página> describe la zona inferior del documento.

<Pie de página> elemento debe contener los elementos que contiene

Un pie de página contiene normalmente el autor del documento, la información de derechos de autor, los vínculos condiciones de uso, información de contacto, etc.

Documento puede utilizar con múltiples elementos <pie de página>.

Ejemplos

<footer>
<p>Posted by: Hege Refsnes</p>
<p><time pubdate datetime="2012-03-01"></time></p>
</footer>

Trate »

HTML5 <figure> y <figcaption> elemento

<Figura> etiqueta especificada contenido de corriente separada (imágenes, gráficos, fotografías, código, etc.).

Contenido <figure> elemento debe estar asociado con el contenido principal, pero si se elimina, no responden al impacto de flujo de documentos.

<Figcaption> define el elemento <figure> título.

<Figcaption> elemento debe ser colocado en el elemento "figura" de la primera o la última posición de elemento hijo.

Ejemplos

<figure>
<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
</figure>

Trate »

Podemos empezar a utilizar estos elementos semánticos hacen?

Los elementos anteriores son elementos de bloque (excepto <figcaption>).

Para estos bloques y elementos que tengan efecto en todas las versiones del navegador, es necesario establecer en los atributos de archivo de hoja de estilo (en lo sucesivo, código de estilo permite a los navegadores antiguos soportan elementos de bloque en este capítulo):

header, section, footer, aside, nav, article, figure
{
display: block;
}

Internet Explorer 8 y versiones anteriores de los problemas de IE

IE8 y versiones anteriores de IE no se pueden representar en estos elementos, efectos CSS, por lo que no pueden utilizar <header>, <section>, <pie de página>, <aside>, <nav>, <artículo>, <figure>, u otro los elementos de HTML5.

Solución: Puede utilizar la secuencia de comandos HTML 5 Shiv Javascript para resolver los problemas de compatibilidad de IE. HTML5 Shiv Descargar: http://code.google.com/p/html5shiv/

Una vez descargado, el código siguiente en la página:

<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->

El código de seguridad cuando la versión del navegador IE9 menos de cargar html5shiv.js archivo, debe colocarlo en el elemento <head>, ya que se requiere el navegador Internet Explorer después de cargar la cabeza la prestación de estos nuevos elementos HTML5