HTML-elementen, verenigt u! De Voltron-achtige bevoegdheden van het combineren van elementen.

0
16

Gidsen, resources en discussies over Semantische HTML zijn vaak gericht op specifieke elementen, zoals een omschrijving, of een snij-element, of in een lijst. Het is niet vaak dat we het specifiek hebben over hoe we het kunnen combineren van HTML-elementen om hun effectiviteit te vergroten.

Normaal gesproken, wanneer we introduceren HTML, we praten over hoe het is gebruikt bij het toepassen van betekenis voor de inhoud van een document, en we doen dit door het gebruik van voorbeelden zoals:

  • “Het Is een alinea?”
  • “Is het opschrift?”
  • “Is het een genummerde lijst”
  • “Is er een knop”

Wij gebruiken deze voorbeelden, omdat ze gemakkelijk te begrijpen — het is een enkel stuk of brok van dezelfde inhoud die moet worden weergegeven in een bepaalde manier. Dit is handig, maar alleen krassen op het oppervlak van hoe kunnen we het gebruiken en combineren van elementen om meer bieden context en betekenis.

Herinner je je Voltron, toch? Elk lid van de Voltron kracht was machtig in hun eigen recht, maar het was toen ze samen aan het vormen van een torenhoge figuur dat hun machtige krachten werd een niet te stuiten.

Hetzelfde is waar van HTML-elementen. Ik heb een paar favoriete combinaties die ik neem met u door. Ze lijken duister, maar je zou verbaasd zijn hoe vaak ze komen wanneer je de tijd neemt om na te denken buiten divs en overspanningen.

Afkortingen en begrippen

<abbr> en <dfn> zijn twee van mijn favoriete HTML-elementen. Ik hou vooral van hen, omdat ze werken goed samen.

U kunt combineren de afkorting en de definitie van de elementen toe te staan browsers, zoek-bots, en andere technologieën om te erkennen dat er iets wordt gedefinieerd en dat het de afkorting is gekoppeld aan die zin.

<p>
De <dfn><abbr title=”Internationaal Goed
Dog Association”>IGDA</abbr></dfn> is een internationale,
not-for-profit organisatie verantwoordelijk voor het vaststellen van
dat alle honden zijn goed.
</p>

In het bovenstaande voorbeeld, ik ben het definiëren dat de afkorting “IGDA” als “Internationaal Goede Honden Vereniging.” Dit doe ik door het verpakken van de afkorting in het <abbr> element met een title attribuut definiëren van de volledige naam. Door het toevoegen van de <dfn> – element rond de afkorting, het geeft aan dat de omliggende paragraaf definieert de term “Internationale Goede Honden Vereniging.”

Het <abbr> element is nuttig omdat het kan vertellen scherm lezers wat zij zouden moeten lezen, terwijl ook het verstrekken van een handige visuele representatie in de vorm van een tooltip uit te leggen wat de afkorting is.

Visuele weergave van de <abbr> en <dfn>.

Toetsenbord, Monster en een Variabele

Als u nog niet gehoord van deze elementen, dan maak je klaar om je sokken geblazen, want ze zijn geweldig.

Eerst omhoog, <kbd> element wordt gebruikt om aan te geven tekst voor een tekstuele input van de gebruiker (bijvoorbeeld een toetsenbord). Ook kunt u nest meerdere <kbd> elementen te vertegenwoordigen meerdere toetsaanslagen. Ik hou dit omdat, zoals ontwikkelaars, zien we dat we (hopelijk) het schrijven van documentatie, blog posts, en gidsen op een regelmatige basis en HTML geeft ons native manieren om deze content direct uit de doos!

Als ik wilde om iemand te vertellen hoe u het kopiëren en plakken met het toetsenbord, ik kon mark-up als de code hieronder in.

<p>ik wil <kbd><kbd>Ctrl</kbd>+<kbd>C</kbd></kbd> en <kbd><kbd>Ctrl</kbd>+<kbd>V</kbd></kbd> veel.</p>

Het ziet er een beetje noten, maar het bovenstaande code, weergegeven, ziet er als volgt uit zonder enige styling toegepast. Als u zich afvraagt waarom kbd is genest in een andere kbd element, wat deze doet is aangeven dat de toets of invoer is een onderdeel van een grotere input. Zelfs meer gecombineerd grootmachten!

Zie de Pen rZpNPy door CSS-Tricks (@css-tricks) op CodePen.

U kan verder gericht zijn op de <kbd> elementen met CSS-het ziet er meer uit als kleine toetsenbord besturing. (Opmerking: Browsers hebben de neiging om te maken deze standaard met een monospace lettertype.)

