HTML-elementer, foren dere! Den Voltron-som makter å kombinere elementer.

0
19

Guider, ressurser og diskusjoner om Semantisk HTML er ofte fokusert rundt bestemte elementer, for eksempel en overskrift, eller et snitting element, eller en liste. Det er ikke ofte at vi snakker spesifikt om hvordan vi kan kombinere HTML-elementer for å øke deres effektivitet.

Vanligvis, når vi introduserer HTML, vi snakker om hvordan det er brukt til å bruke mening til innholdet i et dokument, og vi gjør dette ved å bruke eksempler som:

  • “Er det et avsnitt?”
  • “Er det en heading?”
  • “Er det en nummerert liste”
  • “Er det en knapp”

Vi bruker disse eksemplene fordi de er enkle å forstå — det er en enkelt brikke eller en del av det samme innhold som må være representert på en bestemt måte. Dette er nyttig, men det bare skraper i overflaten av hvordan vi kan bruke og kombinere elementer for å gi mer sammenheng og mening.

Du husker Voltron, ikke sant? Hvert medlem av Voltron kraft var mektig i sin egen rett, men det var da de satt sammen til å danne en ruvende skikkelse som sin mektige krefter ble ustoppelig.

Det samme er sant for HTML-elementer. Jeg har noen favoritt-kombinasjoner som jeg vil ta deg gjennom. De kan virke utydelige, men du vil bli overrasket over hvor ofte de kommer opp når du tar deg tid til å tenke utenfor divs og spenner.

Forkortelser og Definisjoner

<abbr> – og <dfn> er to av mine favoritt HTML-elementer. Jeg liker dem fordi de jobber veldig godt sammen.

Du kan kombinere forkortelsen og definisjon elementer for å tillate nettlesere, søkeroboter, og andre teknologier til å erkjenne at noe blir definert og at forkortelsen er knyttet til det uttrykket.

<p>
<Dfn><abbr title=”Internasjonale God
Dog Association”>IGDA</abbr></dfn> er en internasjonal,
ikke-for-profit organisasjon som er ansvarlig for å bestemme
at alle hunder er gode.
</p>

I eksempelet ovenfor vil jeg definere som forkortelsen “IGDA” som “Internasjonal Gode Hunder Association.” Jeg gjør dette ved å pakke akronym i en <abbr> – element med en title-attributtet definerer fullt navn. Ved å legge til <dfn> – element rundt forkortelse, det betyr at rundt ledd definerer begrepet “Internasjonal Gode Hunder Association.”

<Abbr> – element er nyttig fordi det kan fortelle skjermlesere hva de bør lese, samtidig som de også gir nyttig visual representasjon i form av et verktøytips som forklarer hva forkortelsen er.

Visuell fremstilling av <abbr> – og <dfn>.

Tastatur, Utvalg og Variable

Hvis du ikke har hørt om disse elementene, så gjør deg klar til å ha sokker blåst av, fordi de er awesome.

Først opp, <kbd> – element er brukt for å representere tekst for en tekstlig brukerundersøkelser (f.eks. fra et tastatur). Du kan også hekker flere <kbd> – elementer til å representere flere ganger. Jeg elsker dette fordi, som utviklere, finner vi oss selv (forhåpentligvis) skriftlig dokumentasjon, blogginnlegg, og guider på en jevnlig basis og HTML gir oss native måter å representere denne innhold rett ut av boksen!

Hvis jeg ville fortelle noen hvordan du kopierer og limer inn med tastaturet, kunne jeg merke det opp som koden nedenfor.

<p>jeg liker å <kbd><kbd>Ctrl</kbd>+<kbd>C</kbd></kbd> og <kbd><kbd>Ctrl</kbd>+<kbd>V</kbd></kbd> mye.</p>

Det ser litt nøtter, men koden ovenfor, når gjengitt, ser ut som følgende uten styling brukes til det. Hvis du lurer på hvorfor kbd er nestet i en annen kbd element, hva dette betyr er presisere at nøkkel eller innspill er en del av en større inngang. Enda mer kombinert superkrefter!

Se Penn rZpNPy av CSS-Triks (@css-triks) på CodePen.

Du kan ytterligere målrette <kbd> elementer med CSS for å gjøre det ser mer ut som små tastaturet. (Merk: Nettlesere har en tendens til å gjengi dette som standard med en monospace font.)

