{"id":140,"date":"2007-05-07T08:19:09","date_gmt":"2007-05-07T08:19:09","guid":{"rendered":"http:\/\/lachy.id.au\/log\/2007\/05\/b-and-i"},"modified":"2013-09-07T16:42:54","modified_gmt":"2013-09-07T16:42:54","slug":"b-and-i","status":"publish","type":"post","link":"https:\/\/lachy.id.au\/log\/2007\/05\/b-and-i","title":{"rendered":"The &lt;b&gt; and &lt;i&gt; Elements"},"content":{"rendered":"<p>Over on <a href=\"http:\/\/lists.w3.org\/Archives\/Public\/public-html\/2007May\/\">public-html<\/a> (and cross posted to<a href=\"http:\/\/lists.w3.org\/Archives\/Public\/www-html\/2007May\/\"> www-html<\/a>), there is some intense<br \/>\n\t<a href=\"http:\/\/www.bikeshed.org\/\">bikeshedding<\/a> going on pertaining to the<br \/>\n\tuse of the <code>b<\/code> and <code>i<\/code> elements<br \/>\n\tand why they should or should not be retained in HTML 5.  Some have argued<br \/>\n\t<a href=\"http:\/\/lists.w3.org\/Archives\/Public\/public-html\/2007May\/0634.html\">that <code>b<\/code> and <code>i<\/code> are<br \/>\n\tstrictly presentational elements<\/a>, and that they <em>should not<\/em> be retained<br \/>\n\tin HTML5.<\/p>\n<p>Others have argued that <a href=\"http:\/\/lists.whatwg.org\/pipermail\/whatwg-whatwg.org\/2007-January\/009060.html\">the <code>b<\/code> and <code>i<\/code> elements are<br \/>\n\tvirtually synonymous with <code>strong<\/code> and <code>em<\/code> in reality<\/a>, so trying<br \/>\n\tto define otherwise is pointless. The reason that <code>i<\/code> and <code>b<\/code> could<br \/>\n\tbe considered synonymous with <code>em<\/code> and <code>strong<\/code>, respectively,<br \/>\n\thas to do with them being used largely interchangeably with each other in<br \/>\n\treality, and very little to do with their actual definitions.<\/p>\n<p>However, it&#8217;s reasonable to hypothesise that there would be significantly<br \/>\n\tmore non-emphasis-usage of <code>i<\/code> than there would be usage for emphasis,<br \/>\n\tand so defining that all uses of <code>i<\/code> represent emphasis would be<br \/>\n\ta mistake (similarly for <code>b<\/code> and <code>strong<\/code>).<\/p>\n<p>Therefore, the pragmatic approach is to specify that <code>i<\/code> and <code>b<\/code> convey<br \/>\n\tunspecified semantics, which are to be determined by the reader in the context<br \/>\n\tof their use.  In other words, although they don&#8217;t convey specific semantics<br \/>\n\tby themselves, they indicate that that the content is somehow distinct from<br \/>\n\tits surroundings and leaves the interpretation of the semantics up to the<br \/>\n\treader.<\/p>\n<p>That is effectively the approach taken by the HTML5 spec.  These are the current<br \/>\n\tdefinitions for the <code>b<\/code> and <code>i<\/code> elements.<\/p>\n<p><a href=\"http:\/\/www.whatwg.org\/specs\/web-apps\/current-work\/multipage\/section-phrase.html#the-b\">The <code>b<\/code> element<\/a>:<\/p>\n<blockquote>\n<p>The <code>b<\/code> element represents a span of text to be stylistically<br \/>\n\t\toffset from the normal prose without conveying any extra importance, such as<br \/>\n\t\tkey words in a document abstract, product names in a review, or other spans<br \/>\n\t\tof text whose typical typographic presentation is boldened.<\/p>\n<p>The <code>b<\/code> element should be used as a last resort when no other<br \/>\n\t\telement is more appropriate. In particular, headers should use the <code>h1<\/code> to <code>h6<\/code>\t\telements, stress emphasis should use the <code>em<\/code> element, importance should be denoted<br \/>\n\t\twith the <code>strong<\/code> element, and text marked or highlighted should use the <code>m<\/code> element.<\/p>\n<\/blockquote>\n<p><a href=\"http:\/\/www.whatwg.org\/specs\/web-apps\/current-work\/multipage\/section-phrase.html#the-i\">The <code>i<\/code> element<\/a>:<\/p>\n<blockquote>\n<p>The <code>i<\/code> element represents a span of text in an alternate voice<br \/>\n\t\tor mood, or otherwise offset from the normal prose, such as a taxonomic designation,<br \/>\n\t\ta technical term, an idiomatic phrase from another language, a thought, a ship<br \/>\n\t\tname, or some other prose whose typical typographic presentation is italicized.<\/p>\n<p>Terms in languages different from the main text should be annotated with<br \/>\n\t\t<code>lang<\/code> attributes (<code>xml:lang<\/code> in XML). <\/p>\n<p>The <code>i<\/code> element should be used as a last resort when no other<br \/>\n\t\telement is more appropriate. In particular, citations should use the <code>cite<\/code> element,<br \/>\n\t\tdefining instances of terms should use the <code>dfn<\/code> element, stress emphasis should<br \/>\n\t\tuse the <code>em<\/code> element, importance should be denoted with the <code>strong<\/code> element, quotes<br \/>\n\t\tshould be marked up with the <code>q<\/code> element, and small print should use the <code>small<\/code>\t\telement.<\/p>\n<\/blockquote>\n<p>Context is effectively how users distinguish between italics used for emphasis<br \/>\n\tand the variety of other uses, so providing a couple of catch-all elements for<br \/>\n\tthe remaining cases that don&#8217;t have specific elements, isn\u2019t all that bad.<\/p>\n<p>The separation of presentation and semantics isn&#8217;t a goal in and of itself<br \/>\n\tthat needs to be strictly adhered to.  Rather, it&#8217;s just a means to an end and<br \/>\n\tif that end can be reached without a strict separation, then so be it.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Over on public-html (and cross posted to www-html), there is some intense bikeshedding going on pertaining to the use of the b and i elements and why they should or should not be retained in HTML5.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[2,7,3,6,21],"tags":[],"_links":{"self":[{"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/posts\/140"}],"collection":[{"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/comments?post=140"}],"version-history":[{"count":4,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/posts\/140\/revisions"}],"predecessor-version":[{"id":247,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/posts\/140\/revisions\/247"}],"wp:attachment":[{"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/media?parent=140"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/categories?post=140"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/tags?post=140"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}