- Nuevas etiquetas semánticas que incorpora HTML5 y que definen la estructura de una página web.
- Cómo transformar una página web de las versiones antiguas de HTML a la nueva versión HTML5.
<span>
Es muy común encontrarse situaciones como ésta
<h1><span class="heading">El título de la página</span></h1> o incluso se usa la etiqueta <span> para envolver todo el contenido de una página web, tras la etiqueta <body>
Se puede resolver omitiendo esta etiqueta y dejándolo así,
<h1 class="heading">El título de la página</h1> o <body class=""bodytext">...</body>
<div>
Es un error frecuente anidar <div> dentro de otras etiquetas <div>
HTML5 ha añadido nuevas etiquetas que evitan el abuso de uso de estas dos etiquetas anteriores y así estructurar correctamente una página web, como por ejemplo,
- <header>_Para la cabecera en lugar de <div id="header">
- <nav>_Para la barrra o menú de navegación en lugar de <div id="nav">
- <main>_Para la zona de contenido principal en lugar de <div id="main">
- <article>_Para las entradas o artículos en lugar de <div class="entry">
- <section>
- <aside>_Panel con información adicional. en lugar de <div id="news">
- <figure>_Para las imágenes en lugar de <div class="figure">
- <footer>_Para el pie de página en lugar de <div id="footer">
Código de la cabecera_<header>
En versiones anteriores se usaba
<div id="header">
<h1>Mi blog</h1>
</div>
En muchos casos solo es necesario <h1>Mi blog</h1> pero si necesitamos marcar específicament un encabezado, usamos,
<header>
<h1>Mi blog</h1>
</header>
Barra o menú de navegación del sitio web_<nav>
Es un conjunto de enlaces por lo tanto se debe etiquetar como una lista ordenada o no ordenada.
<nav>
<ul>
<li><a href="#">Principal</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
Panel con información adicional_<aside>
Contiene información que complementa la información principal y que no es esencial (avisos o anuncios por ejemplo>
<aside>
<p>El nuevo curso se inicia el próximo lunes</p><!-- Resto de las noticias -->
</aside>
Zona de contenido principal_<main>
Agrupa a todas las entradas.
<main>
<article>
<p class="post-date">Diciembre 26 de 2011</p>
<h2>
<a href="#" rel="bookmark" title="Enlace a esta entrada">HTML5 es lo mejor </a>
</h2>
<!-- Resto de la entrada-->
</article>
<!--Otras entradas-->
</main>
Imágenes_<figure> y <figcaption>
Permite definir el contenido de una figura.
<figure>
<img src="foto.jpg" alt="Mi foto" />
<figcaption>Yo en la fiesta</figcaption>
</figure>
La etiqueta <figure> no sólo se emplea para etiquetar una imagen. También puede etiquetar otras cosas, como un fragmento de código, o una cita.
Pie de página_<footer>
Suele aparecer el correo de contacto, aviso legal, la información de copyright o similar.
<footer>
<p><a href="#">Contacto</a></p>
<p><a href="#">Aviso legal</a></p>
<p><a href="#">Copyright</a></p>
</footer>
No hay comentarios:
Publicar un comentario