Zie de Pen gdoOqE door CSS-Tricks (@css-tricks) op CodePen.

Als je je afvraagt wat het verschil is tussen het gebruik van <kbd>, ten opzichte van een span, ik geloof dat het gaat om informatie. Ik herhaal dit gevoel veel: we weten niet hoe iemand gaat verbruiken onze HTML, dus geef uw inhoud het is de beste kans door die in de meest zinvolle en contextuele manier. Als u nog niet aan boord, dan ga lees mijn post over HTML, zoals verteld door de Schrijfmachine.

De <samp> element is echt cool, want je kunt het nest in de <kbd> element en vice versa. WAT? Ik weet het, zo veelzijdig! Laten we eens kijken naar enkele voorbeelden van MDN.

De volgende code is een voorbeeld van nesten <samp> element in een <kbd> element. Dit wordt gebruikt om inhoud te markeren die staat voor input op basis van de tekst die door het systeem wordt getoond (bijv. de namen van de knoppen).

<p>u het imagebestand Wilt opslaan, selecteert u <kbd><kbd><samp>Bestand</samp></kbd> – <kbd><samp>Opslaan als…</samp></kbd></kbd>.
</p>

Zie de Pen YOYzbJ door CSS-Tricks (@css-tricks) op CodePen.

In het bovenstaande code, bepalen we onze sneltoetsen hetzelfde als het vorige voorbeeld, maar we hebben ook vastgesteld dat het menu en de menu-item namen (opgenomen in zowel <kbd> en <samp>) zijn een input geselecteerd uit iets dat door het systeem wordt getoond, bijvoorbeeld een dialoog of een widget.

In andere woorden, dit stukje tekst is een bericht uit het systeem die enkele gebruiker ingangen die u nodig hebt om te volgen (zoals op Bestand en Opslaan als…).

Overwegende dat, wanneer we een nest <kbd> binnen <samp>, kunnen we vaststellen dat de ingang werd teruggestuurd naar de gebruiker door het systeem.

<p><samp>garen start:theproject niet bestaat, bedoelt u:</p>
<blockquote><samp><kbd>garen start:de-project</kbd></samp></blockquote>

Tot slot, de <var> element! Dit wordt gebruikt om de naam van een variabele in de wiskunde of de programmering, bijvoorbeeld:

<var>E</var> = <var>m</var><var>c</var><sup>2</sup>.
<samp>Fout: <var>console<var> is niet gedefinieerd.</samp>

Hier kunt u zien hoe het combineren van <var> met andere elementen zoals <pre>, <code>, <kbd> of <samp> begint uw inhoud markup meer expliciet door het toevoegen van meer context. Iets dat interpreteert de HTML-opmaak kunnen starten voor het afleiden van meer betekenis van de elementen die je gebruikt in plaats van alleen in de veronderstelling dat het allemaal standaard tekst.

Als je deze content in een alinea met een aantal uitstrekt, is er geen manier om technologie te onderscheiden van alle andere oude tekst op uw pagina. U hoeft niet resort <span> of een <div> te staan voor deze inhoud omdat HTML-al geeft ons meer semantisch nauwkeurige elementen die we kunnen gebruiken. HTML niet alleen over de presentatie; het gaat over betekenis. Verschillende technologieën buiten visuele rendering engines vertrouwen op deze zin om beslissingen te nemen over hoe te communiceren via ons content in de meest zinvolle manier (bv. screen readers, tekst naar spraak -, lees-apps, bots, of de volgende grote ding in de toekomst).

Cijfers

Cijfers (<figuur>) zijn een goed voorbeeld van een power combinatie-element. Helaas, ik denk dat het op grote schaal misbruikt en onder gewaardeerd (net als <buiten>, die ik zou kunnen praten over uren). De voor de hand liggende combinatie bent u waarschijnlijk bekend met het gebruik van <figuur> en <figcaption> samen. We maken vaak gebruik van dit duo te vertegenwoordigen grafische inhoud, zoals afbeeldingen, illustraties en schema ‘ s — maar het kan ook worden gebruikt voor dingen zoals code, gedichten en citaten!

Omdat een afbeelding is dus flexibel in wat voor soort content het vertegenwoordigt, er zijn een heleboel verschillende HTML-elementen die je kan gebruiken in een figuur om meer context rond het type inhoud dat u kunt plaatsen op uw pagina.

Figcaption

Het <figure> – element wordt vaak gezien met een optionele <figcaption> wat neerkomt op een bijschrift of de legenda voor een afbeelding. Het moet het eerste kind of jongste kind van het <figure> – element. U kunt ook gebruik maken van een flow-inhoud (bijvoorbeeld alinea ‘ s, koppen, etc.) in de <figcaption> om meer bieden context en kunt u meerdere afbeeldingen binnen een <figuur> vertegenwoordigd door één <figcaption>.

