¿El código de la parte inferior se parece al tuyo?
<body>
<div class="header" id="header">
<div class="nav">
<ul>
<li><a href="/home">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</div>
</div>
<div class="content">
<div class="intro">Texto de ejemplo</div>
</div>
<div class="container">Lorem ipsum...</div>
</body>
Tenemos que aceptar que todos en algún momento hemos usado el elemento <div> para maquetar de forma más rápida. Y en realidad, pueda que su utilización sea "la fruta más accesible del árbol, pero lo más probable es que se encuentre podrida" y más si abusamos de su uso.
Los problemas de usar div
Si bien es cierto, se puede hacer uso de esta etiqueta. Sin embargo, su excesivo uso puede desencadenar ciertos problemas a ti o a cualquier persona que trabaje en el mismo proyecto. Algunos de estos problemas son:
Problemas de legibilidad
Todos hemos trabajado en un proyecto lleno de elementos div y podemos estar de acuerdo, que suele ser un dolor de cabeza e buscar donde inicia o finaliza una etiqueta. El tener todo el código lleno de div hace que el escaneado al momento de maquetar o editar se complique un poco.
Problemas de accesibilidad
Según la OMS existe al rededor de 1300 millones de personas que viven con alguna forma de deficiencia visual. Por lo cual, no basta con solo considerar aspectos visuales, como el contraste o tamaño de fuente, también debemos utilizar elementos semánticos que le brinden contexto a los lectores de pantalla y les permita leerlos en voz alta.
Problemas de SEO
Si deseas que tu página o aplicación web se encuentre bien posicionada, debes utilizar elementos semánticos. Esto hará que los motores de búsqueda consideren palabras claves en tu contenido. y ¿Cómo hago eso?
¿Qué es HTML semántico?
La definición más simple la tiene la W3schools:
Un elemento semántico describe claramente su significado tanto para el navegador como para el desarrollador.
En otras palabras se puede asemejar a cuando señalas algo con el dedo y dices: "Mira, un objeto volador" o "Mira un avión". Claramente, uno de los casos es más descriptivo que el otro. Es importante resaltar, que el uso de elementos semánticos es parte del estándar HTML5:
Se recomienda encarecidamente a los autores que vean el elemento div como un elemento de último recurso, para cuando ningún otro elemento sea adecuado. El uso de elementos más apropiados en lugar del elemento
divconduce a una mejor accesibilidad para los lectores y un mantenimiento más fácil para los autores.
Si bien es cierto, el utilizar elementos semánticos puede demandar un poco más de tiempo al momento de maquetar sitios web. Sin embargo, el resultado final es sumamente beneficioso, así que no perdemos nada en invertir tiempo en hacerlo.
Bueno, ahora te pregunto. Para ti, como desarrollador ¿Cuál te parece el fragmento de código correcto?
<div class="paragraph">The Cure will be celebrating their 40th anniversary on <div>July 7</div> in London's Hyde Park.</div>
o
<p>The Cure will be celebrating their 40th anniversary on <time datetime="2018-07-07">July 7</time> in London's Hyde Park.</p>
Alternativas a div en HTML5
Como se mencionó más arriba, el estándar HTML5 provee varios elementos semánticos. A continuación, analizaremos los más conocidos y relevantes.
1. El elemento <nav>
2. El elemento <main>
3. El elemento <section>
4. El elemento <header>
5. El elemento <footer>
6. El elemento <aside>
7. El elemento <code>
8. El elemento <article>
9. El elemento <blockquote>
10. El elemento <mark>
Para culminar
Estos son solo diez alternativas a div. Hay bastantes otros elementos semánticos que podemos usar en nuestro HTML. Y está de más decir que no es necesario que te sepas todos de memoria, para ello puedes consultar esta referencia: Referencia de elementos HTML.
Top comments (0)