Quan HTML5 va entrar a l'escena fa uns quants anys, va afegir un munt de nous elements de secció a la base, incloent-hiSECCIÓ element. 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. El recentment afegitSECCIÓ L'element, però, és una mica menys clar.
Molta gent creu que els elements HTML SECCIÓ i 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 el SECCIÓ element i el DIV element - i aquest article explicarà aquestes diferències.
Seccions i divs
El SECCIÓ L'element 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 el DIV element 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 la DIV element i el SECCIÓ L'element és la semàntica. En altres paraules, és el significat de la secció de codi que està dividint.
Qualsevol contingut que es trobi dins d'un DIV L'element 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
El DIV element que solia ser l'únic element que teníem per afegir ganxos a l'estil dels nostres documents i crear columnes i dissenys elegants. Per aquest motiu, vam acabar amb un codi HTML que tenia problemes DIV elements: el que els dissenyadors web anomenen "divisions". Hi va haver fins i tot editors de WYSIWYG que usaven el DIV element exclusiu. En realitat, he executat un codi HTML que fa servir el DIV element 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 pensen en la DIV element é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 el DIV element, només en línia en comptes d'un element de bloc. D'alguna manera, podria ser més fàcil pensar en el DIV com un bloc de nivell SPAN element i utilitzeu-lo de la mateixa manera que ho faria 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 (ja que sabreu que aquesta secció és l'article si està envoltada pel ARTICLE element). 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, uns quants entorns DIV elements per reconèixer-los com a HTML.
Utilitzant elements DIV i SECTION
Si els utilitzeu correctament, podeu utilitzar tots dos DIV i SECCIÓ Elements junts en un document HTML5 vàlid. Com heu vist aquí en aquest article, utilitzeu el SECCIÓ element per definir porcions semànticament discretes del contingut, i utilitzeu el DIV element com a ganxos per a CSS i JavaScript, així com definir un disseny que no tingui un significat semàntic.
Article original de Jennifer Krynin. Editat per Jeremy Girard el 15/03/17