Se Penn gdoOqE av CSS-Triks (@css-triks) på CodePen.

Hvis du lurer på hva forskjellen er mellom å bruke <kbd> versus et spenn, jeg tror det kommer ned til informasjon. Jeg vil gjenta denne oppfatningen mye: vi vet ikke hvordan noen kommer til å konsumere vår HTML, så gi innholdet ditt er det beste sjanse ved å representere det i de fleste meningsfull og kontekstuelle mulig måte. Hvis du fortsatt ikke på plass, så kan du gå lese innlegget mitt om HTML som fortalt av maskinskrevet kopi.

<Samp> – element er virkelig kult fordi du kan reir det inni <kbd> – element, og vice versa. HVA? Jeg vet, er så allsidig! La oss se på noen eksempler fra MDN.

Følgende kode er et eksempel på hekkende en <samp> – element inne i en <kbd> – element. Dette brukes til å merke opp innhold som representerer input basert på teksten som vises av systemet (f.eks. knapp navn).

<p>for Å lagre bildet som en fil, velger <kbd><kbd><samp>Fil</samp></kbd> – <kbd><samp>Lagre som…</samp></kbd></kbd>.
</p>

Se Penn YOYzbJ av CSS-Triks (@css-triks) på CodePen.

I koden ovenfor, definerer vi vår hurtigtaster den samme som vår forrige eksempel, men vi kan også finne ut at du meny og meny element navn (som finnes både innen <kbd> og <samp>) er en inngang som er valgt fra noe som vises av systemet, for eksempel en dialogboks eller en widget.

Med andre ord, denne teksten er en melding fra systemet som har noen bruker input som du må følge (som Fil og Lagre som…).

Mens når vi reir <kbd> i <samp> vi fastslå at innspillene har blitt gjentatt tilbake til brukeren av systemet.

<p><samp>garn start:theproject ikke finnes, mener du:</p>
<blockquote><samp><kbd>garn start:-prosjekt</kbd></samp></blockquote>

Til slutt, <var> – element! Dette brukes til å markere navnet på en variabel i matematikk eller programmering, for eksempel:

<var>E</var> = <var>m</var><var>c</var><sup>2</sup>.
<samp>Feil: <var>konsollen<var> er udefinert.</samp>

Her kan du starte å se hvordan du kombinerer <var> med andre elementer, for eksempel <pre>, <code>, <kbd> eller <samp> begynner å gjøre innholdet er markup mer eksplisitt ved å legge til mer kontekst. Noe som tolker HTML-markup kan begynne å utlede mer mening fra de elementene du bruker snarere enn bare under forutsetning av at det er alle standard tekst.

Hvis du setter denne innhold i et avsnitt med noen spenner, det er ingen måte for teknologi og for å skille denne fra andre gamle tekst på din side. Du trenger ikke å ty til <span> eller <div> for å representere denne innhold fordi HTML allerede gir oss mer semantisk nøyaktige elementer vi kan bruke. HTML er ikke bare om presentasjon; det handler om mening. Ulike teknologier utenfor visuell gjengivelse motorer stole på denne meningen å ta beslutninger om hvordan å kommunisere vårt innhold i de mest meningsfylt måte (f.eks. skjermlesere, tekst-til-tale -, lese-apps, bots, eller den neste store tingen i fremtiden).

Tall

Tall (<figure>) er et godt eksempel på en power kombinasjon element. Dessverre tror jeg det er mye misbrukt og under verdsatt (mye som <side>, som jeg kunne snakke om for timer). Den opplagte kombinasjonen du er sannsynligvis kjent med er å bruke <figure> og <figcaption> sammen. Vi bruker ofte denne duoen å representere grafisk innhold som for eksempel bilder, illustrasjoner og diagrammer — men det kan også brukes for ting som kode, dikt og sitater!

Fordi en figur er så fleksibel i hva slags innhold det representerer, det er en haug av forskjellige HTML-elementer du kan bruke i en figur for å gi mer kontekst rundt den typen innhold du legger ut på nettsiden din.

Figcaption

<Figur> – element er ofte sett med en valgfri <figcaption> som representerer en bildetekst eller tegnforklaring for en figur. Det bør være det første barnet eller siste barn av <figure> – element. Du kan også bruke noen strømme innhold (f.eks. avsnitt, overskrifter, etc.) i <figcaption> å gi kontekst, og du kan ha flere bilder inne i en <figure> representert ved en enkelt <figcaption>.

