{"id":376548,"date":"2023-02-06T07:06:55","date_gmt":"2023-02-06T15:06:55","guid":{"rendered":"https:\/\/css-tricks.com\/?p=376548"},"modified":"2023-02-06T07:06:57","modified_gmt":"2023-02-06T15:06:57","slug":"the-double-emphasis-thing","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/the-double-emphasis-thing\/","title":{"rendered":"The Double Emphasis Thing"},"content":{"rendered":"\n<p>I used to have this boss who <em>loved<\/em>, <strong>loved<\/strong>, <strong><em>loved<\/em><\/strong>, <strong><em><span style=\"text-decoration: underline;\">loved<\/span><\/em><\/strong> to emphasize words. This was way back before we used a WYSIWYG editors and I&#8217;d have to handcode that crap.<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;p>\n  I used to have this boss who &lt;em>loved&lt;\/em>, &lt;strong>loved&lt;\/strong>, \n  &lt;strong>&lt;em>loved&lt;\/em>&lt;\/strong>, &lt;strong>&lt;em>&lt;u>loved&lt;\/u>&lt;\/em>&lt;\/strong> \n  to emphasize words.\n&lt;\/p><\/code><\/pre>\n\n\n\n<p>(Let&#8217;s not go into the colors he used for even <span style=\"color: red;\"><strong>MOAR<\/strong><\/span> emphasis.)<\/p>\n\n\n\n<p>Writing all that markup never felt great. The effort it took, sure, whatever. But is it even a good idea to add overload content with double \u2014 or more! \u2014 emphases?<\/p>\n\n\n\n<!--more-->\n\n\n<h3 class=\"wp-block-heading\" id=\"different-tags-convey-different-emphasis\">Different tags convey different emphasis<\/h3>\n\n\n<p>For starters, the <code>&lt;strong&gt;<\/code> and <code>&lt;em&gt;<\/code> tags are designed for different uses. We got them back in HTML5, where:<\/p>\n\n\n\n<ul>\n<li><strong><code>&lt;strong&gt;<\/code>:<\/strong> Is used to convey <a href=\"https:\/\/html.spec.whatwg.org\/multipage\/text-level-semantics.html#the-strong-element\" rel=\"noopener\">&#8220;strong importance, seriousness, or urgency for its contents&#8221;<\/a>.<\/li>\n\n\n\n<li><strong><code>&lt;em&gt;<\/code>:<\/strong> Represents <a href=\"https:\/\/html.spec.whatwg.org\/multipage\/text-level-semantics.html#the-em-element\" rel=\"noopener\">&#8220;stress emphasis&#8221;<\/a>.<\/li>\n<\/ul>\n\n\n\n<p>So, <code>&lt;strong&gt;<\/code> gives the content more weight in the sense it suggests that the content in it is important or urgent. Think of a warning:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Warning:<\/strong> The following content has been flagged for being awesome.<\/p>\n<\/blockquote>\n\n\n\n<p>It might be tempting to reach for <code>&lt;em&gt;<\/code> to do the same thing. Italicized text can be attention-grabbing after all. But it&#8217;s really meant as a hint to use more emphasis when readingt the content in it. For example, here are two versions of the same sentence with the emphasis in different locations:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;p>I ate the &lt;em>entire&lt;\/em> plate of burritos.&lt;\/p>\n&lt;p>I ate the entire &lt;em>plate&lt;\/em> of burritos.&lt;\/p><\/code><\/pre>\n\n\n\n<p>Both examples stress emphasis, but on different words. And they would sound different if you were to read them out loud. That makes <code>&lt;em&gt;<\/code> a great way to express tone in your writing. It changes the meaning of the sentence in a way that <code>&lt;strong&gt;<\/code> does not.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"visual-emphasis-vs-semantic-emphasis\">Visual emphasis vs. semantic emphasis<\/h3>\n\n\n<p>Those are two things you gotta weigh when emphasizing content. Like, there are plenty of instances where you may need to italicize content without affecting the meaning of the sentence. But those can be handled with other tags that render italics:<\/p>\n\n\n\n<ul>\n<li><strong><code>&lt;i&gt;<\/code>:<\/strong> This is the classic one! Before HTML5, this was used to stress emphasis with italics all over the place. Now, it&#8217;s purely used to italicize content visually without changing the semantic meaning.<\/li>\n\n\n\n<li><strong><code>&lt;cite&gt;<\/code>:<\/strong> Indicating the source of a fact or figure. (&#8220;Source: <cite>CSS-Tricks<\/cite>&#8220;)<\/li>\n\n\n\n<li class=\"ticss-e79b7374\"><code><strong>&lt;address&gt;<\/strong><\/code>: Used to mark up contact information, not only physical addresses, but things like email addresses and phone numbers too. (<address>howdy@example.com<\/address>)<\/li>\n<\/ul>\n\n\n\n<p>It&#8217;s going to he the same thing with <code>&lt;strong&gt;<\/code>. Rather than using it for styling text you want to look heavier, it&#8217;s a better idea to use the classic <code>&lt;b&gt;<\/code> tag for boldfacing to avoid giving extra signficance to content that doesn&#8217;t need it. And remember, some elements like headings are already rendered in bold, thanks to the browser&#8217;s default styles. There&#8217;s no need to add even more strong emphasis.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"using-italics-in-emphasized-content-and-vice-versa\">Using italics in emphasized content (and vice versa)<\/h3>\n\n\n<p>There are legitimate cases where you may need to italicize part of a line that&#8217;s already emphasized. Or maybe add emphasis to a bit of text that&#8217;s already italicized.<\/p>\n\n\n\n<p>A blockquote might be a good example. I&#8217;ve seen plenty of times where they are italicized for style, even though default browser styles don&#8217;t do it:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">blockquote {\n  font-style: italic;\n}<\/code><\/pre>\n\n\n\n<p>What if we need to mention a movie title in that blockquote? That should be italicized. There&#8217;s no stress emphasis needed, so an <code>&lt;i&gt;<\/code> tag will do. But it&#8217;s still weird to italicize something when it&#8217;s already rendered that way:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;blockquote>\n  This movie\u2019s opening weekend performance offers some insight in\n  to its box office momentum as it fights to justify its enormous \n  budget. In its first weekend, &lt;i>Avatar: The Way of Water&lt;\/i> made \n  $134 million in North America alone and $435 million globally.\n&lt;\/blockquote><\/code><\/pre>\n\n\n\n<p>In a situation where we&#8217;re italicizing something within italicized content like this, we&#8217;re supposed to <em>remove the italics<\/em> from the nested element&#8230; <code>&lt;i&gt;<\/code> in this case.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">blockquote i {\n  font-style: normal;\n}<\/code><\/pre>\n\n\n\n<p><a href=\"https:\/\/css-tricks.com\/early-days-of-container-style-queries\/\">Container style queries<\/a> will be super useful to nab all these instances if we get them:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">blockquote {\n  container-name: quote;\n  font-style: italic;\n}\n\n@container quote (font-style: italic) {\n  em, i, cite, address {\n    font-style: normal;\n  }\n}<\/code><\/pre>\n\n\n\n<p>This little snippet evaluates the blockquote to see if it&#8217;s <code>font-style<\/code> is set to <code>italic<\/code>. If it is, then it&#8217;ll make sure the <code>&lt;em&gt;<\/code>, <code>&lt;i&gt;<\/code>, <code>&lt;cite&gt;<\/code>, and <code>&lt;address&gt;<\/code> elements are rendered as normal text, while retaining the semantic meaning if there is one.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"but-back-to-emphasis-within-emphasis\">But back to emphasis within emphasis<\/h3>\n\n\n<p>I wouldn&#8217;t nest <code>&lt;strong&gt;<\/code> inside <code>&lt;em&gt;<\/code> like this:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;p>I ate the &lt;em>&lt;strong>entire&lt;\/strong>&lt;\/em> plate of burritos.&lt;\/p><\/code><\/pre>\n\n\n\n<p>&#8230;or nest <code>&lt;em&gt;<\/code> inside <code>&lt;strong&gt;<\/code> instead:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;p>I ate the &lt;em>&lt;strong>entire&lt;\/strong>&lt;\/em> plate of burritos.&lt;\/p><\/code><\/pre>\n\n\n\n<p>The rendering is fine! And it doesn&#8217;t matter what order they&#8217;re in&#8230; at least in modern browsers. Jennifer Kyrnin mentions that<a href=\"https:\/\/www.thoughtco.com\/emphasis-tag-3468276\" rel=\"noopener\"> some browsers only render the tag nearest to the text<\/a>, but I didn&#8217;t bump into that anywhere in my limited tests. But something to watch for!<\/p>\n\n\n\n<p>The reason I wouldn&#8217;t nest one form of emphasis in another is because it simply isn&#8217;t needed. There is no grammar rule that calls for it. Like exclamation points, one form of emphasis is enough, and you ought to use the one that matches what you&#8217;re after whether it&#8217;s visual, weight, or announced emphasis.<\/p>\n\n\n\n<p>And even though some screen readers are capable of announcing emphasized content, they won&#8217;t read the markup with any additional importance or emphasis. So, no additional accessibility perks either, as far as I can tell.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"but-i-really-want-all-the-emphasis\">But I really want all the emphasis!<\/h3>\n\n\n<p>If you&#8217;re in the position where your boss is like mine and wants <strong>ALL <em><span style=\"text-decoration: underline;\">the<\/span><\/em> emphasis<\/strong>, I&#8217;d reach for the right HTML tag for the type of emphasis, then apply the rest of the styles with a mix of tags that don&#8217;t affect semantics with CSS to help account for anything browser styles won&#8217;t handle.<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;style>\n  \/* If `em` contains `b` or `u` tags *\/\n  em:has(b, u) {\n    color: #f8a100;\n  }\n&lt;\/style>\n\n&lt;p>\n  I used to have this boss who &lt;em>loved&lt;\/em>, &lt;strong>loved&lt;\/strong>, \n  &lt;strong>&lt;em>loved&lt;\/em>&lt;\/strong>, &lt;strong>&lt;em>&lt;u>loved&lt;\/u>&lt;\/em>&lt;\/strong> \n  to emphasize words.\n&lt;\/p><\/code><\/pre>\n\n\n\n<p>I might even do it with the <code>&lt;strong&gt;<\/code> tag too as a defensive measure:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* If `em` contains `b` or `u` tags *\/\nem:has(b, u),\n\/* If `strong` contains `em` or `u` tags *\/\nstrong:has(i, u) {\n  color: #f8a100;\n}<\/code><\/pre>\n\n\n\n<p>As long as we&#8217;re playing defense, we can identify errors where emphases are nested within emphases by highlighting them in red or something:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* Highlight semantic emphases within semantic emphases *\/\nem:has(strong),\nstrong:has(em) {\n  background: hsl(0deg 50% 50% \/ .25);\n  border: 1px dashed hsl(0deg 50% 50% \/ .25);\n}<\/code><\/pre>\n\n\n\n<p>Then I&#8217;d probably use that snippet from the last section that removes the default italic styling from an element when it is nested in another italiczed element.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"anything-else\">Anything else?<\/h3>\n\n\n<p>Mayyyyybe:<\/p>\n\n\n\n<ul>\n<li>Make sure your webfont includes bold and italic variations \u2014 otherwise, you&#8217;ll be relying on <a href=\"https:\/\/css-tricks.com\/watch-your-font-weight\/\">the browser to try to bold or italicize text for you<\/a>. But limit your font files to just the weights and styles you need for better performance.<\/li>\n\n\n\n<li>Consider re-writing the content if the formatting seems off. <a href=\"https:\/\/www.grammarly.com\/blog\/sentence-emphasis\/\" rel=\"noopener\">There are natural ways to phrase content so that certain bits gain emphasis.<\/a><\/li>\n\n\n\n<li>Check your analytics for the browsers your visitors use and test accordingly. Even though I didn&#8217;t run into a browser that balked at <code>&lt;strong&gt;<\/code> in <code>&lt;em&gt;<\/code> or the other way around, there may be a browser or several that will.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>I used to have this boss who loved, loved, loved, loved to emphasize words. This was way back before we used a WYSIWYG editors and I&#8217;d have to handcode that crap. (Let&#8217;s not go into the colors he used for even MOAR emphasis.) Writing all that markup never felt great. The effort it took, sure, [&hellip;]<\/p>\n","protected":false},"author":2508,"featured_media":376565,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"The Double Emphasis Thing by @geoffreygraham","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[16956,16955,731],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/double-emphasis.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":5876,"url":"https:\/\/css-tricks.com\/poll-results-puncation\/","url_meta":{"origin":376548,"position":0},"title":"Poll Results: Punctuation Inside or Out?","date":"March 11, 2010","format":false,"excerpt":"Quite a lot of people weighed in on this poll that went out in January. The question was: Should tags like em and strong go <em>(outside)<\/em> punctuation characters, or (<strong>inside them<\/strong>)? Like many polls around here, the question was interesting and stirred up some great conversation, but the question itself\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":278204,"url":"https:\/\/css-tricks.com\/emphasizing-emphasis\/","url_meta":{"origin":376548,"position":1},"title":"Emphasizing Emphasis","date":"October 30, 2018","format":false,"excerpt":"I think Facundo Corradini is right here in calling out our tweet. If you're italicizing text because it should be styled that way (e.g. using italics to display a person's internal thought dialog, as illustrated in our example), then that's an and not an , because is for stress emphasis\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/10\/emphasizing-em.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":5346,"url":"https:\/\/css-tricks.com\/new-poll-tagpunctuation-placement\/","url_meta":{"origin":376548,"position":2},"title":"New Poll: Tag\/Punctuation Placement","date":"January 21, 2010","format":false,"excerpt":"There is probably a right and wrong answer for this, so if that emerges, I'll update this article and mention it in the results. Regardless, I don't think it's obvious, so this poll should be answered on what you currently actually do, not the \"correct\" answer. Should special marks in\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":316116,"url":"https:\/\/css-tricks.com\/how-to-italicize-text\/","url_meta":{"origin":376548,"position":3},"title":"How to Italicize Text","date":"July 17, 2020","format":false,"excerpt":"HTML and CSS offer us the ability to italicize text. I\u2019m talking about text like this. Let\u2019s cover everything you\u2019ll need to know. What is italic text and why would you italicize text? You italicize text most often to call attention to it. Literally to emphasize a word, so that\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/italic.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":324942,"url":"https:\/\/css-tricks.com\/this-page-is-a-truly-naked-brutalist-html-quine\/","url_meta":{"origin":376548,"position":4},"title":"This page is a truly naked, brutalist html quine.","date":"November 4, 2020","format":false,"excerpt":"Here's a fun page coming from secretGeek.net. You don't normally think \"fun\" with brutalist minimalism but the CSS trickery that makes it work on this page is certainly that. The HTML is literally displayed on the page as tags. So, in a sense, the HTML is both the page markup\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/brutalist-html-quine.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":1188,"url":"https:\/\/css-tricks.com\/what-do-you-think-is-the-best-online-wysiwyg-editor\/","url_meta":{"origin":376548,"position":5},"title":"What Do You Think is the Best Online WYSIWYG Editor?","date":"October 13, 2008","format":false,"excerpt":"This question was sent in by Edwin. To clarify, I believe Edwin is asking about these JavaScript scripts you can use on website which turn regular <textarea>s into more robust editing environments. You'll recognize one in use right here on CSS-Tricks: I like editors like this, especially in WordPress comment\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/376548"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/2508"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=376548"}],"version-history":[{"count":11,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/376548\/revisions"}],"predecessor-version":[{"id":377113,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/376548\/revisions\/377113"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/376565"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=376548"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=376548"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=376548"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}