Ik had vroeger een baas die hield, hield, hield, hield woorden te benadrukken. Dit was lang geleden voordat we een WYSIWYG-editor gebruikten en ik die rotzooi met de hand moest coderen.
<p> I used to have this boss who <em>loved</em>, <strong>loved</strong>, <strong><em>loved</em></strong>, <strong><em><u>loved</u></em></strong> to emphasize words.
</p>
(Laten we niet ingaan op de kleuren die hij gebruikte voor even MOER nadruk.)
Het schrijven van al die markeringen voelde nooit geweldig. De moeite die het kostte, zeker, wat dan ook. Maar is het wel een goed idee om overload content toe te voegen met dubbele — of meer! - accenten?
Verschillende tags brengen verschillende accenten over
Om te beginnen, de <strong>
en <em>
tags zijn ontworpen voor verschillende toepassingen. We hebben ze terug in HTML5, waar:
Dus, <strong>
geeft de inhoud meer gewicht in de zin dat het suggereert dat de inhoud belangrijk of urgent is. Bedenk een waarschuwing:
Waarschuwing: De volgende inhoud is gemarkeerd omdat deze geweldig is.
Het kan verleidelijk zijn om ernaar te reiken <em>
om hetzelfde te doen. Cursieve tekst kan toch de aandacht trekken. Maar het is echt bedoeld als een hint om meer nadruk te leggen bij het lezen van de inhoud ervan. Hier zijn bijvoorbeeld twee versies van dezelfde zin met de nadruk op verschillende plaatsen:
<p>I ate the <em>entire</em> plate of burritos.</p>
<p>I ate the entire <em>plate</em> of burritos.</p>
Beide voorbeelden benadrukken nadruk, maar op verschillende woorden. En ze zouden anders klinken als je ze hardop zou voorlezen. Dat maakt <em>
een geweldige manier om toon in uw schrijven uit te drukken. Het verandert de betekenis van de zin op een manier die <strong>
doet niet.
Visuele nadruk versus semantische nadruk
Dat zijn twee dingen die je moet afwegen bij het benadrukken van inhoud. Er zijn bijvoorbeeld genoeg gevallen waarin u inhoud cursief moet maken zonder de betekenis van de zin te beïnvloeden. Maar die kunnen worden afgehandeld met andere tags die cursief worden weergegeven:
<i>
: Dit is de klassieker! Vóór HTML5 werd dit gebruikt om nadruk te leggen met overal cursief. Nu wordt het puur gebruikt om inhoud visueel cursief te maken zonder de semantische betekenis te veranderen.<cite>
: De bron van een feit of cijfer aangeven. ("Bron: CSS-trucs")<address>
: Gebruikt om contactgegevens te markeren, niet alleen fysieke adressen, maar ook zaken als e-mailadressen en telefoonnummers. (
)
Hij zal hetzelfde meemaken <strong>
. In plaats van het te gebruiken voor het opmaken van tekst die u zwaarder wilt laten lijken, is het een beter idee om de klassieker te gebruiken <b>
tag voor vetgedrukt om te voorkomen dat er extra betekenis wordt gegeven aan inhoud die deze niet nodig heeft. En vergeet niet dat sommige elementen, zoals koppen, al vet worden weergegeven, dankzij de standaardstijlen van de browser. Het is niet nodig om nog meer nadruk te leggen.
Cursief gebruiken in inhoud met nadruk (en vice versa)
Er zijn legitieme gevallen waarin u mogelijk een deel van een regel cursief moet maken die al is benadrukt. Of misschien de nadruk leggen op een stuk tekst dat al cursief is weergegeven.
Een blockquote is misschien een goed voorbeeld. Ik heb vaak gezien dat ze cursief zijn weergegeven voor stijl, ook al doen standaardbrowserstijlen het niet:
blockquote { font-style: italic;
}
Wat als we een filmtitel in die blockquote moeten vermelden? Dat moet cursief worden weergegeven. Er is geen nadruk op stress nodig, dus een <i>
label zal doen. Maar het is nog steeds raar om iets cursief te maken als het al zo is weergegeven:
<blockquote> This movie’s opening weekend performance offers some insight in to its box office momentum as it fights to justify its enormous budget. In its first weekend, <i>Avatar: The Way of Water</i> made $134 million in North America alone and $435 million globally.
</blockquote>
In een situatie waarin we iets cursief maken in cursieve inhoud zoals deze, is het de bedoeling dat we dat doen verwijder de cursivering van het geneste element... <i>
in dit geval.
blockquote i { font-style: normal;
}
Query's in containerstijl zal super handig zijn om al deze instanties te pakken te krijgen als we ze krijgen:
blockquote { container-name: quote; font-style: italic;
} @container quote (font-style: italic) { em, i, cite, address { font-style: normal; }
}
Dit kleine fragment evalueert de blockquote om te zien of dat zo is font-style
is ingesteld op italic
. Als dat zo is, zal het ervoor zorgen dat de <em>
, <i>
, <cite>
en <address>
elementen worden weergegeven als normale tekst, met behoud van de eventuele semantische betekenis.
Maar terug naar nadruk binnen nadruk
Ik zou niet nestelen <strong>
binnen <em>
soortgelijk:
<p>I ate the <em><strong>entire</strong></em> plate of burritos.</p>
…of nestelen <em>
binnen <strong>
in plaats daarvan:
<p>I ate the <em><strong>entire</strong></em> plate of burritos.</p>
De weergave is prima! En het maakt niet uit in welke volgorde ze staan... althans in moderne browsers. Jennifer Kyrnin vermeldt dat sommige browsers geven alleen de tag weer die het dichtst bij de tekst staat, maar dat kwam ik nergens tegen in mijn beperkte tests. Maar iets om op te letten!
De reden dat ik niet de ene vorm van nadruk in de andere zou nesten, is omdat het gewoon niet nodig is. Er is geen grammaticale regel die dit vereist. Net als uitroeptekens is één vorm van nadruk voldoende, en je zou degene moeten gebruiken die overeenkomt met wat je zoekt, of het nu gaat om visuele, gewichts- of aangekondigde nadruk.
En hoewel sommige schermlezers in staat zijn om benadrukte inhoud aan te kondigen, zullen ze de opmaak niet lezen met enige extra belangrijkheid of nadruk. Dus ook geen extra toegankelijkheidsvoordelen, voor zover ik weet.
Maar ik wil echt alle nadruk!
Als je in de positie bent waar je baas is zoals de mijne en wil ALLE de nadruk, zou ik de juiste HTML-tag zoeken voor het soort nadruk, en dan de rest van de stijlen toepassen met een mix van tags die geen invloed hebben op de semantiek met CSS om rekening te houden met alles wat browserstijlen niet aankunnen.
<style> /* If `em` contains `b` or `u` tags */ em:has(b, u) { color: #f8a100; }
</style> <p> I used to have this boss who <em>loved</em>, <strong>loved</strong>, <strong><em>loved</em></strong>, <strong><em><u>loved</u></em></strong> to emphasize words.
</p>
Ik zou het zelfs kunnen doen met de <strong>
tag ook als verdedigingsmaatregel:
/* If `em` contains `b` or `u` tags */
em:has(b, u),
/* If `strong` contains `em` or `u` tags */
strong:has(i, u) { color: #f8a100;
}
Zolang we verdediging spelen, kunnen we fouten identificeren waarbij accenten binnen accenten zijn genest door ze rood te markeren of zoiets:
/* Highlight semantic emphases within semantic emphases */
em:has(strong),
strong:has(em) { background: hsl(0deg 50% 50% / .25); border: 1px dashed hsl(0deg 50% 50% / .25);
}
Dan zou ik waarschijnlijk dat fragment uit de laatste sectie gebruiken dat de standaard cursieve stijl van een element verwijdert wanneer het is genest in een ander cursief element.
Nog iets anders?
Misschien:
- Door SEO aangedreven content en PR-distributie. Word vandaag nog versterkt.
- Platoblockchain. Web3 Metaverse Intelligentie. Kennis versterkt. Toegang hier.
- Bron: https://css-tricks.com/the-double-emphasis-thing/
- 1
- 11
- 7
- 9
- 98
- a
- de toegankelijkheid
- Account
- Extra
- adres
- adressen
- invloed hebben op
- die van invloed
- Na
- Alles
- alleen
- al
- Amerika
- en
- aangekondigd
- Het aankondigen
- Nog een
- overal
- Solliciteer
- Avatar
- terug
- achtergrond
- omdat
- vaardigheden
- wezen
- Betere
- Beetje
- pin
- grens
- BOSS
- Box camera's
- box office
- browser
- browsers
- begroting
- oproepen
- in staat
- geval
- gevallen
- Wijzigingen
- veranderende
- klassiek
- kleur
- contact
- bevat
- content
- CSS
- Standaard
- Verdediging
- defensief
- ontworpen
- anders
- Nee
- Dont
- verdubbelen
- inspanning
- beide
- geeft je de mogelijkheid
- nadruk
- benadrukken
- benadrukte
- enorm
- genoeg
- Geheel
- fouten
- Zelfs
- voorbeeld
- voorbeelden
- uitdrukkelijk
- extra
- gevechten
- Figuur
- Voornaam*
- markeerde
- volgend
- formulier
- oppompen van
- krijgen
- geeft
- Vrijgevigheid
- Wereldwijd
- Go
- gaan
- goed
- groot
- handvat
- hulp
- hier
- Markeer
- markeren
- HTML
- HTTPS
- idee
- identificeren
- belang
- belangrijk
- in
- informatie
- inzicht
- verkrijgen in plaats daarvan
- IT
- Jennifer
- Achternaam*
- Beperkt
- Lijn
- Elke kleine stap levert grote resultaten op!
- locaties
- lang
- Kijk
- gemaakt
- maken
- MERKEN
- Mark
- Materie
- betekenis
- maatregel
- vermeldt
- macht
- miljoen
- Modern
- stuwkracht
- meer
- filmpje
- Films
- NAB
- Noodzaak
- Nest
- een
- noorden
- Noord-Amerika
- nummers
- Aanbod
- Kantoor
- EEN
- opening
- bestellen
- Overige
- deel
- prestatie
- perks
- phone
- Fysiek
- plaats
- Plato
- Plato gegevensintelligentie
- PlatoData
- spelen
- Overvloed
- punten
- positie
- waarschijnlijk
- beschermd
- puur
- bereiken
- Lees
- lezers
- reden
- Rood
- niet vergeten
- weergave
- REST
- behoudende
- Regel
- dezelfde
- scherm
- schermlezers
- sectie
- semantiek
- zin
- zin
- reeks
- moet
- eenvoudigweg
- situatie
- So
- sommige
- iets
- Geluid
- bron
- Still
- spanning
- sterke
- stijl
- Stelt voor
- Super
- vermeend
- TAG
- testen
- De
- De Bron
- ding
- spullen
- keer
- Titel
- naar
- TONE
- ook
- waar
- dringend
- .
- waarschuwing
- Bekijk de introductievideo
- weekend
- wegen
- gewicht
- Wat
- of
- en
- WIE
- wil
- binnen
- zonder
- woorden
- zou
- het schrijven van
- You
- Your
- zephyrnet