Comentario: Debido a la falta de estructura, incluso las buenas páginas HTML son difíciles de tratar. El nivel del título debe analizarse para ver cómo se divide cada parte. La barra lateral, el pie de página, el encabezado, la barra de navegación, el área de contenido principal y los artículos están representados por elementos DIV comunes. HTML 5 ha agregado nuevos elementos para identificar estas estructuras comunes: · Sectio
Debido a la falta de estructura, incluso las buenas páginas HTML son difíciles de tratar. El nivel del título debe analizarse para ver cómo se divide cada parte. La barra lateral, el pie de página, el encabezado, la barra de navegación, el área de contenido principal y los artículos están representados por elementos DIV comunes. HTML 5 agrega nuevos elementos para identificar estas estructuras comunes:
· Sección: Este puede ser un capítulo o sección en el libro, y en realidad puede ser cualquier cosa con su propio título en HTML 4
· Encabezado: el encabezado que se muestra en la página; es diferente del elemento de la cabeza
pie de página: pie de página; puede mostrar firmas en correos electrónicos
NAV: un conjunto de enlaces a otras páginas
Artículo: Un artículo en blog, revista, compilación de artículos, etc.
Consideremos una página de inicio típica del blog, que tiene un encabezado en la parte superior y un pie de página en la parte inferior, así como varios artículos, un área de navegación y una barra lateral, consulte el Código 1 Página de blog típica
<html>
<Evista>
<title> Mokka Mit Schlag </title>
</ablo>
<Body>
<div id = página>
<Div ID = Header>
<h1> <a href => mokka mit schlag </a> </h1>
</div>
<div ID = contenedor>
<div id = Center class = column>
<Div class = Post ID = Post-1000572>
<h2> <a href =
/Blog/Biring/2007/04/23/Spring-Comes-and-Goes-in-Sussex-County/>
La primavera viene (y va) en el condado de Sussex </a> </h2>
<Div class = Entry>
<p> ayer me uní al Brooklyn Bird Club para nuestro
Viaje anual al oeste de Nueva Jersey, específicamente hiper
Humus, un punto caliente relativamente recientemente descubierto. Él
Comenzó como una agradable mañana de invierno cuando llegamos
en el sitio a las 7:30 a.m., avanzó para brotar
10:00 am, y llegó a principios del verano a las 10:15. </p>
</div>
</div>
<div class = post id = post-1000571>
<h2> <a href =
/Blog/Biring/2007/04/23/but-does-it-cont-for-ty-life-list/>
¿Pero cuenta para su lista de vida? </a> </h2>
<Div class = Entry>
<p> parece que ahora puedes ir <a
href =
2007/04/cone_sf> observación de aves a través de Internet </a>. I
Aún no he podido probarlo (20 usuarios
Límite aparentemente) pero esto es ciertamente genial.
Personalmente, no puedo imaginar que se reemplace
En realidad estar en el campo por cualquier pequeña cantidad.
Por otro lado, siempre lo he encontrado bastante
triste conocer observadores de aves mayores que ya no pueden
Sostenga los binoculares estables o lleguen al parque. Puedo
Imagina que esto podría ser de algún interés para ellos. En
al menos un pájaro anciano hizo un gran año en la televisión, después de
Ya no podía salir tanto. Esto ciertamente
Cubra eso. </p>
</div>
</div>
</div>
<Div class = Navigation>
<Div class = Alignleft>
<a href =/blog/página/2/> «_fcksavedurl =/blog/page/2/>« Entradas anteriores </a>
</div>
<div class = alignright> </div>
</div>
</div>
<div id = right class = column>
<ul id = barra lateral>
<li> <h2> info </h2>
<ul>
<li> <a href =/blog/comment-policy/> política de comentarios </a> </li>
<li> <a href =/blog/todo-list/> todo list </a> </li>
</ul> </li>
<li> <h2> Archivos </h2>
<ul>
<li> <a href = '/blog/2007/04/'> abril de 2007 </a> </li>
<li> <a href = '/blog/2007/03/'> marzo de 2007 </a> </li>
<li> <a href = '/blog/2007/02/'> febrero de 2007 </a> </li>
<li> <a href = '/blog/2007/01/'> enero de 2007 </a> </li>
</ul>
</li>
</ul>
</div>
<Div ID = Pooter>
<p> Copyright 2007 Elliotte Rusty Harold </p>
</div>
</div>
</body>
</html>
Incluso con la sangría correcta, estos Divs anidados todavía se sienten muy confusos. En HTML 5, estos elementos se pueden reemplazar con elementos semánticos, consulte el Código 2 Páginas de blog típicas escritas en HTML5
<html>
<Evista>
<title> Mokka Mit Schlag </title>
</ablo>
<Body>
<Header>
<h1> <a href => mokka mit schlag </a> </h1>
</Header>
<Sección>
<Artículo>
<h2> <a href =
/Blog/Biring/2007/04/23/Spring-Comes-and-Goes-in-Sussex-County/>
La primavera viene (y va) en el condado de Sussex </a> </h2>
<p> ayer me uní al Brooklyn Bird Club para nuestro
Viaje anual al oeste de Nueva Jersey, específicamente hiper
Humus, un punto caliente relativamente recientemente descubierto. Él
Comenzó como una agradable mañana de invierno cuando llegamos a
El sitio a las 7:30 a.m., progresó a la primavera alrededor de las 10:00
AM, y llegó a principios del verano a las 10:15. </p>
</artículo>
<Artículo>
<h2> <a href =
/Blog/Biring/2007/04/23/but-does-it-cont-for-ty-life-list/>
¿Pero cuenta para su lista de vida? </a> </h2>
<p> parece que ahora puedes ir <a
href =
2007/04/cone_sf> observación de aves a través de Internet </a>. I
Aún no he podido probarlo (20 usuarios
Límite aparentemente) pero esto es ciertamente genial.
Personalmente, no puedo imaginar que se reemplace
En realidad estar en el campo por cualquier pequeña cantidad.
Por otro lado, siempre lo he encontrado bastante
triste conocer observadores de aves mayores que ya no pueden
Sostenga los binoculares estables o lleguen al parque. Puedo
Imagina que esto podría ser de algún interés para ellos. En
al menos un pájaro anciano hizo un gran año en la televisión, después de
Ya no podía salir tanto. Esto ciertamente
Cubra eso. </p>
</artículo>
<Arr>
<a href =/blog/página/2/> «_fcksavedurl =/blog/page/2/>« Entradas anteriores </a>
</am>
</section>
<Arr>
<ul>
<li> <h2> info </h2>
<ul>
<li> <a href =/blog/comment-policy/> política de comentarios </a> </li>
<li> <a href =/blog/todo-list/> todo list </a> </li>
</ul> </li>
<li> <h2> Archivos </h2>
<ul>
<li> <a href = '/blog/2007/04/'> abril de 2007 </a> </li>
<li> <a href = '/blog/2007/03/'> marzo de 2007 </a> </li>
<li> <a href = '/blog/2007/02/'> febrero de 2007 </a> </li>
<li> <a href = '/blog/2007/01/'> enero de 2007 </a> </li>
</ul>
</li>
</ul>
</am>
<ToToTer>
<p> Copyright 2007 Elliotte Rusty Harold </p>
</foTer>
</body>
</html>
Ahora no se necesita Div. Ya no necesita establecer el atributo de clase usted mismo, y puede inferir el significado de cada parte del nombre del elemento estándar. Esto es especialmente importante para los navegadores de audio, los navegadores móviles y otros navegadores no estándar.
(continuará)