HTML-element, förena er! Den Voltron-liknande befogenheter att kombinera element.

0
40

Guider, resurser och diskussioner om Semantisk HTML är ofta fokuserad kring specifika element, som en rubrik, eller snittning av element, eller en lista. Det är inte ofta som vi talar specifikt om hur vi kan kombinera HTML-element för att öka deras effektivitet.

Normalt, när vi införa HTML, vi pratar om hur det används för att applicera vilket innebär att innehållet i ett dokument, och vi gör detta genom att med hjälp av exempel som:

  • “Är det en punkt?”
  • “Är det en väg?”
  • “Är det en numrerad lista”
  • “Är det en knapp”

Vi använder dessa exempel eftersom de är lätta att förstå — det är ett enda stycke eller del av samma innehåll som måste vara representerade på ett visst sätt. Detta är användbart, men det bara skrapar lite på ytan om hur vi kan använda och kombinera element för att ge mer sammanhang och mening.

Du kommer ihåg Voltron, eller hur? Varje medlem av Voltron kraft var stark i sin egen rätt, men det var när de kombineras ihop för att bilda en reslig figur att deras mäktiga krafter blev ostoppbar.

Det samma är sant för HTML-element. Jag har ett par favorit kombinationer som jag ska ta dig igenom. De kan verka otydliga, men du skulle bli förvånad över hur ofta de kommer upp när du tar dig tid att tänka utanför divar och spänner.

Förkortningar och Definitioner

<abbr> och <dfn> är två av mina favorit HTML-element. Jag tycker särskilt mycket om dem eftersom de fungerar riktigt bra tillsammans.

Du kan kombinera förkortning och definition element för att tillåta webbläsare, sökrobotar och andra tekniker för att inse att något är på väg att definieras och att förkortningen är associerade till det uttrycket.

<p>
<Dfn><abbr title=”Internationell Bra
Dog Association”>IGDA</abbr></dfn> är en internationell,
icke-vinstdrivande organisation som ansvarar för att fastställa
att alla hundar är bra.
</p>

I ovanstående exempel, jag definiera att förkortningen “IGDA” som “God Internationell Hundar Föreningen.” Detta gör jag genom att linda acronym i en <abbr> – elementet med en title-attribut som definierar den fullständiga namn. Genom att lägga till <dfn> – elementet runt förkortning, det tyder på att den omgivande punkt definieras begreppet “God Internationell Hundar Föreningen.”

<Abbr> – elementet är användbart eftersom det kan tala om för skärmläsare vad de ska läsa, samtidigt som det också ger en användbar visuell representation i form av en beskrivning som förklarar vad förkortningen är.

Visuell representation av <abbr> och <dfn>.

Tangentbord, Prov och Rörlig

Om du inte har hört talas om dessa element, då kan du få redo att ha dina strumpor blåst bort, eftersom de är awesome.

Först upp, <kbd> element används för att representera text till text från användaren (t ex från ett tangentbord). Du kan också bo flera <kbd> – element för att representera flera tangenttryckningar. Jag älskar detta eftersom vi, som utvecklare, finner vi oss själva (förhoppningsvis) att skriva dokumentation, blogginlägg och guider på en regelbunden basis och HTML förser oss med inhemska sätt att representera detta innehåll direkt ur lådan!

Om jag ville berätta för någon hur du kopierar och klistrar in med tangentbordet, jag kunde märka upp det som koden nedan.

<p>jag vill <kbd><kbd>Ctrl</kbd>+<kbd>C</kbd></kbd>, <kbd><kbd>Ctrl</kbd>+<kbd>V</kbd></kbd> en hel del.</p>

Det ser lite nötter men ovanstående kod, när de återges, ser ut som följande, utan några styling tillämpas på det. Om du undrar varför kbd är inkapslad i en annan kbd element, vad detta innebär är att ange nyckeln eller ingången är en del av en större ingång. Ännu mer kombination superkrafter!

Se Pennan rZpNPy av CSS-Tricks (@css-tricks) på CodePen.

Du kan ytterligare mål, <kbd> – element med CSS för att få det att se mer ut som lilla tangentbord. (Obs: Webbläsare tenderar att göra det som standard med ett teckensnitt med fast teckenbredd.)

