Comprensió de l'element SECCIÓ HTML5
Quan HTML5 es registra a l'escena fa uns quants anys, ha afegit un grup de nous elements de secció a la base, incloent l'element SECTION. La majoria dels nous elements que introdueixen HTML5 tenen usos clars. Per exemple, l'element s'utilitza per definir articles i parts principals d'una pàgina web, l'element s'utilitza per definir contingut relacionat que no és crític amb la resta de la pàgina, i l'encapçalament, el navegador i el peu de pàgina són bastant explicatius. Tanmateix, l'element SECTION recentment afegit és una mica menys clar.
Molta gent creu que els elements HTML SECTION són realment els mateixos elements contenidors genèrics que contenen contingut en una pàgina web. La realitat, però, és que aquests dos elements, mentre que els dos són elements contenidors, no són genèrics. Hi ha raons específiques per utilitzar tant l'element SECTION com l'element DIV, i aquest article explicarà aquestes diferències.
Seccions i divs
L'element SECTION es defineix com una secció semàntica d'una pàgina web o un lloc que no és un altre tipus més específic (com article o apartat). Jo tendeixo a utilitzar aquest element quan estic marcant una secció diferent de la pàgina: una secció que es pot moure i utilitzar a l'engròs en altres pàgines o parts del lloc. És un contingut diferent, o una "secció" del contingut, si ho voleu.
En canvi, utilitzeu l'element DIV per a parts de la pàgina que vulgueu dividir, però amb finalitats diferents de la semàntica . Em comprometria a embolicar una àrea de contingut en una divisió si ho faig purament per donar-me un "ganxo" per utilitzar amb CSS. Pot ser que no es tracti d'una secció diferent de contingut basada en la semàntica, però és una cosa que estic dictant per aconseguir el disseny que vull per a la meva pàgina.
It's All About Semantics
Aquest és un concepte difícil d'entendre, però l'única diferència entre l'element DIV i l'element SECTION és la semàntica. En altres paraules, és el significat de la secció del codi que està dividint.
Qualsevol contingut que es troba dins d'un element DIV no té cap significat inherent. És millor utilitzat per a coses com:
- Estils CSS i ganxos per a estils CSS
- Contenidors de format
- Anells de JavaScript
- Divisions per a l'HTML per facilitar la lectura
L'element DIV solia ser l'únic element que teníem per afegir ganxos a l'estil dels nostres documents i crear columnes i dissenys elegants. A causa d'això, vam acabar amb un codi HTML que estava ple de elements DIV: el que els dissenyadors web anomenen "divisions". Hi va haver fins i tot editors WYSIWYG que utilitzaven exclusivament l'element DIV. Realment he executat a través d'HTML que utilitza l'element DIV en comptes de paràgrafs.
Amb HTML5, podem començar a utilitzar elements de seccions per crear documents semànticament descriptius (utilitzant per a la navegació i per a figures descriptives, etc.) i també definir els estils d'aquests elements.
Què passa amb l'element SPAN?
L'altre element que la majoria de la gent pensa quan pensa en l'element DIV és l'element. Aquest element, com DIV, no és un element semàntic. És un element en línia que podeu utilitzar per afegir ganxos per als estils i les seqüències d'ordres al voltant dels blocs de contingut en línia (normalment text). En aquest sentit, és exactament com l'element DIV, només en línia en comptes d'un element de bloc . En alguns aspectes, pot ser més fàcil pensar en el DIV com un element SPAN de nivell de bloc i utilitzar-lo de la mateixa manera que SPAN només per a blocs complets de contingut HTML.
No hi ha un element de secció en línia comparable en HTML5.
Per a versions anteriors d'Internet Explorer
Fins i tot si esteu donant suport dramàticament a versions anteriors d'IE (com IE 8 i inferior) que no reconeguin de manera fiable HTML5, no hauríeu de tenir por d'usar etiquetes HTML semànticament correctes. La semàntica us ajudarà i al vostre equip a gestionar la pàgina en el futur (perquè sabreu que aquesta secció és l'article si està envoltada per l'element ARTICLE). A més, els navegadors que reconeguin aquestes etiquetes els aportaran millor.
Encara podeu utilitzar elements de secció semàntica HTML5 amb Internet Explorer, només heu d'afegir scripting i possiblement alguns elements DIV que els envolten perquè els reconegui les etiquetes com a HTML.
Utilitzant elements DIV i SECTION
Si els utilitzeu correctament, podeu utilitzar elements DIV i SECTION junts en un document HTML5 vàlid. Com heu vist aquí en aquest article, utilitza l'element SECTION per definir porcions semànticament discretes del contingut, i utilitza l'element DIV com a ganxos per a CSS i JavaScript, així com definir un disseny que no té un significat semàntic.
Article original de Jennifer Krynin. Editat per Jeremy Girard el 15/03/17