¿Quieres conocer las claves para diseñar una página web atractiva y funcional con HTML5? ¡Este es el artículo que estás buscando! Descubre todo lo que necesitas saber sobre el marcado semántico y las mejores prácticas para el diseño de páginas web en el lenguaje de programación más utilizado en la actualidad. Desde la estructura de los elementos HTML hasta la inclusión de meta etiquetas y etiquetas semánticas, en este artículo encontrarás todo lo necesario para crear una página web de calidad que se adapte a las necesidades de tus usuarios y mejore la indexación en buscadores. ¡No te lo pierdas!
HTML5 introduce un conjunto completamente nuevo de elementos semánticos. El marcado semántico es HTML que introduce significado en lugar de presentación. Cuando se utilizan elementos semánticos en una página, el navegador puede interpretar su propósito dentro de la estructura de la página.
Por ejemplo, cuando HTML5 <footer> elemento se utiliza en una página, el navegador (así como las arañas web) será Mas claro sobre el propósito del contenido del elemento. Esto permite que los navegadores y otros agentes de usuario manejen el contenido en un manera especifica.
Compare eso con un ejemplo común que puede usar al desarrollar una página web basado en HTML4.01. En el ejemplo del pie de página, usaría un <div> elemento y estilice el elemento de una manera que se asemeje a un pie de página típico. Sin embargo, usando el <div> elemento no transmite ningún significado claro sobre su contenido.
El imagen de arriba muestra una página web típica que puede aprovechar 6 nuevos elementos HTML5. El header y footer los elementos se explican por sí mismos. El nav El elemento se puede utilizar para crear una barra de navegación.
El section y article los elementos se pueden utilizar para agrupar su contenido. Finalmente, el aside El elemento se puede usar para una barra lateral de enlaces relacionados. Echemos un vistazo más de cerca al marcado real.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Page Title</title>
<link href="https://www.itgeared.com/html5-semantic-markup-page-layout/style.css" rel="stylesheet" />
</head>
<body>
<header>
<hgroup>
<h1>Main Header</h1>
<h2>Subheader</h2>
</hgroup>
</header>
<nav>
<ul>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
</ul>
</nav>
<section>
<article>
<header>
<h1>Article #1</h1>
</header>
<section>
This is the first article.
</section>
</article>
<article>
<header>
<h1>Article #2</h1>
</header>
<section>
This is the second article.
</section>
</article>
</section>
<aside>
<section>
<h1>Links</h1>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</section>
<figure>
<img src="#" alt="Image1" width="#" height="#" />
<figcaption>My Image</figcaption>
</figure>
</aside>
<footer>Footer Information</footer>
</body>
</html>Compatibilidad con nuevos elementos HTML5
En el momento de escribir este artículo, los navegadores no tiene apoyo completo para elementos específicos de HTML5, por lo que simplemente los tratan como etiquetas definidas por el usuario cuando se encuentran en una página. Todos los principales navegadores, excepto Internet Explorerrepresentará el elemento no reconocido como un elemento en línea y dará a los desarrolladores web la libertad de diseñarlos.
Entonces, aparte de IE, los desarrolladores web podrían incluir de forma segura estos nuevos elementos en sus proyectos web. Por lo tanto, sólo debemos preocuparnos por manejo de estos elementos para navegadores IE. Como IE no sabe cómo aplicarles estilos, podemos usa algo de javascript para asegurarnos de que podemos mitigar este problema.
Hay una técnica bien documentada en línea que resuelve este problema. La técnica simple solo requiere que cree un elemento DOM con el mismo nombre que la etiqueta. Una vez que se establezca, IE respetará el estilo. Antes de la versión IE9había poco o ningún soporte para elementos HTML5.
Dado que IE todavía tiene un porcentaje de uso muy alto, es importante para asegurar que su página web funciona correctamente cuando accede a IE. Aquí es donde JavaScript resulta útil.
HTML5Shiv
HTML5Shiv es una solución de JavaScript que es usado para habilitar el estilo de elementos HTML5 en versiones de IE anteriores a la versión 9. Para habilitar la solución HTML5Shiv, coloque la siguiente sección de código en el head elemento.
Este cargará el HTML5Shiv desde el servidor web con la condición de que el navegador que se utilice sea una versión de IE anterior a la versión 9.
<!--[if lt IE 9]>
<script src="https://www.itgeared.com/html5-semantic-markup-page-layout/html5shiv.js"></script>
<![endif]-->Internet Explorer anterior a la versión 9 procesará la declaración. Otros navegadores que no son IE tratará el guion condicional como comentario. Puede descargar el archivo JavaSript o señalarlo directamente en el sitio de Google.
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->