En el último artículo, vimos una serie de nuevos elementos introducidos en HTML5 y cómo implementarlos correctamente. En este artículo, nuevamente discutiremos un conjunto de elementos nuevos, pero esta vez examinaremos solo aquellos elementos HTML5 que representan un cambio semántico significativo en la forma en que estructuran sus sitios. Este artículo cubrirá cómo usar cada uno de estos nuevos elementos de una manera que traerá el alivio necesario a los divinos que plagan la estructura de tantos sitios hoy en día.
¿Semántica?
Antes de comenzar, debe saber que, por semántica, simplemente me refiero a usar etiquetas y elementos HTML de la forma en que estaban destinados a usarse. A diferencia de los lenguajes de programación, que tienen que compilarse para ejecutarse, HTML no requiere compilador (el navegador intenta toda la interpretación) y, por lo tanto, le brinda una gran libertad para usar un elemento determinado de la forma que desee. Sin embargo, si eres un nuevo diseñador web, probablemente estés descubriendo que muchas personas son fanáticos de la semántica, y tal vez con razón. Usando tablas donde no pertenezcan o tirando por ahí.
El problema
Eche un vistazo a 100 sitios web diferentes con diseños casi idénticos y encontrará 100 estructuras y convenciones de nomenclatura diferentes en el HTML subyacente. A pesar de que cualquier buen desarrollador web nombrará a su / ella
De tal manera que se entiendan fácilmente, las vastas posibilidades pueden generar confusión sobre la identificación de secciones de código relativamente simples y uniformes. Por esta razón, HTML5 nos brinda una serie de elementos que se pueden usar para identificar y seleccionar elementos que aparecen en casi todos los sitios de la web, como encabezados, pies de página y menús de navegación. Además, aparte de las convenciones de nomenclatura inconsistentes, la forma actual de hacer las cosas puede conducir rápidamente a estructuras div que vienen con mucho peso adicional en comparación con elementos HTML simples e integrados. Para ilustrar, veamos una estructura simple que puede encontrar en HTML4.
Puede ver cómo esta pieza de código relativamente simple es invadida por divs, que puede tardar mucho tiempo en clasificarse debido a toda la pelusa necesaria. El CSS para trabajar con este HTML contendría los siguientes selectores:
Aunque no es tan complicado como el HTML anterior, este código no es tan simple como podría ser. Ahora vamos a profundizar en cómo HTML5 nos ayuda a resolver este problema.
La solución
HTML5 nos permite tomar casi todos los divs personalizados anteriores y convertirlos en elementos estándar. Veamos el código necesario para lograr lo mismo en HTML5.
Y el correspondiente CSS:
Hay mucho que discutir sobre estos ejemplos, así que comencemos con el HTML. Tenga en cuenta que los divisores crónicos han desaparecido y en su lugar se comprenden universalmente y son fáciles de interpretar. Esto mejora enormemente la legibilidad del código. Una de mis manitas de la mascota cuando lee el código de otra persona es rastrear correctamente
El CSS también se ha simplificado. Ahora solo podemos usar identificadores sin etiquetas hash o puntos en la mayoría de los casos porque nos referimos a elementos con soporte nativo en lugar de divs con nombres únicos. Tenga en cuenta que en nuestro HTML esta vez pudimos usar la misma etiqueta para todos los elementos de encabezado y pie de página (lanzamos la clasificación "principal"). Esto se debe a que si queremos aplicar un estilo a los encabezados dentro del contenedor de manera diferente a los otros, simplemente podemos usar? #Contenedor del encabezado? para apuntar solo a los elementos del encabezado dentro del contenedor div (y podemos estar seguros de que heredará correctamente los rasgos que queremos mantener). Ahora que hemos vislumbrado los nuevos elementos estructurales, veamos cómo usar cada uno individualmente.
los
Elemento
Inicialmente, puede suponer que el elemento de encabezado se refiere al encabezado principal de la página. Sin embargo, en realidad es solo un elemento genérico que puede usarse varias veces a lo largo de su código. Aquí hay un ejemplo:
Una vez más, hemos reemplazado lo que normalmente hubiera sido un grupo de divs con etiquetas de encabezado más simples. Es importante tener en cuenta que, dado que podemos tener varias etiquetas de encabezado en un solo archivo HTML, no debe pensar en el elemento de encabezado como un reemplazo para
los
Elemento
La mayoría de las cosas que acabo de explicar sobre el elemento de encabezado también se aplican al elemento de pie de página, lo que significa que es genérico y se puede colocar varias veces a lo largo de su código. Obviamente, los pies de página generalmente (aunque no siempre) van al final de una sección del código y contienen información de naturaleza secundaria, como la fecha de publicación, el autor, la información de derechos de autor, etc. tú. Aquí hay un ejemplo rápido que se basa en lo que vimos con el elemento de encabezado:
los
Elemento
El elemento de sección es una forma genérica de separar partes de su sitio. Por ejemplo, digamos que un sitio web de eventos se divide en "qué", "cuándo" y "dónde". Usted podría usar
etiquetas para hacer esta división en su código (una vez más, piense 'clase' no 'id'). Usando nuestro ejemplo anterior, podríamos reemplazar la? Tutslist? Clase con elementos de sección.
Tenga en cuenta que las secciones frecuentemente comienzan con un elemento de encabezado y terminan con un elemento de pie de página, aunque esto no es de ninguna manera una necesidad.
los
Elemento
Mencioné brevemente el elemento del artículo en mi último post, olvidando completamente que lo estaba guardando para este post. Sin embargo, un comentarista señaló hábilmente alguna mala información que debemos aclarar. A pesar de que w3schools declara que el elemento del artículo es estrictamente para contenido externo, w3.org establece claramente que su propósito real es identificar una sección de su sitio que se pretende que sea distribuible de forma independiente. Por ejemplo, una publicación de blog como esta podría valerse por sí misma y no depende del resto del contenido del sitio. Además, esta publicación es algo que realmente queremos que otros sitios discutan y vinculen. Las noticias, los mensajes de foro y los tutoriales son buenos ejemplos de este tipo de contenido. Apliquemos esto a nuestro ejemplo de ejecución.
Como puede ver, este es un contenido realmente interno al que se puede hacer referencia externamente, y no al revés, como parece sugerir w3schools.
los
Elemento
El elemento de navegación hace referencia a las secciones de su HTML que contienen enlaces para fines de navegación, como en una barra lateral o tira de botones en la parte superior de una página. Sin embargo, esto no se aplica a todos los grupos de enlaces de navegación en sus páginas. En su lugar, reserve este elemento para las principales fuentes de navegación en su sitio. w3.org da el ejemplo de una serie de enlaces en un pie de página como una situación que no merecería un elemento de navegación. Nuevamente revisaremos nuestro ejemplo para incluir el nuevo elemento.
los
Elemento
El último elemento del que hablaremos es aparte. Este elemento está reservado para el contenido relacionado, pero claramente separado del resto del contenido de la página. El elemento aparte se puede usar para obtener citas, anuncios, elementos de navegación, barras laterales, etc. Por ejemplo, supongamos que queremos tomar nuestra navegación del último ejemplo y colocarlo en una barra lateral:
Mira ma, no divs!
¡El ejemplo anterior ilustra la cantidad excepcionalmente grande de código que HTML5 nos permite ejecutar usando solo elementos estándar! Cada pieza de este ejemplo es súper fácil de identificar en CSS, es comprensible al instante por cualquier desarrollador (al menos cualquier desarrollador que esté versado en HTML5), e increíblemente concisa en comparación con la cantidad de código que esto requeriría en HTML4. Y no hay un div a la vista.
Conclusión
Este artículo describió brevemente el concepto y la importancia del código semántico y discutió los principales cambios semánticos producidos por HTML5. Descubrimos cómo utilizar correctamente seis nuevos elementos HTML5 increíblemente útiles: encabezado, pie de página, sección, artículo, navegación y aparte. Finalmente, aprendimos cómo estos nuevos elementos se pueden usar para crear código perfectamente estructurado y de fácil lectura que evite el uso excesivo de divs.
Para evitar confusiones (y para evitar una ráfaga de comentarios enojados), debo dejar claro que no hay absolutamente nada de malo con los divs.Personalmente uso divs de forma bastante liberal en todos los sitios que creo y creo que están entre los elementos más flexibles y esenciales de HTML. Sin embargo, cuanto más pueda reemplazar los divs con nombres únicos por elementos con nombres universales, más confiable y preciso será su código.
Mirando hacia el futuro: ¡Tres abajo, uno para ir!
El próximo artículo será el final de nuestra serie sobre HTML5. Como probablemente sepa a estas alturas, nada de lo que le he mostrado está listo para integrarse en los sitios web para una amplia visualización del público. Sin embargo, nuestro próximo artículo le mostrará varios trucos para comenzar a usar HTML5 de inmediato y analizará cómo debe preparar sus sitios para la inevitable actualización.