HTML5 figur- og figurtekstelementer

Bla gjennom hvilken som helst bok eller trykt materiale, og vanligvis vil du finne en bildetekst under hver figur, grafikk, bilde, tabell eller graf. Mange ikke-semantiske måter å duplisere en figurtekst på nettet inkluderer fancy CSS-stiler, tabellrader, nestede div-containere eller andre måter å sjarmere og fange innholdet. Denne demonstrasjonen og gjennomgangen vil omfatte theelement, the element, hekkingen av flere figurelementer, og fordelene for brukere som får tilgang til innhold definert med de to elementene. HTML-, CSS- og png-bildefilene som brukes i denne demonstrasjonen er tilgjengelige i nedlastingen på slutten av denne artikkelen.

Med HTML5 figur og bildetekst elementer vi nå semantisk kan markere innhold som grafikk, diagrammer, grafer, diagrammer, tegninger og bilder. Hver har en litt annen måte å presentere innholdet på; W3C Working Draft definerer figuren på denne måten: "Figurelementet representerer en innholdsenhet, eventuelt med en billedtekst, som er selvstendig, som vanligvis blir referert til som en enkelt enhet fra hovedstrømmen i dokumentet, og som kan flyttes bort fra hovedstrømmen i dokumentet uten å påvirke dokumentets betydning. " Og figurteksten eller figurteksten, som det også er kjent, er definert på denne måten: "Bildetekstelementet representerer en bildetekst eller legende for en figur." Oppsummert har figuren en mulighet til å inkludere en bildetekst, og figekjennskapet representerer bildeteksten for en figur.

Figurelement

La oss dele ned hvert av de to elementene mer detaljert, og begynne med figurelementet. I henhold til spesifikasjonen inkluderer det tillatte innholdet for figurelementet ett figurtekstelement fulgt av strømningsinnholdet, eller strømningsinnholdet etterfulgt av et valgfritt figurtekstelement. De tillatte attributtene inkluderer alle globale attributter, for eksempel de som er felles for alle elementene i HTML-språket, og figurelementet må ha en startkode og en sluttkode. Tillatte overordnede elementer inkluderer alle elementer som inneholder flytelementer. En typisk standard skjermegenskap kan se slik ut som dette eksemplet:

 figur { 
 skjerm: blokkering; 
 margin-før: 1em; 
 margin-etter: 1em; 
 margin-start: 40px; 
 margin-end: 40px; 
 } 

Og la oss legge til følgende CSS-egenskaper:

 kropp { 
 skjerm: blokkering; 
 } 
 img { 
 grense: 1px solid # 323232; 
 polstring: 5px; 
 bakgrunn: #fff; 
 border-radius: 12px; 
 boksskygge: 3px 3px 5px rgba (50, 50, 50, .5); 
 } 

La oss deretter lage en eksempel figur med bildeinnhold. Vi starter med HTML-kodebiten som vises nedenfor:

 Det resulterende bildet vises i Google Chrome versjon 22.0.1229.94 m i figur A nedenfor: 

Figur A

Fig caption element

La oss nå legge inn en figurtekst til figurelementet vårt; egentlig, den elementet blir nestet inne i anyelement for å legge til en teksttekst til den tilhørende figuren. Spesifikasjonen tillater alt innhold innen flytinnhold, og innenfor alle globalt tillatte attributter. Etiketten til figcaption-elementet må ha en startkode og en sluttkode, og det tillatte overordnede elementet er figurelementet.

Siden jeg allerede har inkludert visningsblokkstil i CSS for denne demoen, vil jeg ikke legge den spesifikt til figcaption-elementet, men de typiske standardvisningsegenskapene inkluderer følgende CSS:

 fig caption { 
 skjerm: blokkering; 
 } 

CSS-en som jeg har inkludert for demonstrasjonen av figcaption, vises i kodebiten nedenfor:

 fig caption { 
 polstring: 5px; 
 font-family: 'Cherry Swash', kursiv; 
 skriftstørrelse: 1em; 
 fontvekt: 700; 
 grense: ingen; 
 bakgrunn: gjennomsiktig; 
 word-wrap: normal; 
 tekstjustering: sentrum; 
 } 
 en { 
 text-decoration: none; 
 } 

Og HTML-kodebiten for figcaption vises nedenfor:

 Sittende pinnefigurer som ligger på bærbare datamaskiner! Se 
 Ankerhyperkoblingsreferansen i ovennevnte  elementet peker på en dummy URL, er det bare en plassholder som viser hvordan kobling kan integreres i et figurtekstelement. Det resulterende bildet som vist i Google Chrome versjon 22.0.1229.94 m er vist i figur B nedenfor: 

Figur B

Heklede tall

Hva om du vil hekke figurene dine i en gruppe lignende figurer? De relaterte tallene skal grupperes etter forhold og kategoriseres etter et hvilket som helst antall alternativer, inkludert emne, emne, forfatter, tittel eller dato, for eksempel. Paciello Group Blog inneholder en god artikkel om HTML5 tilgjengelighet ved hjelp av nestede figurelementer, der Steve Faulkner forklarer ulike alternativer og gir eksempler. Bildeteksten kan synliggjøres som standard, skjules eller vises på svevet eller fokus. Steve forklarer at kravet kanskje ikke gjør det nødvendig å vise tekstteksten til en tilknyttet figur ved noen tilfeller.

Du kan tenke at det er en snarvei for å merke opp flere bilder eller innhold i et enkelt element; Dette er imidlertid ikke god koding siden elementet antas å være semantisk markering for én figur. Strukturelle HTML5-elementer som, og, vil være en bedre bruk for å inneholde flere elementer. Jeg har tatt med et eksempel på HTML-kodestykket for riktig hekkende elementer nedenfor, der figurelementet får en tilgjengelige rik Internett-applikasjoner (WAI-ARIA) Rolle Model designation of role = "group" setting. ARIA-gruppeinnstillingen brukes til å indikere semantikken i theelement og for å spesifisere merkingsforholdet til element for skjermlesere og adaptive teknologier.

 Stickfigurer med bærbare datamaskiner 
 To pinnefigurer som håndhilser. 
 Fire pinnefigurer med bærbare datamaskiner. 
 Den resulterende utgangen som vist i Google Chrome versjon 22.0.1229.94 m er vist i figur C nedenfor: 

Figur C

Hvert bilde er inneholdt i sin egen nestede figur, alle av dem er inne i figuren, og hvert ledsages av en tilhørende figurtekst. under hvert bilde.

I følge W3C Working Draft om tekstalternativer, er fordelene ved bruk og elementer for bilder, figurer, illustrasjoner og slikt på nettet inkluderer:

  • Figur- og figurtekstelementene gir en metode for eksplisitt å knytte en bildetekst til et mangfold av innhold, inkludert bilder. Alt innhold inne i figurelementet som ikke er inneholdt i billedtekstelementet, er merket med innholdet i figtekstelementet.
  • Når det støttes av nettlesere og hjelpeteknologi, vil innholdet i billedteksten bli eksplisitt assosiert med bildet.
  • Inntekstinnholdet kan være et tekstalternativ for bildet, og forhindrer behovet for et tekstalternativ gitt ved hjelp av alt-attributtet. Dette vil bare være tilfelle hvis billedtekstinnholdet gir et adekvat tekstalternativ for det visuelle innholdet i bildet.
Jeg har gitt en nedlasting av HTML-, CSS- og png-bildefilene som ble brukt i denne demonstrasjonen.

© Copyright 2020 | mobilegn.com