De HTML-afkortingselement( ) vertegenwoordigt een afkorting of acroniem; het optionele titelattribuut kan een uitbreiding of beschrijving van de afkorting bieden. Indien aanwezig, moet de titel deze volledige beschrijving bevatten en niets anders.
De bron voor dit interactieve voorbeeld is opgeslagen in een GitHub-repository. Als u wilt bijdragen aan het interactieve voorbeeldenproject, kloon dan https://github.com/mdn/interactive-examples en stuur ons een pull-verzoek.
Toegankelijkheidsproblemen
Het voluit spellen van het acroniem of de afkorting wanneer het voor de eerste keer op een pagina wordt gebruikt, is nuttig om mensen te helpen het te begrijpen, vooral als de inhoud technisch of branchejargon is.
Voorbeeld
JavaScript-objectnotatie ( JSON) is een lichtgewicht gegevensuitwisselingsformaat.
Dit is vooral handig voor mensen die niet bekend zijn met de terminologie of concepten die in de inhoud worden besproken, voor mensen die nieuw zijn in de taal en voor mensen met cognitieve problemen.
Specificaties
| Specificatie | Status | Opmerking |
|---|---|---|
| HTML-levensstandaard De definitie van " "in die specificatie. |
Levensstandaard | |
| HTML5 De definitie van " "in die specificatie. |
Aanbeveling | |
| HTML 4.01-specificatie De definitie van " "in die specificatie. |
Aanbeveling |
Browsercompatibiliteit
De compatibiliteitstabel op deze pagina is gegenereerd op basis van gestructureerde gegevens. Als je wilt bijdragen aan de gegevens, ga dan naar https://github.com/mdn/browser-compat-data en stuur ons een pull-verzoek.
Update compatibiliteitsgegevens op GitHub
| Bureaublad | Mobiel | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chroom | Rand | Firefox | Internet Explorer | Opera | Safari | Android-webweergave | Chroom voor Android | Firefox voor Android | Opera voor Android | Safari op iOS | Samsung-internet | |
| afkorting | Chrome Volledige ondersteuning 2 | Edge Volledige ondersteuning Ja | Firefox Volledige ondersteuning 1 Opmerkingen Volledige ondersteuning 1Opmerkingen Opmerkingen Vóór Firefox 4 implementeerde dit element de HTMLSpanElement-interface in plaats van de standaard HTMLElement-interface. | IE Volledige ondersteuning 7 | Opera Volledige ondersteuning Ja | Safari Volledige ondersteuning Ja | WebView Android Volledige ondersteuning Ja | Chrome Android Volledige ondersteuning Ja | Firefox Android Volledige ondersteuning 4 | Opera Android Volledige ondersteuning Ja | Safari iOS Volledige ondersteuning Ja | Samsung Internet Android Volledige ondersteuning Ja |
Legende
Volledige ondersteuning Volledige ondersteuning Zie implementatienotities. Zie implementatienotities.Zie ook
- Andere elementen die semantiek op tekstniveau overbrengen: element (of ankerelement), met zijn href-attribuut, creëert een hyperlink naar webpagina's, bestanden, e-mailadressen, locaties op dezelfde pagina of iets anders dat een URL kan adresseren."> , !} , ) geeft aan dat de inhoud ervan van groot belang, ernst of urgentie is. Browsers geven de inhoud doorgaans vetgedrukt weer."> , vertegenwoordigt het element kanttekeningen en kleine lettertjes, zoals copyright en juridische tekst, onafhankelijk van de gestileerde presentatie ervan. Standaard wordt de tekst erin één lettergrootte klein weergegeven, bijvoorbeeld van klein naar x-klein."> , ) wordt gebruikt om een verwijzing naar een geciteerd creatief werk te beschrijven, en moet de titel van dat werk bevatten."> , element geeft aan dat de ingesloten tekst een kort inline citaat is. De meeste moderne browsers implementeren dit door de tekst tussen aanhalingstekens te plaatsen. ">
, ) wordt gebruikt om aan te geven dat de term wordt gedefinieerd binnen de context van een definitiezin of zin."> , vertegenwoordigt element een specifieke periode.">
- Het verouderde element, whose responsibilities were folded into !}
Het internet is tegenwoordig steeds semantischer. Maar wat betekent ‘semantisch’? Waarom is dit belangrijk?
Semantische HTML drukt de betekenis van een document uit. Het gaat meer om de tekst dan om hoe deze eruit ziet. Goede semantische opmaak helpt zowel mensen als computers de inhoud van een document en de context ervan beter te begrijpen.
Semantische markup is veel gemakkelijker te interpreteren. Het is zoekmachine optimalisatie vriendelijk. Werkt prima met moderne browsers, waardoor de hoeveelheid code die nodig is om inhoud uit te drukken wordt verminderd en de leesbaarheid van die code wordt vergroot.
Oké, semantische markup is goed, maar hoe gebruik je het? De beste plaats om te beginnen is door gewone tags te vervangen door expressievere tags. Laten we eens kijken naar acht elementen waarmee je aan dit spel kunt beginnen.
Net als zijn blokvormige neef
, label
gebruikt om citatie aan te geven.
Waarom gebruik je niet gewoon aanhalingstekens? Aanhalingstekens impliceren niet altijd een citaat. Soms worden ze gebruikt om nadruk te leggen, ironisch te zijn of om de naam van iets aan te duiden – en in deze context worden ze correct gebruikt. Als je echter iets citeert,
geeft duidelijk uw intentie weer.
En
In de goede oude tijd, tags En aangegeven tekst respectievelijk cursief en vetgedrukt. Toen het idee om semantiek en representatie te scheiden steeds meer terrein begon te winnen, werden deze tags met argwaan bekeken. Ze werden vervangen door tags En , wat respectievelijk nadruk en sterke nadruk aangeeft.In HTML5 hebben deze tags eindelijk een duidelijke semantische interpretatie. Label Tekst met een andere toon of sfeer wordt gemarkeerd. Dit is bijvoorbeeld handig voor het beschrijven van gedachten of technische termen. Label markeert tekst die stilistisch verschilt van gewone tekst, maar geen duidelijke semantische betekenis heeft. Hoe verschilt dit van het gebruik ervan? ? De sleutel is dat heeft geen semantisch verschillende betekenis.
gebruikt voor afkortingen! Het kan vooral handig zijn in documenten waar er veel zijn. Deze tag heeft een optioneel attribuut titel, waarin u de volledige versie van de tekst kunt aangeven.lol Idd g2g ttyl
Laten we eens kijken naar het klassieke datumlokalisatieprobleem. In de VS wordt 5 oktober 2013 geschreven als 10/05/13, in Groot-Brittannië is het 05/10/13, in Zuid-Afrika is het 2013/10/05 en in Rusland is het 05/10/13. Al deze opties maken het uiterst moeilijk om datums automatisch te herkennen.Label Hiermee kunt u de datum en tijd opgeven in een machineleesbaar formaat. Het vorige voorbeeld zou er ongeveer zo uit kunnen zien: . HTML-parsers kunnen de datum nauwkeurig begrijpen, ongeacht het formaat waarin we deze hebben opgegeven. Label maakt het ook mogelijk om optioneel de tijd in 24-formaat op te geven: ;
Heb je dit ooit gedaan?
Driehonderd pagina's saaie, nutteloze tekst. Het enige dat je moet weten en dat je nooit meer zult kunnen vinden als je het niet benadrukt. Nog meer saaie dingen...
Niet meer. Er verscheen een element in HTML5 , waarmee tekst wordt gemarkeerd die vanwege het belang ervan is gemarkeerd voor referentiedoeleinden.Ja, . Je gebruikt waarschijnlijk , , misschien zelfs , heb je ooit andere soorten gebruikt? In HTML5 kan worden gebruikt met een hele reeks nieuwe typen:
- nummer
- bereik
- zoekopdracht
- kleur
Doe dat niet nog een keer! Hiervoor is er , wat een ongeordende lijst met opdrachten is. Deze tag heeft een attribuut type, die de volgende waarden kan aannemen: pop-up of werkbalk.
Bonus
De meeste front-end-ontwikkelaars gebruiken HTML bij het schrijven, maar velen kennen de ware betekenis ervan niet. Een vaste spatie breekt geen lijn. Dit betekent dat als twee woorden met elkaar zijn verbonden door een niet-afbrekende spatie, ze altijd samen op dezelfde regel staan. Soms is dit erg belangrijk. Hier zijn enkele voorbeelden:- Eenheden: 12 m/s
- Tijd: 20.00 uur
- Eigennaam: Dairy Queen
Tot slot
HTML wordt met de dag semantischer. Het gebruik van al deze elementen is een goed begin bij het schrijven van meer toegankelijke, leesbare markeringen. Voor een completer beeld, neem een kijkjeLaten we onze aandacht richten op het onderwerp afkortingen op webpagina's, of beter gezegd, de begrijpelijkheid van deze afkortingen voor lezers. In dit artikel worden de abbr- en acroniem-tags besproken en de nuances die daarmee gepaard gaan.
Aandacht!!! In de HTML5-specificatie is het element acroniem volledig verouderd verklaard en sterk aanbevolen om buiten gebruik te worden gesteld. In plaats daarvan wordt voorgesteld om het element te gebruiken afkorting(verduidelijkingen gedateerd 10 november 2011) .
Terminalologie begrijpen
Een afkorting (Italiaanse abbreviatura - afkorting, van Latijnse abbrevio - ik verkort) is een verkorte vorm van een woord of een groep woorden, gebruikt in plaats van een heel woord of een hele zin. Bijvoorbeeld: WWW, HTTP, URI, afk. enz. Een acroniem (Grieks akros - hoog, onyma - naam) is een afkorting gevormd uit delen van woorden van de originele zin (meestal beginletters), uitgesproken als een enkel woord, en niet letter voor letter, zoals andere soorten afkortingen. Bijvoorbeeld: modem, radar of laser.Afkortingen en acroniemen moeten te allen tijde voor iedereen begrijpelijk zijn.
Heel vaak gebruiken we verschillende afkortingen, variërend van “zamkompomorde” tot “ASS” (dit is helemaal niet wat je denkt). Maar vaak hebben veel mensen ook geen idee wat deze acroniemen betekenen. Daarom moet u, wanneer u een term gebruikt die een afkorting of acroniem is, deze uitleggen. Bovendien, als je een term in het begin hebt geïntroduceerd en uitgelegd, betekent dit niet dat iemand de betekenis ervan na 2 minuten niet zal vergeten. Daarom moeten verklaringen altijd dichtbij zijn;
HTML-tags En
HTML 4 biedt ons twee logische opmaakelementen die worden gebruikt om afkortingen en acroniemen te markeren: respectievelijk abbr en acroniem. Deze tags hebben een title-attribuut dat uitleg geeft over de term. Elke normale browser zal, wanneer u de muis over een dergelijke term beweegt, een tooltip weergeven die wordt gespecificeerd door het titelattribuut.
Voorbeeld: WWW-modem
WWW Modem
Billy die niet van W3C houdt
IE (tot versie 6) ondersteunt de ABBR-tag niet(sorry dat ik dit meteen doe, zonder voorbereiding :-)
In de lijst met elementen die hem bekend zijn, wordt alleen het ACRONIEM-element aangegeven. Maar ik weet zeker dat dit in de zevende versie van de browser zal worden opgelost.
Natuurlijk kunt u dit opgeven en de acroniemtag gebruiken in plaats van de abbr-tag, maar wees dan niet verrast als de stemagent van de gebruiker de alfabetische afkorting URI niet letter voor letter uitspreekt, maar in één woord, en u krijgt de naam Uri uit de film “Adventures of Electronics”. Maar u kunt een oplossing vinden door bijvoorbeeld een SPAN-element in de ABBR in te voegen:
CSS
En het is beter om dit proces te automatiseren door invoegingen uit te voeren met behulp van een script na het laden van het document en alleen voor IE. En wat heel belangrijk is, u hoeft niet te veranderen juist brontekst van het document.
Laten we een CSS-truc maken
Omdat abbr en acroniem logische opmaakelementen zijn, kunnen browsers deze anders op de pagina weergeven. Mozilla Firefox en Opera geven deze elementen bijvoorbeeld weer met zwarte onderstrepingen in de vorm van punten, Konqueror geeft ze cursief weer en IE markeert ze niet visueel (acroniem).
Daarom zou het geen kwaad om stijlen in te stellen die de weergave van deze elementen in verschillende browsers zouden verenigen.
Bijvoorbeeld zoals dit:
AFBR, ACRONIEM (
rand-onder: 1px gestippeld #F04B2D;
cursor: hulp;
lettertype: cursief;
Beschrijving
Label geeft aan dat de reeks tekens een afkorting is. Met behulp van het titelattribuut wordt de afkorting ontcijferd, waardoor mensen die er niet bekend mee zijn de afkorting kunnen begrijpen. Bovendien indexeren zoekmachines de volledige tekstversie van de afkorting, wat kan worden gebruikt om de ranking van het document te verbeteren.
Browsers markeren de tekst binnenin niet , met uitzondering van Opera vóór versie 15, dat gestippelde onderstrepingen aan tekst toevoegt.
Syntaxis
TekstKenmerken
Voegt een tooltip toe aan de tekst waarin u de afkorting kunt uitleggen.Afsluitende tag
Vereist.
HTML5 IE Cr Op Sa Fx
CGI geeft het protocol aan waarmee externe programma's communiceren met de webserver. Met CGI kunt u programma's in elke programmeertaal op de server uitvoeren en het resultaat van hun acties als webpagina weergeven.
Het resultaat van dit voorbeeld wordt getoond in Fig. 1.
Rijst. 1. Type tooltip wanneer u met de muis over de afkortingstekst beweegt
Browsers
Internet Explorer-browser tot versie 6 ondersteunt de tag niet , wordt aanbevolen om in plaats daarvan de tag te gebruiken .
Het code-element wordt gebruikt om computercode of een programmeertaal zoals PHP, JavaScript, CSS, XML, enz. te specificeren. Voor korte fragmenten binnen een zin kunt u het element eenvoudig als volgt rond het codefragment plaatsen:
klik rechtstreeks in de HTML.
Voor grotere codevoorbeelden die meerdere regels beslaan, kun je vooraf opgemaakte blokken gebruiken, zoals je ziet in Lezing 15, ‘Tekstinhoud opmaken in HTML’.
Hoewel er geen specifieke methode is om aan te geven welke programmeertaal of de code wordt weergegeven in een code-element, dan kan het class-attribuut worden gebruikt. Een gebruikelijke praktijk (vermeld in het HTML 5-concept) is om het taalvoorvoegsel te gebruiken en vervolgens de naam van de taal toe te voegen. Het bovenstaande voorbeeld zou er dus als volgt uitzien:
Het is een slechte vorm om gebeurtenishandlers zoals klik rechtstreeks in de HTML.
Sommige programmeertalen hebben namen die niet gemakkelijk in klassen weer te geven zijn, zoals C# (C-sharp). De juiste manier om in dit geval te schrijven is "class="lingual-c\#"" , wat voor problemen kan zorgen en tot typefouten kan leiden. Ik zou aanraden een klasse te gebruiken die alleen uit letters en koppeltekens bestaat, en deze in zijn geheel te schrijven. Daarom is het in dit geval beter om "class="lingual-csharp"" te gebruiken.
Uitvoer van computerinteractie
Twee elementen monster en kbd kunnen worden gebruikt voor invoer- en uitvoerinteractie met een computerprogramma. Bijvoorbeeld:
Een veelgebruikte methode om te bepalen of een computer met internet is verbonden, is door het computerprogramma te gebruiken ping om te zien of een computer waarschijnlijk actief is, bereikbaar is.
kittaghy% ping -o google.com PING google.com (64.233.187.99): 56 databytes 64 bytes van 64.233.187.99: icmp_seq=0 ttl=242 tijd=108.995 ms --- google.com pingstatistieken --- 1 pakketten verzonden, 1 pakketten ontvangen, 0 % pakketverlies retour min/avg/max/stddev = 108,995/108,995/108,995/0,000 ms
Element monster geeft een voorbeelduitvoer van een computerprogramma aan. Zoals dit voorbeeld laat zien, kunnen verschillende uitvoertypen worden gespecificeerd met behulp van het class-attribuut. Er bestaat echter geen algemeen aanvaarde overeenstemming over de soorten klassen die moeten worden gebruikt.
Het kbd-element specificeert de invoer van de interactie van de gebruiker met de computer. Hoewel dit traditioneel toetsenbordinvoer is (vandaar de afkorting "kbd"), moet het ook worden gebruikt om andere soorten invoer aan te duiden, zoals spraakinvoer.
Variabelen
Het var-element wordt gebruikt om variabelen in tekstinhoud op te geven. Het kan algebraïsche wiskundige uitdrukkingen bevatten of in programmacode staan. Bijvoorbeeld:
De waarde van X op 3 X+2=14 is 4.
Mijn $ welkom= "Hallo wereld!";Citaat
Het cite-element wordt gebruikt om aan te geven waar inhoud in de buurt vandaan komt. Wanneer u een persoon, boek of andere publicatie citeert, of in het algemeen wanneer u mensen naar een andere bron verwijst, moet die bron binnen het cite-element worden geplaatst. Bijvoorbeeld:
Het gezegde Alles moet zo eenvoudig mogelijk worden gemaakt, maar niet eenvoudiger
wordt er vaak aan toegeschreven Albert Einstein, maar het is eigenlijk een parafrasering van een citaat dat veel minder gemakkelijk te begrijpen is.