<afbeelding>
<img src=”jello.jpg” alt=”Golden Retriever Puppy” />
<figcaption>Jello de Golden Retriever genieten van het huis gedragen.</figcaption>
</figure>

Opgemaakte Tekst

De <pre> element wordt gebruikt voor het weergeven van tekst of code en wordt meestal weergegeven in een monospace font. Terwijl <pre> kan op zichzelf worden gebruikt, het kan ook gecombineerd worden met <figuur> en <figcaption>. Door dit te doen, de inhoud van de <pre> – element wordt meer toegankelijk voor ondersteunende technologieën, zoals schermlezers, omdat het ons in staat stelt om te gebruiken <figcaption> als een label voor de tekst of code.

We kunnen zelfs verder gaan door het combineren van de <pre> en <code> elementen voor het identificeren van de vooraf opgemaakte inhoud als code.

Zie de Pen QVaWVW door CSS-Tricks (@css-tricks) op CodePen.

Omdat de <code> is overwogen stroom van content, het kan ook gebruikt worden in een <figcaption> markeren inline verwijzingen naar code (d.w.z. een enkele zin of regel).

Citeren en Blockquote

Offertes worden op iets wat ik veel gebruik en het eerlijk gezegd niet bij mij kan het worden gebruikt als onderdeel van een figuur. Maar het maakt nog steeds zin heeft om cite of offerte als de inhoud die ze bevatten, is relevant voor de globale inhoud, zelfs als het niet een deel van het hoofd document flow.

Ik vind het voorbeeld van het gebruik van een afbeelding voor gedichten, voornamelijk zodat ik kan delen in de prachtige gedicht dat ik schreef over mijn hond. Hier heb ik gebruik het <cite> element in de <figcaption>:

<afbeelding>
<p>
Jello – Een kleine pluizige hond.
Hallo!
Squishy Jello – je kleine pluizige collega.
BOUNCY geel Jello.
Een zeer zachte collega.
HET ETEN VAN MIJN MARSHMALLOW.
</p>
<figcaption><cite>Eten mijn Marshmallow door Mandy Michael</figcaption>
</figure>

Het is gemakkelijk om in de val te trappen van denken dat de figuur element is alleen voor afbeeldingen of beeld-achtige inhoud, maar u kunt het gebruiken voor content zoals audio, video, grafieken, gedichten, citaten of zelfs statistische tabellen. Omdat het element is zo veelzijdig dat je kunt combineren met vele andere elementen meer en meer context over de afbeelding voor assistentie-technologie, browsers en andere technologieën verbruiken van uw website.

Inpakken

Dit zijn slechts enkele van de manieren HTML-elementen kunnen worden gecombineerd voor een betere context. HTML-elementen zijn inderdaad nuttig en waardevol op hun eigen als het gebruikt wordt als geïsoleerde stukken en gebruik ze op deze manier is een goede eerste stap. Maar, zoals Voltron, wanneer u een combinatie van HTML-elementen die samen de onderdelen vormen van een groter geheel en krijgen veel meer betekenis en kracht. Het is belangrijk dat wij niet denken van HTML als individuele stukken van de code, maar delen van een geheel, omdat HTML is echt een massa van helemaal geweldig combinaties.

U kunt combineren en gebruik maken van HTML-elementen in elk nummer van manieren om het beste vertegenwoordigen van uw inhoud. Niet gewoon vasthouden aan de oude dingen weet je; de tijd nemen om de HTML en leren over al wat het te bieden heeft. Zoals elke taal, we moeten het beste van maken en deze gebruiken om zijn volledige potentieel.

Hoe nauwkeuriger u bent in het markeren van uw inhoud is, hoe beter dat de inhoud zal worden vertegenwoordigd over technologieën, en de meer bereid zal zijn voor enige iets anders, dat wordt gebruikt voor het interpreteren van uw HTML-code in de toekomst.

Dus, ga heen en HTML-elementen, verenigt u!

Bronnen

In mijn mening is de beste bron voor het leren en begrijpen hoe om HTML te gebruiken (buiten de spec-zelf) is de MDN-Web-Documenten. Het bevat alle HTML-elementen die je ooit zou kunnen nodig hebben.

De volgende zijn enkele van de elementen die in dit bericht:

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

Als u een Getypte versie van de ventilator en niet begrijpen waarom Semantische HTML is belangrijk, ik schreef dit bericht voor jou: Begrijpen waarom Semantische HTML is belangrijk, zoals verteld door de Schrijfmachine.