Profundi Zau 2

Estructura de un
documento
HTML5
Nuevos elementos en HTML5
Hoy día, algunos elementos de HTML 4.01 han quedado obsoletos.

Estos elementos se han eliminado o re-escrito en HTML5.
Para optimizar el uso actual de Internet, HTML5 incluye nuevos elementos

para mejorar:
 la estructura
 los formularios
 los dibujos
 el contenido de los medios de comunicación
Nuevos elementos semánticos / Estructural
HTML5 ofrece nuevos elementos para su
estructura
Nuevos Elementos de Medios

HTML5 ofrece nuevos elementos para
el contenido de los medios de
comunicación
El elemento nuevo <canvas>
Nuevos elementos de formulario

HTML5 ofrece nuevos elementos de formulario,
para una mayor funcionalidad:
Elementos eliminados
Los siguientes elementos HTML 4.01 se

quitan de HTML5:
<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<NOFRAMES>
<strike>
<tt>
Nuevas etiquetas de HTML5
Esta nueva versión se basó en el diseño más común de las páginas web
alrededor del mundo para llegar a un estándar de etiquetas que realicen
las mismas tareas de manera más rápida y eficiente.
Un nuevo diseño para páginas web, reflejado en las

etiquetas <header>,<footer>, <nav>,<section>,<article> las cuales están
destinadas a remplazar la necesidad de tener una <div> para cada parte
de la página, y en cambio, tener etiquetas específicas para ello.
Las principales nuevas etiquetas en HTML5, solo buscan añadir un
significado semántico superior a lo que anteriormente significaba un div o
un span.
Estás etiquetas se pueden utilizar en conjunto con las etiquetas del

estándar HTML4.
<header> y <footer>
Los elementos <header> y <footer> reemplazan a
<div id=”header”> y <div id=”footer”> y generalmente contienen la sección
de la cabecera y pié de página del diseño, pero también pueden ser
usados como cabecera y/o pié de página de una sección en especial.
Estas etiquetas pueden usarse varias veces en un mismo diseño.

<hgroup>
Este elemento es usado para agrupar varias etiquetas de cabeceras (<h1>
<h2> <h3> <h4> <h5> <h6>) cuando se van a utilizar títulos, subtítulos,
etc para evitar cortar el flujo del esquema del documento.
<nav>
Esta etiqueta esta diseñada para que coloques los menús de navegación
ya sea de la página principal o para un artículo en especial.
<section>
Esta etiqueta indica una sección genérica del sitio: La etiqueta <section>
es una agrupación temática de contenidos, generalmente con una
cabecera.
<article>
Esta etiqueta representa una sección de contenido independiente. Esta
etiqueta se utilizaría para respuestas en un foro, artículos en un blog o
comentarios de un artículo.
<aside>
Esta etiqueta se utiliza para representar contenido que no este
directamente relacionado con el contenido de la página. Por lo general
esta etiqueta es utilizada para representar las barras laterales de los
blogs.
Cuando necesites una sección con propósitos netamente de

posicionamiento, estilos, etc, es recomendable seguir usando la etiqueta
<div> en vez de usar las etiquetas mencionadas anteriormente.
Nuevas etiquetas de Código :
HTML5
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8"/>
Solo se deben definir las <title>Mi Web con HTML5</title>
primeras líneas de un <link rel="stylesheet" type="text/css"
archivo HTML para href="css/style.css">
comenzar a usar la nueva </head>
<body>
versión.
<header>
</header>
<nav>
</nav>
<article>
<section>
</section>
</article>
<aside>
</aside>
<footer>
</footer>
</body>
</html>
Ejemplo Estructura nuevas etiquetas
HTML5
<header><hgroup>
<h1>Título de la página</h1>
<h2>Subtítulo de la página</h2>
</hgroup><nav>
<ul>
<li><a href="/enlace1">Enlace 1</a></li>
</ul>
</nav></header><section><article><header>
<h1>Título del artículo</h1>
Datos del artículo: autor, fecha, etc.</header>
Contenido del artículo</article>
</section><aside>Barra
lateral</aside>
<footer>
<small>© copyright 2014Trazos
Web</small></footer>
Ejemplo Estructura nuevas etiquetas HTML5
<nav>
<ul>
<li><a href="/accesibilidad/">Accesibilidad</a></li>
<li><a href="/html/">HTML</a></li>
<li><a href="/javascript/">JavaScript</a></li>
<li><a href="/css/">CSS</a></li>
</ul>
</nav>
Esta etiqueta mejora la accesibilidad porque permite identificar de una

forma clara los elementos de navegación que tiene una página web, por lo
que las tecnologías de apoyo como los lectores de pantalla lo pueden
detectar y ofrecer al usuario cuando lo necesite.
El elemento puede funcionar como un <div>
a todos los efectos. Ya no es necesario escribir

<div id="menu"> o <div id="navigation">.

Profundi Zau 2

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Profundi Zau 2

Transféré par

Droits d'auteur :

Formats disponibles

Estructura de un

Hoy día, algunos elementos de HTML 4.01 han quedado obsoletos.

Para optimizar el uso actual de Internet, HTML5 incluye nuevos elementos

Nuevos Elementos de Medios

El elemento nuevo <canvas>

Nuevos elementos de formulario

Los siguientes elementos HTML 4.01 se

Un nuevo diseño para páginas web, reflejado en las

Estás etiquetas se pueden utilizar en conjunto con las etiquetas del

Estas etiquetas pueden usarse varias veces en un mismo diseño.

Cuando necesites una sección con propósitos netamente de

Esta etiqueta mejora la accesibilidad porque permite identificar de una

El elemento puede funcionar como un <div>

a todos los efectos. Ya no es necesario escribir

Vous aimerez peut-être aussi