Comprensión do elemento SECCIÓN HTML5
Cando HTML5 funda a escena hai varios anos, engadiu un grupo de novos elementos de sección ao langauge, incluíndo o elemento SECTION. A maioría dos novos elementos que introduce HTML5 teñen usos claros. Por exemplo, o elemento úsase para definir artigos e partes principais dunha páxina web, o elemento utilízase para definir contido relacionado que non é crítico para o resto da páxina e que o encabezado, o nav e o pé de páxina son moi ben explicativos. O elemento SECTION recén engadido, con todo, é un pouco menos claro.
Moita xente pensa que os elementos HTML SECTION son realmente os mesmos elementos contenedores xenéricos que se usan para conter contido nunha páxina web. A realidade, con todo, é que estes dous elementos, mentres que os dous son elementos do contedor, non son nada xenérico. Existen razóns específicas para usar tanto o elemento SECCIÓN como o elemento DIV - e este artigo explicará esas diferenzas.
Seccións e divs
O elemento SECTION defínese como unha sección semántica dunha páxina web ou sitio que non é outro tipo máis específico (como artigo ou lado). Tento utilizar este elemento cando estarei marcando unha sección distinta da páxina: unha sección que se pode mover e utilizar noutras páxinas ou partes do sitio. É unha peza distinta de contido, ou unha "sección" de contido, se o desexa.
En contraste, usa o elemento DIV para partes da páxina que quere dividir, pero para fins distintos á semántica . Quere envolver unha área de contido nunha división se o fago para me dar un "gancho" para usar con CSS. Pode que non sexa unha sección distinta de contido baseada na semántica, pero é algo que estou dicindo para lograr o deseño que quero para a miña páxina.
It's All About Semantics
Este é un concepto difícil de entender, pero a única diferenza entre o elemento DIV eo elemento SECTION é a semántica. Noutras palabras, é o significado da sección do código que está dividindo.
Calquera contido contido dentro dun elemento DIV non ten ningún significado inherente. É mellor usado para cousas como:
- Estilos CSS e ganchos para estilos CSS
- Contedores de deseño
- Enganche de JavaScript
- Divisións para o HTML para facilitar a lectura
O elemento DIV era o único elemento que tiñamos para engadir ganchos ao estilo dos nosos documentos e crear columnas e deseños de fantasía. Por iso, terminamos con HTML que estaba cheo de elementos DIV: o que os deseñadores web chaman "divitis". Había mesmo editores de WYSIWYG que utilizaban exclusivamente o elemento DIV. Realmente estou en HTML que usa o elemento DIV en vez de parágrafos.
Con HTML5, podemos comezar a usar elementos de seccións para crear documentos semánticamente descritivos (empregando para a navegación e para figuras descritivas, etc.) e tamén definir os estilos sobre eses elementos.
Que pasa co elemento SPAN?
O outro elemento que a maioría da xente pensa cando pensan no elemento DIV é o elemento. Este elemento, como DIV, non é un elemento semántico. É un elemento en liña que pode usar para engadir ganchos para estilos e scripts en bloques de contido en liña (normalmente texto). Nese sentido é exactamente como o elemento DIV, só en liña no canto dun elemento de bloque . De algunha maneira, pode ser máis doado pensar no DIV como un elemento de nivel de bloque de nivel e usalo do mesmo xeito que só faría SPAN só para bloques enteiros de contido HTML.
Non hai un elemento de sección en liña comparable en HTML5.
Para versións anteriores de Internet Explorer
Aínda que estea apoiando dramáticamente versións anteriores de IE (como IE 8 e inferior) que non recoñecen de forma fiable HTML5, non deberías ter medo de usar etiquetas HTML semánticamente correctas. A semántica axudaralle a vostede e ao seu equipo a xestionar a páxina no futuro (porque saberá que esa sección é o artigo se está rodeada polo elemento ARTIGO). Ademais, os navegadores que recoñecen esas etiquetas respectaranse mellor.
Aínda pode usar elementos de sección semántica HTML5 con Internet Explorer, só precisa engadir script e posiblemente algúns elementos DIV circundantes para que se poidan recoñecer as etiquetas como HTML.
Usando elementos DIV e SECTION
Se estás a usar correctamente, podes usar os elementos DIV e SECCIÓN xuntos nun documento HTML5 válido. Como viches neste artigo, usa o elemento SECTION para definir porcións semánticamente discretas do contido e usa o elemento DIV como ganchos para CSS e JavaScript, así como definir un deseño que non ten un significado semántico.
Artigo orixinal de Jennifer Krynin. Editado por Jeremy Girard o 15/15/17