De tagg introducerades med HTML5 för en tid sedan, men du kan fortfarande inte vara bekant med vad den gör, eller hur den kan användas i många olika situationer. I den här handledningen lär du dig skillnaden mellan och andra jämförbara taggar, och hur du kan börja använda det för att förbättra hur du grupperar objekt i din markering.
Detta är en handledning på nybörjarnivå, men kommer också att fungera som en användbar uppdatering för andra.
Typiska användningsområden för
Låt oss först se vad HTML5-doktorn har att säga i frågan:
Figurelementet representerar en innehållsenhet, eventuellt med en bildtext, som är fristående, som vanligtvis kallas en enda enhet från huvudflödet i dokumentet och som kan flyttas bort från huvudflödet i dokumentet utan påverkar dokumentets mening. -Richard Clark
Så, den figur element anger självständigt innehåll, till exempel illustrationer och foton. Det betyder att du alltid använder figur tagg till huset något annat.
En vanlig missuppfattning är det figur kan bara användas för bilder. Faktum är att det kan användas för att gruppera ett antal olika saker tillsammans, inklusive men inte begränsat till bilder, video, ljud och kodblock.
Definiera sidstrukturen
De figur är en snittrot, vilket innebär att det effektivt isolerar sitt innehåll från sin förfaderstruktur. Vad som än finns inom figuren bidrar inte till dokumentets disposition utanför det. Den beter sig som en strukturell del av sidan och kan därför innehålla egna rubriker, som börjar med en och arbeta ner hierarkin genom , och så vidare, men detta har ingen betydelse för hierarkin utanför:
Hierarkin inom figuren har ingen betydelse för sin förfaders disposition
Element som detta används ofta för att presentera externt innehåll i dokumentet, till exempel ett citat. är ett annat exempel på ett snittrotselement.
Bilder
Här är ett typiskt exempel på hur figur tagg kan användas för att visa en bild.
Nu kanske du tänker: "Varför bry sig om min img-tagg i ytterligare markup?" Det är en rättvis fråga, men det börjar förstå när du förstår att a kan innehålla mer än ett barnelement, till exempel en bildtext.
Det finns också en tagg för en bildtexta eller snarare, figcaption. Med tanke på detta skulle du kunna använda det på följande sätt.
Vad händer? Jag är en bildtext!
Flera bilder
Använd bara en serie av img element för att visa bilder tillsammans fungerar bra, men varje enskild bild skulle vara fristående som sitt eget kodblock, helt orelaterat med någon annan. I fall där bilder delar ett slags förhållande figur kommer till undsättning. Dessa tre bilder är relaterade och delar en enda sammanfattning i figcaption.
Tre olika bilder, grupperade ihop som en figur, och bildades med figcaption.
Använder sig av för kodblock
De figur Elementets talang för att gruppera vanliga tematiska element slutar inte där. Kanske vill du gruppera inline-kod, tillsammans med en bildtext, i en handledning till exempel, då kan du använda figur och figcaption på följande sätt:
Livet är bra, säger HTML5 till XHTML.
I det här kodblocket ser vi HTML5 talar till XHTML.
figur kan användas på detta sätt med koda, pre, och samp, vilket gör det enkelt att gruppera kodblock.
Avslutar
Det är allt! Du har lärt dig hur du använder figur element, tillsammans med figcaption och andra element för att gruppera flera objekt tillsammans. Hur använder du figur element för tillfället? Kommer det att förändras som ett resultat av att du läser detta snabba tips? Berätta för oss i kommentarerna!
Share
Accentsconagua
Hierarkin inom figuren har ingen betydelse för sin förfaders disposition
