Verständnis vum HTML5 SECTION Element
Wann HTML5 an d'Szen eng Rei vu Joer vir ass, huet et e puer nei Sektioun Elementer op d'Languedoc erhéijen, dorënner dem SECTION Element. Déi meescht vun den neien Elementer, déi HTML5 unzefroen, hunn kloer Usiichten. Zum Beispill gëtt de Element benotzt fir Artikelen an Haaptdeeler vun enger Websäit ze definéieren, d'Element gëtt benotzt fir verknëppelt Inhalter ze definéieren déi net kritesch ass fir de Rescht vun der Säit, an de Kappzeilen, nav a Fouss sinn ziemlech selbstklärlech. De nei addéierten SECTION-Element ass awer e bëssen manner kloer.
Vill Leit gleewen datt d'HTML Elementer SECTION a si wierklech déi selwecht Saache-generesche Containerelementer déi Inhalter op enger Websäit enthalen. D'Realitéit ass awer datt dës zwee Elementer, souwuel als Containerelementer, alles wéi Generik. Et ginn spezifesch Grënn fir den Element SECTION an den DIV Element ze benotzen - an dësen Artikel erënnert dës Differenzen.
Rubriken an Divisiounen
Den SECTION Element ass definéiert als en semanteschen Deel vun enger Websäit oder Site déi net nach aner spezifescht Typ ass (wéi Artikel oder Säit). Ech tendéiere dësen Element ze benotzen wann ech e differenzéierten Deel vun der Säit markéieren - eng Rubrik déi kéint Grosshandel verschéckt a ginn op anere Säiten oder Deel vun der Säit benotzt. Et ass e klengen Deel vun Inhalt, oder e "Sektioun" vum Inhalt, wann Dir wëllt.
Am Géigesaz, benotzt Dir den DIV-Element fir deelweis vun der Säit déi Dir divizéiert wëllt, awer fir aner Zwecker als Semantik . Ech géif en Inhalt vun enger Divisioun verpacken, wann ech mech esou sécher datt ech e "Haken" benotze fir mat CSS ze benotzen. Et kann net e differenzéierten Deel vum Inhalt op der Basis vun Semantiken sinn, mee ass eppes wat ech soen Diktateuren fir de Layout ze erreechen wat ech wëll fir meng Säit erreechen.
Et ass alles ëm Semantiken
Dëst ass en hart Konzept ze verstoen, awer den eenzegen Ënnerscheed tëscht dem DIV-Element an dem SECTION-Element ass d'Semantik. An anere Wierder, et ass d' Bedeitung vum Deel vum Code deen Dir opgitt.
All Inhalt, dat am DIV-Element enthale sinn, ass net onerwéissege Bedeitung. Et ass am beschten fir Saachen ewéi:
- CSS Styles an Haken fir CSS Styles
- Layout Container
- JavaScript Haken
- Divisiounen fir d'HTML fir et besser ze liesen
Den DIV-Element war fir deen eenzegen Element, deen mer fir d'Haken héieren hunn, fir eis Dokumenter ze stiléieren an Spalten a lëschteg Layout ze schafen. Wéinst deem hu mir mat HTML déi mat DIV Elementer verdeelt waren - wat Webdesigner "Divitis" nennen. Et waren och WYSIWYG Redaktoren, déi den DIV Element exklusiv benotzt hunn. Ech hunn eigentlech iwwer HTML héieren, deen den DIV-Element anstelle vun Absätzen benotzt.
Mat HTML5 kënne mir deelweis Elementer benotzt fir méi semantesch beschreiwende Dokumenter ze benotzen (Benotzere fir Navigatioun a fir deskriptiv Figuren a sou weider) an definéieren och Stiler op dësen Elementer.
Wat sinn iwwer de SPAN Element?
Déi aner Element, déi d'Majoritéit vu Leit denkt, wann se iwwer den DIV-Element denken, ass dat Element. Dëst Element, wéi DIV, ass kee semantesch Element. Et ass e Inline-Element, deen Dir benotzt fir Stécker a Stécker un Inline- Blöcke vu Inhalt ze kréien (normalerweis Text). An deem Sënn ass et genee wéi dem DIV-Element, nëmmen Inline wéi e Blockelement . Op e puer Aart ass et méi einfach, den DIV als e Block-Level-SPAN-Element ze denken an se benotzen d'selwecht wéi Dir SPAN nëmme fir ganz Blöcken vum HTML Inhalt huet.
Et ass kee vergläichbar Inline-Sektiounselement an HTML5.
Fir ären Versiounen vum Internet Explorer
Och wann Dir drastesch méi al Versioune vun IE ënnerstëtzt (wéi IE 8 oder méi), déi net iwwerléissege HTML5 ze verléieren, sollt Dir net seet, datt se semantesch korrekt HTML Tags benotzen. D'Semantik hëlleft Iech an Är Équipe verwalten d'Säit an der Zukunft (well Dir wësst datt dës Sektioun den Artikel ass, wann et ëm d'ARTIKEL Element ass). Plus, Browsers déi dës Tags erkennen ënnerstëtzen se besser.
Dir kënnt HTML5 semantesch Sektiounselementer mat Internet Explorer benotzen, Dir musst nëmme Skriptéieren an eventuell e puer um DIV-Elemente erreechen fir se z'entwéckelen fir d'Tags als HTML ze erkennen.
Benotzt DIV a SECTION Elements
Wann Dir se korrekt benotzt, kënnt Dir DIV an SECTION Elementer an engem gültege HTML5-Dokument benotzen. Wéi Dir hei an dësem Artikel gesitt, benotzt Dir den Element SECTION fir semantesch diskret Portioune vum Inhalt ze definéieren, an Dir benotzt den DIV-Element als Haken fir CSS an JavaScript, an och den Layout definéieren deen net eng semantesch Bedeitung huet.
Original Artikel vum Jennifer Krynin. Edited by Jeremy Girard um 15.03.17