Se Pennan gdoOqE av CSS-Tricks (@css-tricks) på CodePen.

Om du undrar vad skillnaden är mellan att använda <kbd> kontra ett span, jag tror att det kommer ned till information. Jag kommer att upprepa denna känslan en hel del: vi vet inte hur någon kommer att förbruka våra HTML, så ge ditt innehåll det är bästa chansen genom att representera det i de mest meningsfulla och sammanhängande sätt. Om du fortfarande inte ombord, så gå och läs mitt inlägg om HTML som sagt av maskinskriven text.

<Samp> – elementet är riktigt häftigt eftersom du kan kapsla in den innanför <kbd> – elementet och vice versa. VAD? Jag vet, så mångsidig! Låt oss ta en titt på några exempel från MDN.

Följande kod är ett exempel på häckande <samp> – element inuti ett <kbd> – elementet. Detta används för att visa upp innehåll som utgör indata baserade på den text som visas av systemet (t ex knapp namn).

<p>för Att spara bilden i en fil, väljer du <kbd><kbd><samp>Fil</samp></kbd> – <kbd><samp>Spara som…</samp></kbd></kbd>.
</p>

Se Pennan YOYzbJ av CSS-Tricks (@css-tricks) på CodePen.

I ovanstående kod, definierar vi vår kortkommandon samma som vårt föregående exempel, men vi bestämmer också att menyn och menyn namn (som finns i både <kbd> och <samp>) är en ingång är vald från något som visas av systemet, t ex en dialogruta eller widget.

Med andra ord, detta stycke är ett meddelande från systemet som har några ingångar som du måste följa (som Arkiv och Spara som…).

När vi nest <kbd> inne <samp> vi bestämma att bidrag har varit ekade tillbaka till användaren av systemet.

<p><samp>garn start:theproject inte finns, menade du:</p>
<blockquote><samp><kbd>garn start:-projekt</kbd></samp></blockquote>

Slutligen, <var> – element! Detta används för att markera namnet på en variabel i matematik eller programmering, till exempel:

<var>E</var> = <var>m</var><var>c</var><sup>2</sup>.
<samp>Fel: <var>console<var> odefinierad.</samp>

Här kan du börja med att se hur kombinera <var> med andra element som <pre>, <code>, <kbd> eller <samp> börjar med att göra ditt innehåll är markup mer explicit genom att lägga till fler sammanhang. Något som tolkar HTML-koden kan börja att härleda mer mening från de element som du använder i stället för att bara antar att det är alla standard text.

Om du sätter denna innehållet i en punkt med vissa sträcker sig över, det finns inget sätt för tekniken att skilja detta från någon annan gammal text på din sida. Du behöver inte ta till <span> eller <div> för att representera detta innehåll eftersom HTML-redan ger oss mer semantiskt korrekta element som vi kan använda. HTML är inte bara om utseende, det handlar om mening. Olika tekniker utanför visuell rendering motorer förlita sig på denna mening för att fatta beslut om hur vi ska kommunicera vår innehållet i den mest meningsfullt sätt (exempelvis skärmläsare, text-till-röst, läsa apps, robotar, eller nästa stora grej i framtiden).

Siffror

Siffror (<siffra>) är ett bra exempel på en power kombination element. Tyvärr tror jag att det i stor utsträckning missbrukas och uppskattade under (ungefär som <bortsett>, som jag kan prata om i timmar). Den uppenbara kombinationen du är förmodligen bekant med är med <siffra> och <figcaption> tillsammans. Vi använder ofta denna duo för att representera grafiskt innehåll som bilder, illustrationer och diagram — men det kan också användas för saker som kod, dikter och citat!

Eftersom en figur som är så flexibel i vilken typ av innehåll som den representerar, det finns en massa olika HTML-element som du kan använda på en bild för att ge mer sammanhang runt den typ av innehåll som du lägger på din sida.

Figcaption

<Siffra> – elementet ses ofta med en valfri <figcaption> vilket utgör en beskrivning eller förklaring för en figur. Det bör vara det första barnet eller sista barnet av <siffra> – elementet. Du kan också använda någon flöde innehåll (till exempel stycken, rubriker, etc.) <figcaption> för att ge mer sammanhang och du kan ha flera bilder inne i <siffra> representeras av en enda <figcaption>.

