De tag is al geruime tijd geleden geïntroduceerd bij HTML5, hoewel u nog steeds niet bekend bent met wat het doet, of hoe het in veel verschillende situaties kan worden gebruikt. In deze tutorial leert u het verschil tussen en andere vergelijkbare tags, en hoe u deze kunt gebruiken om de manier te verbeteren waarop u items in uw markeringen groepeert.
Dit is een tutorial op beginnersniveau, maar zal ook dienen als een nuttige opfriscursus voor anderen.
Typische toepassingen voor
Laten we eerst eens kijken wat de HTML5-arts hierover te zeggen heeft:
Het figuurelement vertegenwoordigt een eenheid van inhoud, optioneel met een bijschrift, dat op zichzelf staat, waarnaar doorgaans wordt verwezen als een enkele eenheid uit de hoofdstroom van het document, en dat kan worden verplaatst van de hoofdstroom van het document zonder invloed op de betekenis van het document. -Richard Clark
Dus de figuur element geeft zelfstandige inhoud aan, zoals illustraties en foto's. Dit betekent dat je altijd de figuur tag om iets anders te huisvesten.
Een veel voorkomende misvatting is dat figuur kan alleen worden gebruikt voor afbeeldingen. In feite kan het worden gebruikt om een aantal verschillende dingen samen te groeperen, inclusief, maar niet beperkt tot, afbeeldingen, video, audio en codeblokken..
Paginastructuur definiëren
De figuur is een doorsnedewortel, wat inhoudt dat het de inhoud ervan effectief isoleert van de structuur van zijn voorouder. Wat er ook in de figuur zit, draagt niet bij aan de buitenlijn van het document. Het gedraagt zich als een structureel element van de pagina en kan daarom zijn eigen koppen bevatten, te beginnen met een en de hiërarchie doorwerken , en zo verder, maar dit heeft geen invloed op de hiërarchie buiten:
De hiërarchie binnen de figuur heeft geen invloed op de omtrek van zijn voorouder
Elementen zoals deze worden vaak gebruikt om externe inhoud aan het document te geven, zoals een citaat bijvoorbeeld. is een ander voorbeeld van een wortelelement in delen.
Afbeeldingen
Hier is een typisch voorbeeld van hoe het figuur tag kan worden gebruikt om een afbeelding weer te geven.
Nu denkt u misschien: "Waarom zou ik mijn img-tag in extra opmaak verpakken?" Dat is een eerlijke vraag, maar het begint logisch te worden zodra je je realiseert dat een kan meer dan één onderliggende element bevatten, zoals een bijschrift.
Er is ook een tag voor een bijschrift van een afbeelding, of beter gezegd, figcaption. Dit in aanmerking nemend, zou je het op de volgende manier kunnen gebruiken.
Hoe gaat het? Ik ben een bijschrift!
Meerdere afbeeldingen
Met slechts een reeks img elementen om afbeeldingen samen weer te geven werken prima, hoewel elke individuele afbeelding op zichzelf staat als een eigen codeblok, volledig onafhankelijk van andere. In gevallen waarin afbeeldingen een soort van relatie delen figuur komt te hulp. Deze drie afbeeldingen zijn gerelateerd en delen een enkele samenvatting in de figcaption.
Drie verschillende afbeeldingen, gegroepeerd als een figuur en ondertiteld met figcaption.
Gebruik makend van voor codeblokken
De figuur elemententalent voor het groeperen van elementen met een gemeenschappelijk thema eindigt hier niet. Misschien wilt u een inline-code groeperen, samen met een bijschrift, bijvoorbeeld in een zelfstudie, die u zou kunnen gebruiken figuur en figcaption op de volgende manier:
Het leven is goed, zei HTML5 tegen XHTML.
In dit codeblok zien we HTML5 in gesprek met XHTML.
figuur kan op deze manier worden gebruikt met code, pre, en samp, het gemakkelijk maken om codeblokken te groeperen.
Afsluiten
Dat is het! Je hebt geleerd hoe je de figuur element, samen met figcaption en andere elementen om meerdere items samen te groeperen. Hoe gebruik je de figuur element op dit moment? Zal dat veranderen als gevolg van het lezen van deze snelle tip? Vertel ons in de reacties!
Share
Accentsconagua
De hiërarchie binnen de figuur heeft geen invloed op de omtrek van zijn voorouder
