HTML5 Tutoriales básicos

HTML5 API

HTML5 Medios

HTML5 Gráficos

HTML5 Almacenamiento en el cliente HTML5 Atributos del formulario

HTML5 Elemento semántico

Los elementos semánticos son aquellos que, al ver el nombre del elemento, podemos saber el significado del contenido que representa. Por ejemplo, para el artículo <article>, hay información de encabezado <header>, índice <catalog>, contenido <content> y pie de página <footer>.

¿Qué son los elementos semánticos?

Un elemento semántico puede describir claramente su significado para los navegadores y desarrolladores.

Ejemplos de elementos sin significado: <div> y <span> - Sin considerar el contenido.

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

Compatibilidad del navegador

Internet Explorer 9+, Firefox, Chrome, Safari y Opera soportan elementos semánticos.

Atención: Internet Explorer 8 Y versiones anteriores no soportan este elemento. Pero se proporciona una solución de compatibilidad en el pie de página del artículo.

HTML5Los nuevos elementos semánticos en HTML5

Muchos sitios web existentes contienen el siguiente código HTML:

<div id="nav">, <div> o <div id="footer">, Para indicar enlaces de navegación, cabecera y pie de página.

HTML5 Proporciona nuevos elementos semánticos para definir claramente diferentes partes de una página web:

<header>
<nav>
<section>
<article>
<aside>
<figcaption>
<figure>
<footer>

HTML5 El elemento <section>

La etiqueta <section> define una sección (sección, segmento) en el documento. Por ejemplo, capítulos, encabezados, pies de página u otras partes del documento.

According to W3C HTML5Document: section contains a set of content and its title.

Ejemplo

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Base Tutorial Network(oldtoolbag.com)</title>　
</head>
<body>
<section>
　　<h1>HTML5</h1>
　　<p>It is a new HTML language version that includes new elements, attributes, and behaviors, and includes a series of technologies that can be used to make Web sites and applications more diverse and powerful. This set of technologies is often referred to as HTML5　and its friends, usually abbreviated as HTML5。/p>
</section>
<section>
　　<h1>CSS3</h1>
　　<p>A major change in the evolution of CSS is W3C decided to adopt CSS3分成一系列模块。浏览器厂商按CSS节奏快速创新，因此通过采用模块方法，CSS3The elements in the specification can develop at different speeds because different browser manufacturers only support given features. But different browsers support different features at different times, which also makes cross-browser development complex./p>
</section>
</body>
</html>

Prueba para ver ‹/›

HTML5 <article> 元素

<article> 标签定义独立的内容。

<article> 元素使用示例:

Forum post
Blog post
News story
Comment

Ejemplo

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Base Tutorial Network(oldtoolbag.com)</title>　
</head>
<body>
<article>
　　<h1>CSS3　</h1>
　　<p>SS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001Año5Mes23day W3C completed CSS3的工作草案，
主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块　。/p>
</article>
</body>
</html>

Prueba para ver ‹/›

HTML5 <nav> 元素

<nav> 标签定义导航链接的部分。

<nav> 元素用于定义页面的导航链接部分区域，但是，不是所有的链接都需要包含在 <nav> 元素中!

Ejemplo

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Base Tutorial Network(oldtoolbag.com)</title>　
</head>
<body>
<nav>
　　　　<a href="/html/">HTML</a> |
　　　　<a href="/css/">CSS</a> |
　　　　<a href="/js/">JavaScript</a> |
　　　　<a href="/jquery/">jQuery</a>
</nav>
</body>
</html>

Prueba para ver ‹/›

HTML5 <aside> 元素

<aside> 标签定义页面主区域内容之外的内容（比如侧边栏）。

The content of the <aside> tag should be related to the main content.

Ejemplo

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5　Ejemplo por es.oldtoolbag.com</title>
</head>
<body>
<article>
　　<h1>Título para artículo</h1>
　　<p>Texto que aparece bajo artículo</p>
</article>
<aside>
　　<p>Text that appears under aside</p>
</aside>
</body>
</html>

Prueba para ver ‹/›

HTML5 <header> 元素

<header>元素描述了文档的头部区域

<header>元素主要用于定义内容的介绍展示区域.

在页面中你可以使用多个<header> 元素.

以下示例定义了文章的头部:

Ejemplo

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5　Ejemplo por es.oldtoolbag.com</title>
</head>
<body>
<header>
　　<img src="/static/images/logo-n.png" alt="Logo">
</header>
<article>
　　<h1>Título para artículo</h1>
　　<p>Texto que aparece bajo artículo</p>
</article>
</body>
</html>

Prueba para ver ‹/›

HTML5 <footer> Elemento

El elemento <footer> describe la área inferior del documento.

El elemento <footer> debe contener su elemento contenedor

Un pie de página generalmente contiene información del autor, derechos de autor, términos de uso de enlaces, información de contacto, etc.

En el documento puedes usar múltiples elementos <footer>.

Ejemplo

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5　Ejemplo por es.oldtoolbag.com</title>
</head>
<body>
<article>
　　<h1>Título para artículo</h1>
　　<p>Texto que aparece bajo artículo</p>
</article>
<footer>
　　<p>Copyright ©2013</p>
</footer>
</body>
</html>

Prueba para ver ‹/›

HTML5 Elementos <figure> y <figcaption>

El elemento <figure> especifica un contenido de flujo independiente (imágenes, gráficos, fotografías, código, etc.).

El contenido del elemento <figure> debe estar relacionado con el contenido principal, pero si se elimina, no debe afectar el flujo del documento.