<bild>
<img src=”jello.jpg” alt=”Golden Retriever Valp” />
<figcaption>Jello Golden Retriever njuter av att vara buren hem.</figcaption>
</bild>

Förformaterad Text

<Pre> – elementet används för att visa förformaterad text eller kod och är oftast utförda med hjälp av ett teckensnitt med fast teckenbredd. Medan <pre> kan användas på egen hand, det kan också kombineras med <siffra> och <figcaption>. Genom att göra detta, innehållet i <pre> – elementet blir mer tillgängliga tekniska hjälpmedel, som skärmläsare, eftersom det tillåter oss att använda <figcaption> som en etikett för text eller kod.

Vi kan gå ännu längre genom att kombinera <pre> och <code> – element för att identifiera förformaterat innehåll som kod.

Se Pennan QVaWVW av CSS-Tricks (@css-tricks) på CodePen.

Eftersom <code> anses flöde innehåll, det kan också användas inuti en <figcaption> för att markera inline hänvisningar till kod (dvs en enda fras eller linje).

Citera och < Blockquote >

Citat är något jag använder en hel del och det ärligt talat inte falla mig in att det skulle kunna användas som en del av en figur. Men det är fortfarande klokt att använda citera eller citat om innehållet på sidorna är relevanta för den övergripande innehåll, även om det inte är en del av de viktigaste dokument.

Jag gillar exemplet med en siffra för dikter, främst så att jag kunde dela den fantastiska dikt jag skrev om min hund. Här använder jag <cite> – element i <figcaption>:

<bild>
<p>
Jello – En liten fluffig hund.
Hej!
Squishy Jello – du lite fluffiga kolleger.
BOUNCY yellow Jello.
En mycket mellow fellow.
ATT ÄTA MIN MARSHMALLOW.
</p>
<figcaption><cite>Äta min Marshmallow av Mandy Michael</figcaption>
</bild>

Det är lätt att falla i fällan att tro att siffran del är bara för bilder eller bild-liknande innehåll, men du kan använda det för innehåll som ljud, video, kartor, dikter, citat eller till och med tabeller för statistik. Eftersom del är så mångsidigt kan du kombinera det med så många andra element för att ge mer och mer handla om siffran för hjälpmedel och ny teknik, webbläsare och andra tekniker för att konsumera din webbplats.

Att Linda Upp

Dessa är bara några av de sätt HTML-element kan kombineras för bättre sammanhang. HTML-element är verkligen användbara och värdefulla på sina egna när de används som isolerade delar och använda dem på detta sätt är ett bra första steg. Men, som Voltron, när du kombinerar HTML-element tillsammans, de enskilda bitarna bildar en större helhet och få mycket mer mening och makt. Det är viktigt att vi inte tänker på HTML som olika delar av koden, men delar av en helhet eftersom HTML är verkligen en massa helt fantastiska kombinationer.

Du kan kombinera och använda HTML-element i ett antal sätt för att bäst representera ditt innehåll. Inte helt enkelt att hålla sig till samma gamla saker som du vet, ta dig tid att utforska HTML och lära dig om allt den har att erbjuda. Precis som vilket språk som helst, vi måste göra det bästa av det och använda det till dess fulla potential.

Ju mer exakt du är i genom att märka upp innehåll, bättre att innehållet kommer att vara representerade i hela tekniker, och ju mer förberedd kommer det att vara för något annat som används för att tolka HTML-koden i framtiden.

Så, gå ut och HTML-element, förena er!

Resurser

I min mening är den bästa resursen för att lära sig och förstå hur man använder HTML (utanför spec själv) är MDN Web-Dokument. Den listar alla HTML-element som du kan tänkas behöva.

Följande är bland de element som ingår i detta inlägg:

  • <abbr>
  • <cite>
  • <kod>
  • <dfn>
  • <bild>
  • <figcaption>
  • <kbd>
  • <samp>
  • <var>

Om du är en Maskin fan och förstår inte varför Semantisk HTML är viktigt, jag skrev detta inlägg bara för dig: att Förstå varför Semantisk HTML är viktigt som sagt av maskinskriven text.