davidbgk
/
larlet-fr-david-cache
Sledovat 1
Oblíbit 0
Rozštěpit 0
Zdrojový kód Vydání 0 Aktivita
A place to cache linked articles (think custom and personal wayback machine)
Nelze vybrat více než 25 témat Téma musí začínat písmenem nebo číslem, může obsahovat pomlčky („-“) a může být dlouhé až 35 znaků.
169 Revize
1 Větev
Strom: df9a5c5108
Větve Značky
${ item.name }
Vytvořit větev ${ searchTerm }
z „df9a5c5108“
${ noResults }
larlet-fr-david-cache/cache/755a9a5006ccdc5a0595ee76eb0.../index.html

index.html 31KB
Surový Blame Historie

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703 
  1. <!doctype html><!-- This is a valid HTML5 document. -->

  2. <!-- Screen readers, SEO, extensions and so on. -->

  3. <html lang=fr>

  4. <!-- Has to be within the first 1024 bytes, hence before the <title>

  5.   See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->

  6. <meta charset=utf-8>

  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->

  8. <!-- The viewport meta is quite crowded and we are responsible for that.

  9.   See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->

  10. <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">

  11. <!-- Required to make a valid HTML5 document. -->

  12. <title>You're using &lt;em&gt; wrong (archive) — David Larlet</title>

  13. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->

  14. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">

  15. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">

  16. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">

  17. <link rel="manifest" href="/manifest.json">

  18. <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">

  19. <link rel="shortcut icon" href="/static/david/icons/favicon.ico">

  20. <meta name="apple-mobile-web-app-title" content="David Larlet">

  21. <meta name="application-name" content="David Larlet">

  22. <meta name="msapplication-TileColor" content="#da532c">

  23. <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">

  24. <meta name="theme-color" content="#f0f0ea">

  25. <!-- That good ol' feed, subscribe :p. -->

  26. <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  27. 

  28.   <meta name="robots" content="noindex, nofollow">

  29.   <meta content="origin-when-cross-origin" name="referrer">

  30.   <!-- Canonical URL for SEO purposes -->

  31.   <link rel="canonical" href="https://logrocket.com/blog/youre-using-em-wrong/">

  32. 

  33. <style>

  34. /* http://meyerweb.com/eric/tools/css/reset/ */

  35. html, body, div, span,

  36. h1, h2, h3, h4, h5, h6, p, blockquote, pre,

  37. a, abbr, address, big, cite, code,

  38. del, dfn, em, img, ins,

  39. small, strike, strong, tt, var,

  40. dl, dt, dd, ol, ul, li,

  41. fieldset, form, label, legend,

  42. table, caption, tbody, tfoot, thead, tr, th, td,

  43. article, aside, canvas, details, embed,

  44. figure, figcaption, footer, header, hgroup,

  45. menu, nav, output, ruby, section, summary,

  46. time, mark, audio, video {

  47.   margin: 0;

  48.   padding: 0;

  49.   border: 0;

  50.   font-size: 100%;

  51.   font: inherit;

  52.   vertical-align: baseline;

  53. }

  54. /* HTML5 display-role reset for older browsers */

  55. article, aside, details, figcaption, figure,

  56. footer, header, hgroup, menu, nav, section { display: block; }

  57. body { line-height: 1; }

  58. blockquote, q { quotes: none; }

  59. blockquote:before, blockquote:after,

  60. q:before, q:after {

  61.   content: '';

  62.   content: none;

  63. }

  64. table {

  65.   border-collapse: collapse;

  66.   border-spacing: 0;

  67. }

  68. 

  69. /* http://practicaltypography.com/equity.html */

  70. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */

  71. /* https://www.filamentgroup.com/lab/js-web-fonts.html */

  72. @font-face {

  73.   font-family: 'EquityTextB';

  74.   src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),

  75.        url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');

  76.   font-weight: 300;

  77.   font-style: normal;

  78.   font-display: swap;

  79. }

  80. @font-face {

  81.   font-family: 'EquityTextB';

  82.   src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),

  83.        url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');

  84.   font-weight: 300;

  85.   font-style: italic;

  86.   font-display: swap;

  87. }

  88. @font-face {

  89.   font-family: 'EquityTextB';

  90.   src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),

  91.        url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');

  92.   font-weight: 700;

  93.   font-style: normal;

  94.   font-display: swap;

  95. }

  96. 

  97. @font-face {

  98.   font-family: 'ConcourseT3';

  99.   src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),

  100.        url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');

  101.   font-weight: 300;

  102.   font-style: normal;

  103.   font-display: swap;

  104. }

  105. 

  106. 

  107. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */

  108. body {

  109.   /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */

  110.   font-family: "EquityTextB", Palatino, serif;

  111.   background-color: #f0f0ea;

  112.   color: #07486c;

  113.   font-kerning: normal;

  114.   -moz-osx-font-smoothing: grayscale;

  115.   -webkit-font-smoothing: subpixel-antialiased;

  116.   text-rendering: optimizeLegibility;

  117.   font-variant-ligatures: common-ligatures contextual;

  118.   font-feature-settings: "kern", "liga", "clig", "calt";

  119. }

  120. pre, code, kbd, samp, var, tt {

  121.   font-family: 'TriplicateT4c', monospace;

  122. }

  123. em {

  124.   font-style: italic;

  125.   color: #323a45;

  126. }

  127. strong {

  128.   font-weight: bold;

  129.   color: black;

  130. }

  131. nav {

  132.   background-color: #323a45;

  133.   color: #f0f0ea;

  134.   display: flex;

  135.   justify-content: space-around;

  136.   padding: 1rem .5rem;

  137. }

  138.   nav:last-child {

  139.     border-bottom: 1vh solid #2d7474;

  140.   }

  141.   nav a {

  142.     color: #f0f0ea;

  143.   }

  144.   nav abbr {

  145.     border-bottom: 1px dotted white;

  146.   }

  147. 

  148. h1 {

  149.   border-top: 1vh solid #2d7474;

  150.   border-bottom: .2vh dotted #2d7474;

  151.   background-color: #e3e1e1;

  152.   color: #323a45;

  153.   text-align: center;

  154.   padding: 5rem 0 4rem 0;

  155.   width: 100%;

  156.   font-family: 'ConcourseT3';

  157.   display: flex;

  158.   flex-direction: column;

  159. }

  160.   h1.single {

  161.     padding-bottom: 10rem;

  162.   }

  163.   h1 span {

  164.     position: absolute;

  165.     top: 1vh;

  166.     left: 20%;

  167.     line-height: 0;

  168.   }

  169.     h1 span a {

  170.       line-height: 1.7;

  171.       padding: 1rem 1.2rem .6rem 1.2rem;

  172.       border-radius: 0 0 6% 6%;

  173.       background: #2d7474;

  174.       font-size: 1.3rem;

  175.       color: white;

  176.       text-decoration: none;

  177.     }

  178. h2 {

  179.   margin: 4rem 0 1rem;

  180.   border-top: .2vh solid #2d7474;

  181.   padding-top: 1vh;

  182. }

  183. h3 {

  184.   text-align: center;

  185.   margin: 3rem 0 .75em;

  186. }

  187. hr {

  188.   height: .4rem;

  189.   width: .4rem;

  190.   border-radius: .4rem;

  191.   background: #07486c;

  192.   margin: 2.5rem auto;

  193. }

  194. time {

  195.   display: bloc;

  196.   margin-left: 0 !important;

  197. }

  198. ul, ol {

  199.   margin: 2rem;

  200. }

  201. ul {

  202.   list-style-type: square;

  203. }

  204. a {

  205.   text-decoration-skip-ink: auto;

  206.   text-decoration-thickness: 0.05em;

  207.   text-underline-offset: 0.09em;

  208. }

  209. article {

  210.   max-width: 50rem;

  211.   display: flex;

  212.   flex-direction: column;

  213.   margin: 2rem auto;

  214. }

  215.   article.single {

  216.     border-top: .2vh dotted #2d7474;

  217.     margin: -6rem auto 1rem auto;

  218.     background: #f0f0ea;

  219.     padding: 2rem;

  220.   }

  221.   article p:last-child {

  222.     margin-bottom: 1rem;

  223.   }

  224. p {

  225.   padding: 0 .5rem;

  226.   margin-left: 3rem;

  227. }

  228.   p + p,

  229.   figure + p {

  230.     margin-top: 2rem;

  231.   }

  232. 

  233. blockquote {

  234.   background-color: #e3e1e1;

  235.   border-left: .5vw solid #2d7474;

  236.   display: flex;

  237.   flex-direction: column;

  238.   align-items: center;

  239.   padding: 1rem;

  240.   margin: 1.5rem;

  241. }

  242.   blockquote cite {

  243.     font-style: italic;

  244.   }

  245.   blockquote p {

  246.     margin-left: 0;

  247.   }

  248. 

  249. figure {

  250.   border-top: .2vh solid #2d7474;

  251.   background-color: #e3e1e1;

  252.   text-align: center;

  253.   padding: 1.5rem 0;

  254.   margin: 1rem 0 0;

  255.   font-size: 1.5rem;

  256.   width: 100%;

  257. }

  258.   figure img {

  259.     max-width: 250px;

  260.     max-height: 250px;

  261.     border: .5vw solid #323a45;

  262.     padding: 1px;

  263.   }

  264. figcaption {

  265.   padding: 1rem;

  266.   line-height: 1.4;

  267. }

  268. aside {

  269.   display: flex;

  270.   flex-direction: column;

  271.   background-color: #e3e1e1;

  272.   padding: 1rem 0;

  273.   border-bottom: .2vh solid #07486c;

  274. }

  275.   aside p {

  276.     max-width: 50rem;

  277.     margin: 0 auto;

  278.   }

  279. 

  280. /* https://fvsch.com/code/css-locks/ */

  281. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  282.   font-size: 1rem;

  283.   line-height: calc( 1.5em + 0.2 * 1rem );

  284. }

  285. h1 {

  286.   font-size: 1.9rem;

  287.   line-height: calc( 1.2em + 0.2 * 1rem );

  288. }

  289. h2 {

  290.   font-size: 1.6rem;

  291.   line-height: calc( 1.3em + 0.2 * 1rem );

  292. }

  293. h3 {

  294.   font-size: 1.35rem;

  295.   line-height: calc( 1.4em + 0.2 * 1rem );

  296. }

  297. @media (min-width: 20em) {

  298.   /* The (100vw - 20rem) / (50 - 20) part

  299.      resolves to 0-1rem, depending on the

  300.      viewport width (between 20em and 50em). */

  301.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  302.     font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );

  303.     line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );

  304.     margin-left: 0;

  305.   }

  306.   h1 {

  307.     font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  308.     line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );

  309.   }

  310.   h2 {

  311.     font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  312.     line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );

  313.   }

  314.   h3 {

  315.     font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  316.     line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );

  317.   }

  318. }

  319. @media (min-width: 50em) {

  320.   /* The right part of the addition *must* be a

  321.      rem value. In this example we *could* change

  322.      the whole declaration to font-size:2.5rem,

  323.      but if our baseline value was not expressed

  324.      in rem we would have to use calc. */

  325.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  326.     font-size: calc( 1rem + .6 * 1rem );

  327.     line-height: 1.5em;

  328.   }

  329.   p, li, pre, details {

  330.     margin-left: 3rem;

  331.   }

  332.   h1 {

  333.     font-size: calc( 1.9rem + 1.5 * 1rem );

  334.     line-height: 1.2em;

  335.   }

  336.   h2 {

  337.     font-size: calc( 1.5rem + 1.5 * 1rem );

  338.     line-height: 1.3em;

  339.   }

  340.   h3 {

  341.     font-size: calc( 1.35rem + 1.5 * 1rem );

  342.     line-height: 1.4em;

  343.   }

  344.   figure img {

  345.     max-width: 500px;

  346.     max-height: 500px;

  347.   }

  348. }

  349. 

  350. figure.unsquared {

  351.   margin-bottom: 1.5rem;

  352. }

  353.   figure.unsquared img {

  354.     height: inherit;

  355.   }

  356. 

  357. 

  358. 

  359. @media print {

  360.   body { font-size: 100%; }

  361.   a:after { content: " (" attr(href) ")"; }

  362.   a, a:link, a:visited, a:after {

  363.     text-decoration: underline;

  364.     text-shadow: none !important;

  365.     background-image: none !important;

  366.     background: white;

  367.     color: black;

  368.   }

  369.   abbr[title] { border-bottom: 0; }

  370.   abbr[title]:after { content: " (" attr(title) ")"; }

  371.   img { page-break-inside: avoid; }

  372.   @page { margin: 2cm .5cm; }

  373.   h1, h2, h3 { page-break-after: avoid; }

  374.   p3 { orphans: 3; widows: 3; }

  375.   img {

  376.     max-width: 250px !important;

  377.     max-height: 250px !important;

  378.   }

  379.   nav, aside { display: none; }

  380. }

  381. 

  382. ul.with_columns {

  383.   column-count: 1;

  384. }

  385. @media (min-width: 20em) {

  386.   ul.with_columns {

  387.     column-count: 2;

  388.   }

  389. }

  390. @media (min-width: 50em) {

  391.   ul.with_columns {

  392.     column-count: 3;

  393.   }

  394. }

  395. ul.with_two_columns {

  396.   column-count: 1;

  397. }

  398. @media (min-width: 20em) {

  399.   ul.with_two_columns {

  400.     column-count: 1;

  401.   }

  402. }

  403. @media (min-width: 50em) {

  404.   ul.with_two_columns {

  405.     column-count: 2;

  406.   }

  407. }

  408. 

  409. .gallery {

  410.   display: flex;

  411.   flex-wrap: wrap;

  412.   justify-content: space-around;

  413. }

  414.   .gallery figure img {

  415.     margin-left: 1rem;

  416.     margin-right: 1rem;

  417.   }

  418.   .gallery figure figcaption {

  419.     font-family: 'ConcourseT3'

  420.   }

  421. 

  422. footer {

  423.   font-family: 'ConcourseT3';

  424.   display: flex;

  425.   flex-direction: column;

  426.   border-top: 3px solid white;

  427.   padding: 4rem 0;

  428.   background-color: #07486c;

  429.   color: white;

  430. }

  431.   footer > * {

  432.     max-width: 50rem;

  433.     margin: 0 auto;

  434.   }

  435.   footer a {

  436.     color: #f1c40f;

  437.   }

  438.   footer .avatar {

  439.     width: 200px;

  440.     height: 200px;

  441.     border-radius: 50%;

  442.     float: left;

  443.     -webkit-shape-outside: circle();

  444.     shape-outside: circle();

  445.     margin-right: 2rem;

  446.     padding: 2px 5px 5px 2px;

  447.     background: white;

  448.     border-left: 1px solid #f1c40f;

  449.     border-top: 1px solid #f1c40f;

  450.     border-right: 5px solid #f1c40f;

  451.     border-bottom: 5px solid #f1c40f;

  452.   }

  453. </style>

  454. 

  455. <h1>

  456.   <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>

  457.   You're using &lt;em&gt; wrong (archive)

  458.   <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>

  459. </h1>

  460. <section>

  461.   <article>

  462.     <h3><a href="https://logrocket.com/blog/youre-using-em-wrong/">Source originale du contenu</a></h3>

  463.     <p>It’s been a bumpy road that somehow got us misusing one of the most important text-level semantic tags.</p>

  464. 

  465. <p>In the dark ages of HTML, &lt;em&gt; was barely used at all, despite being part of the specs since really early on (<a href="http://www.ietf.org/rfc/rfc1866.txt" rel="noreferrer nofollow noopener noopener">HTML 2.0</a> standard, 1995). But at that point in time and for some years to come, (almost) no one was thinking of semantics or even separation of concerns. Italics were simply marked up with &lt;i&gt; tags, and we wouldn’t give it a second thought.</p>

  466. 

  467. <p>Then somewhere along the way, someone shouted <em>“Semantics!”</em> and everybody started to hate the poor little &lt;i&gt; tag like a bad neighbor. A really, <em>really</em> bad neighbor.</p>

  468. 

  469. <p>&lt;em&gt; was all the rage, with supposed benefits for accessibility and SEO, which got us all using it everywhere. By <a href="https://www.w3.org/TR/html401/struct/text.html#edef-EM">HTML 4</a>, everybody knew &lt;em&gt; was for emphasis and styled as italics, &lt;strong&gt; was for stronger emphasis and styled as bold text. If you ever dared to use &lt;i&gt;, you would be instantly tagged as a bad developer.</p>

  470. 

  471. <p>There were even rumours that the <em>totally un-semantic</em> &lt;i&gt; and &lt;b&gt; would be deprecated any minute like &lt;u&gt; was, and our WYSIWYG editors didn’t even have a button for &lt;i&gt; or &lt;b&gt;, they would simply put an &lt;em&gt; whenever we clicked the italics icon and &lt;strong&gt; when clicking the bold.</p>

  472. 

  473. <p>But….</p>

  474. 

  475. <h2 id="the-em-tag-is-not-for-emphasis">The &lt;em&gt; tag is not for emphasis</h2>

  476. 

  477. <p>Let me repeat that: <strong>&lt;em&gt; is <em>not</em> for emphasis</strong>. In <a href="https://www.w3.org/TR/html50/text-level-semantics.html#the-em-element">HTML5</a>, <strong>&lt;em&gt; is for <em>stress </em>emphasis</strong>.</p>

  478. 

  479. <p>This might look like a subtle distinction, but that’s where all of this confusion comes from. The HTML 2, 3 and 4 specs were pretty vague on their definition of “emphasis”, making it look like a lesser version of &lt;strong&gt;. Something to mark text of higher importance, but not <em>so</em> important.</p>

  480. 

  481. <p>But when HTML5 rolled out, they made sure to draw a clearer line on what they intended &lt;em&gt; to be, while redefining the &lt;i&gt; from a text-italicising tag into a semantic tag that pretty much wraps most other use cases for italics.</p>

  482. 

  483. <p>But <strong>what is stress emphasis?</strong> Stress emphasis is the phonetic resource of changing pitch and/or dragging the word to denote a special meaning to it. It marks a word in a way that changes the meaning of the whole sentence. It’s used for a correction, clarification, sarcasm, the key part of a counter-argument, etc.</p>

  484. 

  485. <p>Native English speakers do this without even thinking about it, but more often than not, those of us for whom English is a second language had to sit through really boring lessons about it. </p>

  486. 

  487. <p>A quick look at the <a href="https://www.w3.org/TR/html50/text-level-semantics.html#the-em-element">examples from the spec itself</a> should make it clearer: they take the phrase “Cats are cute animals” and change the &lt;em&gt; tag from word to word, thus changing the meaning from implying that the discussion was about which animals are cute, to imply that the truth of the whole sentence was in question, implying that someone else said they were ugly, to the ridiculous notion that someone confused cats for plants. Or gods. Probably gods.</p>

  488. 

  489. <h2 id="some-use-cases">Some use cases</h2>

  490. 

  491. <p>We can use stress emphasis to communicate the higher importance of a word:</p>

  492. 

  493. <pre><code>&lt;p&gt;"I'm not &lt;em&gt;that&lt;/em&gt; into text semantics"&lt;/p&gt;</code></pre>

  494. 

  495. <p>The emphasis on “that” makes it clear that, while interested in it, it will not stop the speaker from using incorrect tags every now and then.</p>

  496. 

  497. <p>But we can use it to indicate sarcasm as well:</p>

  498. 

  499. <pre><code>&lt;p&gt;Sure, another TV is &lt;em&gt;exactly&lt;/em&gt; what our family needs&lt;/p&gt;</code></pre>

  500. 

  501. <p>To correct or clarify information, quoting <a href="https://www.quackit.com/html/tags/html_em_tag.cfm">Quackit excellent guide on text-level semantics:</a></p>

  502. 

  503. <pre><code>&lt;p&gt;"Did you say that you are a &lt;em&gt;chameleon&lt;/em&gt;?"&lt;/p&gt;

  504. &lt;p&gt;"No, I am a &lt;em&gt;comedian&lt;/em&gt;"&lt;/p&gt;</code></pre>

  505. 

  506. <p>We might also use it to hint at some implications:</p>

  507. 

  508. <pre><code>&lt;p&gt;What &lt;em&gt;we&lt;/em&gt; need to do is finish this project asap&lt;/p&gt;</code></pre>

  509. 

  510. <p>The emphasis implies that there’s <em>someone else</em> who needs to do <em>something else</em>.</p>

  511. 

  512. <p>It’s also used to mark the point of confrontation:</p>

  513. 

  514. <pre><code>&lt;p&gt;&lt;em&gt;Dogs&lt;/em&gt; are cute animals&lt;/p&gt;</code></pre>

  515. 

  516. <p>I’m implying a confrontation with somebody else who claimed <em>other</em> animals are cute (in this case, whoever wrote the HTML5 spec example) and marking the point of discrepancy.</p>

  517. 

  518. <p>&lt;em&gt; tags would normally be used on single words, maybe two, but we can sometimes use it on the whole sentence, to mark that the speaker is <em>really</em> fighting to get their point across, or denote an urgency. An exclamation can be the right use for &lt;em&gt; in a phrase:</p>

  519. 

  520. <pre><code>&lt;p&gt;&lt;em&gt;We need to get out of here!&lt;/em&gt;&lt;/p&gt;</code></pre>

  521. 

  522. <p>There are a gazillion WYSIWYG editors that get this wrong. From actual software intended to ease the creation of simple websites by drag-and-drop to blogging platforms; If your editor has the typical “italics — bold — underline” buttons, then most likely there’s nothing semantic about it.</p>

  523. 

  524. <p>Most (possibly all) of the ones that claim to be “semantic” are just throwing &lt;em&gt; for any italicised text and &lt;strong&gt; for bold text, without giving a thought about <em>why</em> the text is formatted that way (which is exactly what “semantics” try to solve). <strong>If there are no independent buttons for &lt;i&gt; and &lt;em&gt;</strong>, or a super-intelligent algorithm capable of interpreting <em>why</em> you are italicising text and applying the correct tag for the use case, <strong>it’s <em>not</em> semantic.</strong></p>

  525. 

  526. <p>Even our modern tools fall short when it comes to this. <strong>Markdown</strong> implementations use exactly the same approach of &lt;em&gt; for italicised text, &lt;strong&gt; for bold text.</p>

  527. 

  528. <p>Some of the reference <a href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#emphasis">guides </a>on it even go as far as saying</p>

  529. 

  530. <blockquote>Emphasis, <strong>aka </strong>italics, with asterisks or underscores.</blockquote>

  531. 

  532. <p>Which, at that point, really makes me think it might be the developers and not the tools.</p>

  533. 

  534. <p>I get it, Markdown is intended for quick writing, it even says so in the <a href="https://daringfireball.net/projects/markdown/syntax#html" rel="noreferrer nofollow noopener noopener">documentation</a></p>

  535. 

  536. <blockquote>Markdown is not a replacement for HTML, or even close to it. Its syntax is very small, corresponding only to a very small subset of HTML tags. The idea is <strong>not </strong>to create a syntax that makes it easier to insert HTML tags. (…) HTML is a <strong>publishing </strong>format; Markdown is a <strong>writing </strong>format. Thus, Markdown’s formatting syntax only addresses issues that can be conveyed in plain text.</blockquote>

  537. 

  538. <p>We could (in some implementations) manually use the &lt;i&gt; tag inside markdown formatted text, but even then, I feel like they should have addressed both in the language.</p>

  539. 

  540. <h2 id="when-not-to-use-em">When NOT to use &lt;em&gt;</h2>

  541. 

  542. <p>There are many cases where italics are meant to represent <em>something other than</em> emphasis.</p>

  543. 

  544. <p>In which case, the correct tag is actually <strong>&lt;i&gt;.</strong> Some may think &lt;i&gt; is a non-semantic tag, but it’s actually pretty much a catch-all tag for use cases where we want italicised text <em>without</em> stress emphasis.</p>

  545. 

  546. <p>To quote from the spec</p>

  547. 

  548. <blockquote>The i element represents a span of text in an <strong>alternate voice or mood</strong>, or otherwise offset from the normal prose in a manner indicating a different quality of text</blockquote>

  549. 

  550. <p>For instance, we should use &lt;i&gt; when marking an idiomatic phrase from another language, with their corresponding <strong>lang</strong> attribute so screen readers get the right pronunciation:</p>

  551. 

  552. <pre><code>&lt;p&gt;I would like us all to use better text-level semantics, but &lt;i lang="fr"&gt;c'est la vie&lt;/i&gt;&lt;/p&gt;

  553. &lt;p&gt;Major of Springfield, &lt;i lang="la"&gt;Corruptus in Extremis&lt;/i&gt;&lt;/p&gt;</code></pre>

  554. 

  555. <p>It is also used for taxonomic nomenclature:</p>

  556. 

  557. <pre><code>&lt;p&gt;&lt;i lang="la"&gt;Carnivorous Vulgaris&lt;/i&gt; keeps chasing his prey, &lt;i lang="la"&gt;Accelerati Incrediblus&lt;/i&gt; &lt;/p&gt;</code></pre>

  558. 

  559. <p>To mark a technical term:</p>

  560. 

  561. <pre><code>&lt;p&gt;Concepts like &lt;i&gt;closure&lt;/i&gt; can be confusing to JavaScript beginners&lt;/p&gt;</code></pre>

  562. 

  563. <p>fictional character voices:</p>

  564. 

  565. <pre><code>&lt;p&gt;&lt;i&gt;- That's what I do: I drink and I know things&lt;/i&gt;&lt;/p&gt;</code></pre>

  566. 

  567. <p>thoughts:</p>

  568. 

  569. <pre><code>&lt;p&gt;&lt;i&gt;I am better than this&lt;/i&gt;, she thought as she walked away&lt;/p&gt;</code></pre>

  570. 

  571. <p>and some other use cases, depending on the language (such as ship names).</p>

  572. 

  573. <p>Another italic-causing tag that we might find a good use for is the <strong>&lt;cite&gt;</strong> element.</p>

  574. 

  575. <p>It is used to mark the title of a work (painting, book, etc):</p>

  576. 

  577. <pre><code>&lt;p&gt;&lt;cite&gt;The persistence of memory&lt;/cite&gt; by Salvador Dalí. Painted in 1931&lt;/p&gt;</code></pre>

  578. 

  579. <p>or the author:</p>

  580. 

  581. <pre><code>&lt;p&gt; According to &lt;cite title="You're using &lt;em&gt; wrong. Published by LogRocket (October, 2018)"&gt;Facundo Corradini&lt;/cite&gt;, we should reconsider the tags we're using to italicise text.</code></pre>

  582. 

  583. <p>In many platforms &lt;blockquote&gt; causes the text to be italicised (as well as indented), but I don’t think anyone is confusing that one with &lt;em&gt;, and editors always have the proper button for it. It can cause some nesting issues though, so that’s something to keep in mind.</p>

  584. 

  585. <h2 id="why-it-matters">Why it matters</h2>

  586. 

  587. <p>Accessibility, of course. Every time we use the wrong tag to italicise a word, most of our users won’t even notice. As long as we are doing so according to our language conventions, the word will be read with the intended emphasis.</p>

  588. 

  589. <p>But <strong>we are making things so much more complicated for screen readers</strong>, especially when nesting. If we were doing our job right, speech synthesizers would be able to easily make the right pitch corrections. But we’re so far gone in this that all of them (as far as I know) have it disabled by default, and <strong>that’s a big part of what makes them feel so unnatural</strong>.</p>

  590. 

  591. <p>It can be enabled in some, but even then, they opted to just get anything that’s italicised and apply the inflection.. which is just as bad. They are correcting our errors.</p>

  592. 

  593. <p>But maybe, if we all start doing it the right way, we can get them to work properly in the future and feel much more human. <strong>We can communicate better</strong>.</p>

  594. 

  595. <p>I have to admit, this whole article kind of started with my strong disagreement with this <a href="https://twitter.com/css/status/1037774960943620097" rel="noreferrer nofollow noopener noopener">CSS-Tricks tweet on “nested emphasis”</a>.</p>

  596. 

  597. <figure class="kg-card kg-embed-card"><blockquote class="twitter-tweet"><p lang="en" dir="ltr">Nested emphasis? Undo it.<br/><br/>```<br/>em em {<br/>  font-style: normal;<br/>}<br/>``` <a href="https://t.co/YIaBPoKvod">pic.twitter.com/YIaBPoKvod</a></p>— CSS-Tricks (@css) <a href="https://twitter.com/css/status/1037774960943620097?ref_src=twsrc%5Etfw">September 6, 2018</a></blockquote>

  598. 

  599. </figure>

  600. 

  601. <p><br/>Let’s break that down: </p>

  602. 

  603. <pre><code>&lt;em&gt;Now &lt;em&gt;that's&lt;/em&gt; a change, she thought&lt;/em&gt;

  604. em em { font-style: normal;}</code></pre>

  605. 

  606. <p><em>Now</em> that’s <em>a change, she thought</em></p>

  607. 

  608. <p>The given phrase is a fictional character’s thought, who is putting emphasis on “that’s”, implying the change they’re talking about is really noticeable, probably compared to another, previous small change.</p>

  609. 

  610. <p>For starters, “Now that’s a change” is a thought, so it should be marked down with an &lt;i&gt; tag, not &lt;em&gt;. But as we previously discussed, pretty much all of our tools are forcing us to do these kinds of things, so I can live with that.</p>

  611. 

  612. <p>The part that really bugged me was the core idea of resetting the italics. To me, it looks like the worst possible solution. It doesn’t just fail to convey the intended <em>stress</em> on that word, it actually makes it appear outside the scope of the fictional character’s thought.</p>

  613. 

  614. <p>Look how much better it conveys the stress if we opt for adding bold weight instead:</p>

  615. 

  616. <pre><code>&lt;i&gt;Now &lt;em&gt;that's&lt;/em&gt; a change&lt;/i&gt;, she thought

  617. i em { font-weight: bold;}</code></pre>

  618. 

  619. <p><em>Now </em><strong><em>that’s</em></strong><em> a change</em>, she thought</p>

  620. 

  621. <p>Some might argue that an underline would get the job done just as well, which might be true for print, but it’s clearly a no-go for the web, as it would make it look like a link:</p>

  622. 

  623. <pre><code>&lt;i&gt;Now &lt;em&gt;that's&lt;/em&gt; a change&lt;/i&gt;, she thought

  624. i em {text-decoration: underline;}</code></pre>

  625. 

  626. <p>Or maybe use caps, after all, it’s just one word. Personally, I believe this one goes over-the-top and might be better suited for nesting bold-causing tags, as it’s commonly interpreted as shouting:</p>

  627. 

  628. <pre><code>&lt;i&gt;Now &lt;em&gt;that's&lt;/em&gt; a change&lt;/i&gt;, she thought

  629. i em {text-transform: uppercase;}</code></pre>

  630. 

  631. <p><em>Now THAT’S a change</em>, she thought</p>

  632. 

  633. <p>There are some other combinations of tags that would cause italicised text inside an italicised scope, but most of them are &lt;em&gt; inside some other tag, so I would argue that just setting the inner tag to bold does the trick almost every time.</p>

  634. 

  635. <h2 id="takeaways">Takeaways</h2>

  636. 

  637. <ul><li>Whenever you’re throwing italics at a word/phrase, think about why are you doing so and choose the right tag for the task if possible</li><li>When in doubt, read it aloud. Or get someone else to read it aloud and see if it matches your expected inflections</li><li>If you’re using italics on more than one or two words, &lt;em&gt; is probably not the right tag</li><li>Marking a whole phrase with &lt;em&gt; means urgency, so it would normally only be used in exclamations</li><li>When nesting italics-producing tags, go for a bold weight. And for the love of HTML, do not undo them!</li></ul>

  638. 

  639. <p>We need to start considering why we are italicising text and using the right tag for it. We can make our tools better. We can make the web better.</p>

  640.   </article>

  641. </section>

  642. 

  643. 

  644. <nav id="jumpto">

  645.   <p>

  646.     <a href="/david/blog/">Accueil du blog</a> |

  647.     <a href="https://logrocket.com/blog/youre-using-em-wrong/">Source originale</a> |

  648.     <a href="/david/stream/2019/">Accueil du flux</a>

  649.   </p>

  650. </nav>

  651. 

  652. <footer>

  653.   <div>

  654.     <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">

  655.     <p>

  656.       Bonjour/Hi!

  657.       Je suis <a href="/david/" title="Profil public">David&nbsp;Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>

  658.       Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>).

  659.     </p>

  660.     <p>

  661.       Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>.

  662.     </p>

  663.     

  664.     <p>

  665.       Voici quelques articles choisis :

  666.       <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,

  667.       <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,

  668.       <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,

  669.       <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,

  670.       <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,

  671.       <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,

  672.       <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,

  673.       <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,

  674.       <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,

  675.       <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,

  676.       <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,

  677.       <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,

  678.       <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,

  679.       <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,

  680.       <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,

  681.       et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>

  682.     </p>

  683.     <p>

  684.       On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>.

  685.     </p>

  686.     <p>

  687.       Je ne traque pas ta navigation mais mon

  688.       <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>

  689.       conserve des logs d’accès.

  690.     </p>

  691.   </div>

  692. </footer>

  693. <script type="text/javascript">

  694.   ;(_ => {

  695.     const jumper = document.getElementById('jumper')

  696.     jumper.addEventListener('click', e => {

  697.       e.preventDefault()

  698.       const anchor = e.target.getAttribute('href')

  699.       const targetEl = document.getElementById(anchor.substring(1))

  700.       targetEl.scrollIntoView({behavior: 'smooth'})

  701.     })

  702.   })()

  703. </script>