<figur>
<img src=”jello.jpg” alt=”Golden Retriever Valp” />
<figcaption>Jello Golden Retriever nyter å være båret hjem.</figcaption>
</figure>

Ferdig Formatert Tekst

<Pre> – element er brukt til å vise ferdig formatert tekst eller kode og er vanligvis gjengis ved hjelp av en monospace font. Mens <pre> kan brukes på egen hånd, det kan også være kombinert med <figure> og <figcaption>. Ved å gjøre dette, innhold innenfor <pre> – element blir mer tilgjengelig for hjelpemidler teknologier, som for eksempel skjermlesere, siden det tillater oss å bruke <figcaption> som en etikett for tekst eller kode.

Vi kan gå enda lenger ved å kombinere <pre> og <code> – elementer til å identifisere pre – formatert innhold som kode.

Se Penn QVaWVW av CSS-Triks (@css-triks) på CodePen.

Fordi <code> er regnet strømme innhold, det kan også brukes inni en <figcaption> til å markere inline-referanser til kode (dvs. en enkelt setning eller en linje).

Cité og Blockquote

Sitater er noe jeg bruker mye, og det ærlig talt ikke falle meg inn at det kunne brukes som en del av en figur. Men det er likevel fornuftig å bruke sitere eller tilbud om innhold de har er relevant i forhold til det totale innholdet, selv om det ikke er en del av de viktigste dokument flyt.

Jeg liker eksempel på bruk av en figur for dikt, hovedsakelig, slik at jeg kunne dele den fantastiske dikt jeg skrev om min hund. Her vil jeg bruke <cite> – element inne i <figcaption>:

<figur>
<p>
Jello – litt fluffy hund.
Hallo!
Squishy Jello – du lite lun fyr.
SPRETT gule Jello.
En veldig hyggelig kar.
SPISE MINE MARSHMALLOW.
</p>
<figcaption><cite>Spise mine Marshmallow av Mandy Michael</figcaption>
</figure>

Det er lett å falle i fellen av å tro at tallet elementet er bare for bilder eller bilde-som innhold, men du kan bruke den for innhold, for eksempel audio, video, kart, dikt, sitater eller selv tabeller med statistikk. Fordi element er så allsidig at du kan kombinere det med så mange andre elementer for å gi mer og mer kontekst om figuren for hjelpeteknologi, nettlesere og andre teknologier tidkrevende ditt nettsted.

Innpakning Opp

Disse er bare noen av måtene HTML-elementer kan kombineres for å få bedre sammenheng. HTML-elementer er faktisk nyttig og verdifullt på sine egne når de brukes som isolert stykker — og det å bruke dem på denne måten er et godt første skritt. Men, som Voltron, når du kombinere HTML-elementer sammen, de enkelte delene danner en større helhet, og få mye mer mening og makt. Det er viktig at vi ikke tenker på HTML som individuelle deler av koden, men deler av et hele, fordi HTML er virkelig en masse helt fantastiske kombinasjoner.

Du kan kombinere og bruke HTML-elementer i en rekke måter som best representerer ditt innhold. Ikke bare holde seg til de samme gamle tingene som du vet, ta deg tid til å utforske HTML og lære om alt det har å tilby. Som en hvilken som helst språk, vi bør gjøre mest mulig ut av det og bruke det til sitt fulle potensial.

Jo mer nøyaktig du er i å kommentere innholdet, er det bedre at innholdet vil være representert på tvers av teknologier, og mer forberedt på at det vil være for eventuelle noe annet som kan brukes for å tolke HTML i fremtiden.

Så, gå videre og HTML-elementer, foren dere!

Ressurser

I min mening, den beste ressursen for å lære og forstå hvordan å bruke HTML (utenfor spec seg selv) er MDN Web-Dokumenter. Den lister opp alle HTML-elementer du noensinne kunne trenge.

Følgende er blant de elementer som dekkes i dette innlegget:

  • <abbr>
  • <cite>
  • <code>
  • <dfn>
  • <figur>
  • <figcaption>
  • <kbd>
  • <samp>
  • <var>

Hvis du er en maskinskrevet kopi vifte og forstår ikke hvorfor Semantisk HTML er viktig, og jeg skrev dette innlegget bare for deg: Forstå hvorfor Semantisk HTML er viktig som fortalt av maskinskrevet kopi.