Anmäl dig till Roborock Challenge!
Forum Mjukvara Programmering och digitalt skapande Tråd Inlägg

Hjälp mig att förstå <em> taggen i HTML

1
Skriv svar
Permalänk
Medlem
●

Hjälp mig att förstå <em> taggen i HTML

Hallå där,

Jag har precis börjat plugga webbutveckling men har fastnat vid <em> taggen. Det var ett kapitel som handlade om:

- <strong>
- <b>
- <em>
- <i>

Rätta mig gärna om jag har fel nu:
<strong> taggen används för att dra läsarens/screen readerns’ uppmärksamhet till ett ord eller en mening som man vill förmedla som viktig, allvarlig eller brottom.

<b> taggen, likt <strong> taggen, använder man för att dra läsaren/screen readerns’ uppmärksamhet men ordet eller meningen har ingen vidare mening bakom sig - man använder den endast för att få något att sticka ut.

<em> taggen. Här har vi den tag som jag inte riktigt har fått ett grepp om. Man använder taggen för ”stress emphasis”, vilket betyder att du betonar ett visst ord eller mening - du lägger ett extra ”tryck” bakom ordet.
Man vad menas med det? Kan någon snälla förklara för mig som om jag vore en tre åring! Jag har försökt läsa om taggen på MDNs’ sida men jag förstår faktiskt inte.

<i> taggen. Även den lite oklar för mig men jag tror den används för att markera ett ord/mening som är på ett annat språk, en båt som har ett namn eller en datorkomponent.

Exempel: Adam var ute på vattnet igår.
Här använder man <i> taggen för att förmedla att Adam inte är en person, utan ett namn på en båt?
Ser fram emot era svar.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Utseendemässigt är det nog redundant då typsnitt bara har bold och italic, det blir väl något av det,
troligtvis ville man använda italic för tex citat men med en tag som mer pekar på funktion och inte stil,
det som används utöver det är väl <pre> för kod i ett typsitt med konstant storlek.

Strong, em, blink etc är i praktiken helt ersatt av div för att definiera block med id eller class som sedan stylas med css.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Alltså, det finns inte en chans att beskriva det här så att en treåring skulle förstå. Men... HTML handlar om att beskriva den semantiska uppbyggnaden av ett dokument och inte hur det ska renderas. Ändå fanns taggarna <i> och <b> med från början, som säger att en text ska renderas som italic och bold. Därför införde man taggarna <em> och <strong> som har en semantisk mening, och det är lämpligt att rendera dem på samma sätt som <i> resp. <b>.

Visa signatur

Bra, snabbt, billigt; välj två.

Ljud
PC → ODAC/O2 → Sennheiser HD650/Ultrasone PRO 900/...
PC → S.M.S.L SA300 → Bowers & Wilkins 607

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Definition and Usage
The <em> tag is used to define emphasized text. The content inside is typically displayed in italic.
A screen reader will pronounce the words in <em> with an emphasis, using verbal stress.

Tycker det handler om att b och i taggar tolkas direkt, men em tolkas indirekt, typ dealers choice. I texten ovan verkar det som att den har en större effekt för skärmläsare än det visuella.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

<strong> och <em> är semantiska element, medan <b> och <i> är icke-semantiska element. I en vanlig webbläsare är det i princip ingen skillnad, men för en screen reader har semantiska element en grammatisk betydelse.

Fetstil används för att markera/uppmärksamma (visuellt) ett ord eller fras, medan kursivering används för att betona (verbalt) delar av en text/mening eller titlar/namn osv.

Visa signatur

MacBook Pro 14" | M1 Pro 10/16-Core | 32GB | 1TB
Legion Pro 16" | Ryzen 7 5800H | 16 GB | 1TB | GeForce RTX 3060

Redigera
Citera flera Citera
Permalänk
Avstängd
●
Skrivet av iFraja:

<strong> och <em> är semantiska element, medan <b> och <i> är icke-semantiska element. I en vanlig webbläsare är det i princip ingen skillnad, men för en screen reader har semantiska element en grammatisk betydelse.

Fetstil används för att markera/uppmärksamma (visuellt) ett ord eller fras, medan kursivering används för att betona (verbalt) delar av en text/mening eller titlar/namn osv.

Gå till inlägget

Precis. Idag använder man för det mesta div:ar till allt sånt dock.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Sinand10:

<em> taggen. Här har vi den tag som jag inte riktigt har fått ett grepp om. Man använder taggen för ”stress emphasis”, vilket betyder att du betonar ett visst ord eller mening - du lägger ett extra ”tryck” bakom ordet.
Man vad menas med det? Kan någon snälla förklara för mig som om jag vore en tre åring! Jag har försökt läsa om taggen på MDNs’ sida men jag förstår faktiskt inte.

Gå till inlägget

Denna del av din frågeställning blir, åtminstone som jag förstår den, egentligen mestadels separat från allt vad HTML heter, HTML-elementet har bara tvingat dig att tänka i dessa banor?

Om du ville ha exempel på vad som avses rent principiellt så har vi här tre meningar vars betydelse inte är identisk (tagna direkt ur specen):
"<em>Cats</em> are cute animals."
"Cats <em>are</em> cute animals."
"Cats are <em>cute</em> animals."

Utöver exemplen hänvisar jag till vad iFraja säger, dvs <em> och <strong> har utöver sin visuella effekt även en specifik betydelse sett till hur texten ska tolkas, <i> och <b> är däremot rent visuella (och kan förstås komma att tolkas på något sätt av en människa, men markup säger ingenting om vad den tolkningen skall vara).

Rekommenderar även:
https://html.spec.whatwg.org/multipage/text-level-semantics.h...
https://html.spec.whatwg.org/multipage/text-level-semantics.h...

Visa signatur

Desktop spel m.m.: Ryzen 9800X3D || MSI X870 Tomahawk Wifi || MSI Ventus 3x 5080 || Gskill FlareX 6000 64GB || Kingston KC3000 2TB || Samsung 970 EVO Plus 2TB || Samsung 960 Pro 1TB || Fractal Torrent || Asus PG42UQ 4K OLED
Arbetsstation: Ryzen 7945HX || Minisforum BD790i || Asus Proart 4070 Ti Super || Kingston Fury Impact 5600 65 GB || WD SN850 2TB || Samsung 990 Pro 2TB || Fractal Ridge
Proxmox server: Ryzen 5900X || Asrock Rack X570D4I-2T || Kingston 64GB ECC || WD Red SN700 1TB || Blandning av WD Red / Seagate Ironwolf för lagring || Fractal Node 304

Redigera
Citera flera Citera
1
Skriv svar