El elemento <figcaption> define el título del elemento <figure>.

El elemento <figcaption> debe colocarse en la primera o última posición de hijo del elemento <figure>.

Ejemplo

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Base Tutorial Network(oldtoolbag.com)</title>　
</head>
<body>
<figure>
　　<img src="venglobe.gif" alt="venglobe" width="304" height="228">
　　<figcaption>venglobe venglobe venglobe.</figcaption>
</figure>
</body>
</html>

Prueba para ver ‹/›

　HTML5Ejemplo de resumen en línea de elementos semánticos

Ejemplo

<!doctype html>
<html>
<head>
　　　　<meta charset="UTF-8">
　　　　<title>Elemento semántico</title>
</head>
<body>
　　　　<!--Elemento estructural-->
　　　　<header>Encabezado</header>
　　　　<section>Representa un párrafo: Utilizado para describir capítulos de áreas</section>
　　　　<footer>Parte inferior de la área</footer>
　　　　<nav>Menú - Navegación</nav>
　　　　<article>Representa el contenido principal del artículo</article>
　　　　<!--Elemento de bloque - Utilizado para dividir áreas-->
　　　　<aside></aside>
　　　　<figure>
　　　　　　　　<figcaption></figcaption>
　　　　</figure>
　　　　<code>Representa un fragmento de código</code>
　　　　<dialog>Representa una conversación
　　　　　　　　<dt>Persona hablante</dt><dd>Contenido</dd>
　　　　</dialog>
　　　　<!--Elemento semántico-->
　　　　<mtter>Un rango de valores</mtter>
　　　　<time></time>
　　　　<progress>Barra de progreso</progress>
　　　　<video>Video</video>
　　　　<audio>Audio</audio>
　　　　<!--Elementos de interacción-->
　　　　<details>Un contenido específico a través de algún método se muestra</details>
　　　　<datagrid>Se utiliza para controlar la visualización de datos del cliente</datagrid>
　　　　<menu>Menú de interacción dinámica</menu>
　　　　<command>Nombre</command>
　　　　<!--Mostrar ejemplo de artículo-->
　　　　<article>
　　　　　　　　<header>
　　　　　　　　　　　　<h1>Las etiquetas del encabezado HTML (head)</h1>
　　　　　　　　　　　　<time>2015Año12Mes12Día</time>
　　　　　　　　</header>
　　　　　　　　<p>Las etiquetas y elementos del encabezado HTML (head) son muchos, y se relacionan con la renderización de la página web por parte del navegador, SEO, etc. Además, cada motor de navegador y cada fabricante de navegadores domésticos tienen algunas etiquetas y elementos propios, lo que causa muchas diferencias. En la era de las redes móviles, la estructura del encabezado (head) y los elementos meta en dispositivos móviles son aún más importantes. Entender el significado de cada etiqueta y escribir etiquetas de encabezado (head) que satisfagan tus necesidades es el objetivo de este artículo. Este artículo se basa en el artículo de un solo hilo y se extiende para presentar el significado y el escenario de uso de las etiquetas y elementos comunes en el encabezado (head)./p>
　　　　　　　　<footer>
　　　　　　　　　　　　<p>http://www.baidu.com</p>
　　　　　　　　</footer>
　　　　</article>
　　　　<!--Comentarios-->
　　　　<section>
　　　　<h2>Comentarios</h2>
　　　　　　　　<article>
　　　　　　　　　　　　<header>
　　　　　　　　　　　　　　　　<h3>李四</h3>
　　　　　　　　　　　　　　　　<p><time pubdata datatime="2013-09-23　10:00　-　11:00>hace una hora</time></p>
　　　　　　　　　　　　</header>
　　　　　　　　　　　　<p>Comentarios</p>
　　　　　　　　</article>
　　　　　　　　<article>
　　　　　　　　　　　　<header>
　　　　　　　　　　　　　　　　<h3>李四</h3>
　　　　　　　　　　　　　　　　<p><time pubdata datatime="2013-09-23　10:00　-　11:00>hace una hora</time></p>
　　　　　　　　　　　　</header>
　　　　　　　　　　　　<p>Comentarios</p>
　　　　　　　　</article>
　　　　</section>
</body>
</html>

Prueba para ver ‹/›

¿Podemos comenzar a usar estos elementos semánticos?

Todos estos elementos son elementos de bloque (excepto <figcaption>).

Para que estos bloques y elementos funcionen en todas las versiones del navegador, debes configurar algunas propiedades en el archivo de hojas de estilo (los siguientes códigos de estilo permiten que los navegadores de versiones anteriores soporten los elementos de nivel de bloque descritos en este capítulo):

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

Internet Explorer 8 y problemas en versiones anteriores de IE

IE8 Las versiones anteriores de IE no pueden renderizar efectos CSS en estos elementos, por lo que no puedes usar <header>, <section>, <footer>, <aside>, <nav>, <article>, <figure>, o otros HTML5 elements.

Solución: Puedes usar HTML5 Shiv JavaScript script para resolver problemas de compatibilidad en IE.

HTML5 Dirección de descarga de Shiv:http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js

Después de descargar, coloca el siguiente código en la página web:

El código anterior se ejecuta en navegadores menores que IE9Carga html en la versión.5archivo shiv.js. Debes colocarlo dentro del elemento <head> porque el navegador IE necesita cargarlo en la cabecera para renderizar estos HTML5de los nuevos elementos

HTML5 Almacenamiento en el cliente HTML5 Atributos del formulario