18 ms·
<i>: The Idiomatic Text element
- jz391 4y agoSlightly odd that they explicitly say: these should include the lang attribute to identify the language but then don't do that in the Example (with *vini, vidi, vici*)...
- chrismorgan 4y agoThe mildly uncomfortable aspect of it is that <i lang="la">veni, vidi, vici</i> might change the font the text is rendered in, because the generic font families (e.g. serif, sans-serif, cursive, monospace) can vary by language. For me, for example, my usual serif is Equity A, but in Latin it changes to Noto Serif and I haven’t been bothered to patch this up in my Firefox config because it takes far too much effort, requiring changes in a number of languages (not such as French (fr), but yes such as Latin (la) and Māori (mi)). Or sans-serif: Concourse 4 becomes Noto Serif. This will honestly cause me to omit lang=la in some iffy cases where I would write lang=fr on a similar word or expression from French.
- gabrielsroka 4y agoSo have <b> and <u>. Years ago.
- dimmke 4y agoYes, but I wanted to foster this exact comment thread so it worked perfectly.
- chrismorgan 4y agoYeah, but your editorialised title suggested a recent change, whereas this change was made over fifteen years ago. (Can’t trivially find exactly when the change was made, but it’s already present in <https://web.archive.org/web/20071001102153/https://www.w3.org/html/wg/html5/diff/#changed-elements https://web.archive.org/web/20071001102153/https://www.w3.or...>.)
- 1letterunixname 4y agoAbsolutely not! We also need em and strong, just to be confusing and redundant like Perl.
- naniwaduni 4y agoHilariously, the modern prescription for <b> ("text to which attention is being drawn for utilitarian purposes without conveying any extra importance") probably covers more uses of boldface than <strong> ("strong importance, seriousness, or urgency for its contents").
- Karellen 4y agoThey've clearly put the effort in, but I'm not sure it's a retcon I personally like. I think I'll hang onto the original Season 1-4 interpretation for my headcanon.
- jonas21 4y agoAlso "<b>: The Bring Attention To element" https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b
- jwitthuhn 4y ago<u> is perhaps the biggest stretch for "Unarticulated Annotation"
- layer8 4y ago“Underscore” is used figuratively, so they could just stick with that.
- blackshaw 4y agoWow, you're not joking: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/u https://developer.mozilla.org/en-US/docs/Web/HTML/Element/u
- chrismorgan 4y agoActually no, that’s the most accurate one of them (though <b> as “bring attention to” is fairly close too). The actual spec: > The u element represents a span of text with an unarticulated, though explicitly rendered, non-textual annotation, such as labeling the text as being a proper name in Chinese text (a Chinese proper name mark), or labeling the text as being misspelt.
- xnx 4y agoI had never heard this retcon.
- dimmke 4y agoThis is what the WHATWG group has been spending their time on over the last decade.
- chrismorgan 4y ago
- notatoad 4y agoSo a brief history: - <i> makes text italic - no, presentational elements are bad, use <em> instead - okay, fine, you’re all still using “i” so we’ll put it back in the standard - here’s a convoluted meaning to pretend that it’s in the standard for some reason other than “we tried to remove it and failed”
- sph 4y agoYou skipped "fuck semantic HTML and CSS, we use Tailwind now." <i> as italic was great like Tailwind is great: sometimes I just want to design something basic without having to context switch to CSS. I want italic, I use the <i> tag. What has semantic HTML ever done for us? Does the browser care that I used <i> instead of <em> for italic? Do screen reader even care?
- renewiltord 4y agoI wonder if AI screen readers will ever use the visual appearance of something to determine what it means. So even if you draw on a `<canvas>` it can still read the text. That would be sick.
- z3c0 4y agoYou have a fantastic idea there, and if you'd like to attempt to make it a reality, I'm happy to brainstorm it with you. You keep full ownership of the concept; I'm happy to contribute given the people it'd help. You can contact me directly using my handle at my domain, which is 21337.tech
- renewiltord 4y agoz3c0, much appreciated, but I am prioritizing other things at this time. Let me hit you up at a future time if no one has already built something with this feature already!
- z3c0 4y ago
- layer8 4y agoThis is useless insofar as in a rich-text editor, when the user clicks the “i” button or presses Ctrl+I, they still mean italics, and there is no separate “idiomatic” button, which if present would furthermore only confuse most users. Same for bold. Also Markdown doesn’t support the distinction. This is not to say that browsers should prevent styling <i> elements differently, but the intended meaning is still “whatever italics means”.
- karaterobot 4y agoI always use <em> for any kind of emphasis, and I'll even do <em class="italics"> and <em class="bold">, fight me. I've seen <i> used for icons(!) but that's a bridge too far for me.
- gmac 4y agoIIRC, <i> for icons was/is the markup FontAwesome suggested/suggests.
- jansan 4y agoOf the available elements, which one is suitable for icons, especially when being used in text (just yesterday I learned that emojis are even used in code like css). Clearly they should be in an element to separate them from the text, but which one is appropriate?
- xigoi 4y ago<svg>
- rrwo 4y agoSurely we can come up with a semantic name for <blink>? "Bring levity in kind"
- ironmagma 4y agomarquee -- make almost really quite unilaterally everything elevate
- breischl 4y agoMake A Really Quite Unreadable Eyesore, Eh?
- 1letterunixname 4y agoEspecially if it's h1 fushcia and red text on a yellow background blinking with bold, italic, and underline. Something like "1995-12-10 Please read my website completely before emailing me directly: bob941 (at) compuserve.com . . . . . "
- jimmux 4y agoMove Around, Rambling Quaintly Until Eventual Exit
- layer8 4y ago“Bi-legible ink”?
- carstimon 4y agoMake A Really QUool EEffect
- kimburgess 4y agoBi-Luminous Information Node (type K)
- lupire 4y agoIt's embarrassing that they do this without even apologizing.
- ironmagma 4y agoI'd rather people just collectively give up on semantic HTML. What is even the source of hope for this cause? The rest of us gave up a long time ago. I'd much rather see energy spent on expanded ARIA support, something that actually moves the needle on accessibility.
- Freebytes 4y agoAbsolutely. Leave HTML as is and focus on actual accessibility features. They could even add screen reader specific elements and indicate that all other page elements should be ignored. So, you would show one presentation for visual purposes and the other for audible purposes. (Or even braille for feedback purposes.) Add something to the document that tells it to ignore screen readers as long as a <screenreader> tag is present that puts everything in one place.
- est 4y ago> What is even the source of hope for this cause? Because nested layers of DIV are apparently "semantic"
- ironmagma 4y agoDocuments and humanity in general are complicated and various. You're never going to be able to fully encapsulate the complexities of a document into any (structured) DSL as a result. The recommended approach, failing all other options – even to the semantic people – is to use some standby element, such as DIV or SECTION. Unless you're including people who would say "just change your document to not do anything not representable by Semantic HTML". Add to that, that the list of supported elements aren't even close to approximating what you'd write in 50% of documents.
- staplung 4y ago<em> does have its uses. If you have an entire paragraph that's styled as italic and you want to emphasis something within that, usually what you do is make the emphasized span non-italic. Italicized paragraphs or long spans are more common than you might guess. Sometimes they're used to indicate speakers in a dialog or to signify editorialized interjections. No idea if browsers are smart enough to render nested <em>'s this way now without specialized CSS.
- habitue 4y agoGod, can we just kill the semantic web stuff already? It's like a bizarre religion that won't die. By the time the web is finally "semantic" and everything is marked up appropriately, we'll have AIs that just infer the semantics and don't need all the meticulous tagging.
- aylmao 4y agoDoing whatever we want and just hoping AI will eventually fix the mess it is also how we got sub-par public transport but billions invested in self-driving cars.
- habitue 4y agoI mean, the semantic web had a good try. The farce has been going on for 25 years now, it had its chance. meanwhile, yes, google does have to use AI to figure out webpages because the semantic web is a failure.
- 1letterunixname 4y agoSome people even tried RDF and triplestores to structure metadata and separate from presentation. XSLT was supposed to become an almost universal presentation layout language/transformation language. Nawh, we have REST APIs, ORMs, and HTML and JSX templates that present rendered views devoid of data and logic behind them.
- ironmagma 4y agoA lot more money has been invested in public transport. Turns out, running buses and trains all the time gets expensive.
- aylmao 4y agoI don't doubt billions have been invested in public transport. I also don't doubt those billions have been (and will continue to be) more cost-effective than the billions invested in self-driving cars.
- tannhaeuser 4y agoThe explanation for the i element has had a rough history: I remember wording such as "the i element is for content that's normally put into italics" lol. Demonstrating the whole concept of "semantic" HTML is simply flawed at a fundamental level: HTML is a vocabulary for casual academic publishing, with headings, footers, lists, etc. for structuring, and other very specific elements (such as <var>) typical of such use case. But what about other pieces of text, such as threaded discussions like this page? For some, using a vocabulary fit for a specific purpose with mapping to a rendering vocabulary is the entire point of markup. "Semantic" HTML seems to be pushed after the fact as a justification for CSS to have syntax completely separate from HTML, reserving attributes for "behavior". The idea that markup attributes shouldn't contain style info is laughable when they're there for the exact reason to associate typed properties with elements.
- gweinberg 4y agoThey pretend they want tags be about semantics and not style. And yet and yet, they still refuse to add the "sarcasm" tag.
- GlitchMr 4y agoTechnically there is sarcasm tag in HTML specification, it's one of tags that is specifically handled in https://html.spec.whatwg.org/multipage/parsing.html#parsing-main-inbody:html-elements-11 https://html.spec.whatwg.org/multipage/parsing.html#parsing-... ('An end tag whose tag name is "sarcasm"'). However, a problem with sarcasm tag is that it wouldn't really help accessibility compared to say saying "Sarcasm:" or something like "(The preceding remark was sarcastic.)".
- divbzero 4y agoSimilarly, <b> has become the “Bring Attention To” element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b
- 1letterunixname 4y agoPour one out for the blink tag. https://www.w3docs.com/tools/code-editor/13719 https://www.w3docs.com/tools/code-editor/13719
- Animats 4y agoWhat does <i> do for Han characters? I read the spec, but there's not much of a hint there.
- est 4y agoYou mean Chinese characters? Probably nothing. > idiomatic text, technical terms, taxonomical designations These were usually put in quotation marks. For book titles, wrap them inside 《 》
- Animats 4y ago> Chinese characters In Unicode, Chinese, Japanese, and even Korean and Vietnamese characters are combined into something called "CJK Unified Ideographs",or just "Han".[1][2]. So they all get the same treatment for something such as italics. Not sure what HTML currently specifies for that. [1] https://www.unicode.org/reports/tr38 https://www.unicode.org/reports/tr38 [2] https://en.wikipedia.org/wiki/Han_unification https://en.wikipedia.org/wiki/Han_unification
- Waterluvian 4y agoAnd then there’s me who uses nothing but div elements and hacks at them with css like a drunken butcher moonlighting as a surgeon until my webpage kinda looks correct on my browser and monitor.
- irrational 4y agoUsing CSS you can make most html tags behave like other html tags. I’ve made all the divs look and behave like strong tags and vice versa to demonstrate to people new to CSS that the default styling of tags is mostly artificial.
- somat 4y agoSome days I think html should have no predefined nodes at all. just use whatever you think is best and use css to get it the way you want it to look.
- notpushkin 4y agoSo, custom elements?
- irrational 4y agoI’ve seen people using <i> and <b> html elements to do whatever they need them to do, more than their old italic/bold uses. Other than the fact that they aren’t semantic, it does make some sense to use small tags if you are concerned about saving bytes.
- dsevil 4y agoFontAwesome's documentation in the past contained examples using the <i> element. Example: <i class="fa fa-facebook"></i> <!-- renders the Facebook logo or something like that --> I believe they presently just use <span> now.
- ogurechny 4y agoOf course it is funny to look at a committee trying to invent some grand vision for something that was simply a small set of options available on desktops around 1990. The real problem, however, is that many writing systems have never had any kind of oblique style for emphasis. Or cursive (which is a different thing). Or they have cursive, and use it all the time in print, but technically that's a different font without any connections to the main one. So any person making some kind of template should be aware that the effect of <i>-as-italic can range from “obvious thing everyone expects and understands” to “does nothing at all” depending on language and font. I think they should have got straight to that point in the article. It is pitiful how those unreflected small choices can put fences in one's mind. Everyone knows the font selection dialog in the browser, and probably thinks that the world is made of serif, sans-serif, monospace, and some Comic Sans. But that's nonsense, even for Latin. Even more pathetic is inability to use basic punctuation marks. Something as barebone as Fixedsys font had all the quotation marks and dashes since Windows 3.1, long before programs became Unicode-aware. All that time absolutely nothing has been stopping you from pressing the key and getting the proper symbol just like you type any other… except the typewriter key labels hardware makers still use, and the default system layouts being just as stale.
- p-e-w 4y ago> Of course it is funny to look at a committee trying to invent some grand vision for something that was simply a small set of options available on desktops around 1990. I honestly find it embarrassing rather than funny. "The foundations of the modern web were built by people who couldn't possibly have imagined the importance their inventions would play in the future, and the sheer breadth of applications they would be used for. One of the consequences of the web's convoluted history is that tag names like <i> are historical artifacts that don't make sense in the context of modern semantic elements." Is it really so hard to admit that? Why make up bogus explanations?
- Mikhail_Edoshin 4y agoIn human-machine interaction "semantic" means "you know exactly what the computer will do with that". So "<i>" or "<b>" tags have very clear semantic, while "<em>" or "<strong>" are less so and things like "<article>" are totally vague. Although this is not quite correct. "Semantic" is what makes sufficient distinctions for a given case. For example, assume I'm going to publish Ashby's "Introduction to cybernetics". It has an interesting structure: numbered chapters ("2"), smaller divisions within a chapter with a title but without a number, and yet more smaller units that are numbered like "2/17". Some of these smaller units have a title, some just a number. The point is that all this is rather unique. So I'm about to mark up the text to indicate all this. A semantic way to do that would be to invent a notation that is as unique as this book. There will be "<ashby-chp>", "<ashby-div>", "<ashby-unit>" and such. We do not specify how this is going to be rendered, but at least we faithfully describe what we have without losing anything and without adding anything irrelevant. Now we want to render it on a visual media. Here we have a different notation that describes fonts, styles, spacing and so on. These are very different distinctions from the structure of the book, but are very approriate for typesetting. We decide how we represent our "ashby" distinctions with these tools and write a transform from our notation into the visual one. Same for a screen reader. Here we have a notation that describes pitch, speed, etc. No spacing or fonts, of course. We decide how we are going to represent our distinctions with these and come up with another transform. At each step each element in our notations has a clear purpose. The "ashby" notation captures all the distinctions the author needs to make his point. The "visual" and "aural" notations are tools to express distinctions that can be made on a specific media. This is semantic. And this, by the way, is the original idea of XML (a multitude of notations) and XSLT (the notation transformer). [And the description of the transforms also uses yet another notation with yet another clear purpose :)]
- Thorrez 4y ago>The <i> HTML element represents a range of text that is set off from the normal text for some reason, such as idiomatic text This seems backwards to me. Doesn't "idiomatic" mean natural-sounding? Setting it off from the normal text seems kind of the opposite.
- IshKebab 4y agoNo. Idiomatic means "the normal way of doing things" basically. So in that context they are trying to say "et cetera" is the normal way to say "and so on" even though it's not English. It's a big stretch though. You wouldn't use "idiomatic" to describe that text unless you really wanted to find a word starting with i.
- Thorrez 4y agoWhat you're saying seems to agree with my point. If something is "the normal way of doing things", why would it be "set off from the normal text". You're saying idomatic means normal, whereas MDN says it means "set off from the normal", aka abnormal.
- p4bl0 4y agoI've been using <i> for things like inline simple math. I set it to display using serif font and in italic using CSS (while the surrounding text is not in italic and also using sans-serif fonts). The results is good visually, it works. And I felt like it was a good use of this tag. I'm now even more convinced! Thanks for sharing :).
- bentley 4y agoAn alternative that’s slightly more semantic would be Unicode’s Mathematical Alphanumeric Symbols block.
- candu 4y agoConversations around semantic HTML make me wonder: asking devs / product teams to use semantic tags, ARIA attributes, etc. doesn't seem to work; perhaps we should focus on making screen readers and other assistive tools smarter? Put another way, where's the assistive technology equivalent of OXO Good Grips? I'd imagine a tool that is part ad-blocker, part auto-summarizer, part navigation helper, part personal curation assistant; that does the Right Thing (tm) 90-95% of the time, even on highly dynamic web applications (since that's already _way_ better than the proportion of sites / applications built with a11y in mind); that people in general find to be a superior user experience, regardless of whether they have disabilities or not.
- Puts 4y agoFun fact! Italic typefaces was originally not designed for emphasizing text but as a way so save paper since the slanting allows the letters to sit tighter.
- tgv 4y agoAnother fun fact. In linguistics, italics is used to denote the utterance rather than its meaning. It's not emphasis, but a visual signal that says "this bit is in another language or a single syllable or whatever we're discussing".
- madmoose 4y agoIronically, in the list of examples of how to use <i> under Usage Notes, they actually use <em> instead.
- denton-scratch 4y agoIndeed: "<em>What is this writer talking about, anyway?</em>". I don't find that ironic, though; I think it bespeaks the carelessness with which the HTML "standard" is being jerked around by various unaccountable pressure groups.
- chrismorgan 4y agoNonsense. This is MDN docs, not the spec. Don’t conflate or confuse them. In this specific case, it’s probably just a bad mechanical translation, possibly from long ago as part of a batch i → em change, or possibly recent in their conversion from HTML to Markdown (might have done both em and i → *). Ill-conceived in either case, but not the end of the world.
- denton-scratch 4y agoYou're right; I have conflated them, for many years. Fact is, MDN docs is a million times easier to read than the specs, which used to be clear, but are nowadays full of struckout text and references to other documents. If MDN docs is autogenerated, that's regrettable. I swear I'm not going to fall back on W3Schools. Incidentally, whatever happened to W3Schools? There was a time when every google search for anything remotely similar to web development came up with the top 5 links being to W3Schools. Nowadays not so much. Did google finally decide that W3Scools content amounted to disinformation?
- masswerk 4y agoFun fact: in manuscripts, italic is represented by a single-stroke underline. An equivalent print representation is spaced text. These forms are sementically identical. BTW: The <u> element has been rebranded as "Unarticulated Annotation". :-) https://developer.mozilla.org/en-US/docs/Web/HTML/Element/u https://developer.mozilla.org/en-US/docs/Web/HTML/Element/u (So traditional emphasis is now both idiomatic and unarticulated.)
- jansan 4y agoUnder Usage notes it says: - Ship or vessel names in Western writing systems Am I the only one finding this a bit overly specific?
- josteink 4y agoSomeone is trying too hard to make something very normal seem niche. They’ve probably gone to a school whose curriculum includes the terms “critical” and “theory” and “colonialism” more often than not.
- tgv 4y agoHTML is really rightly coupled to layout, even though it's a ridiculous format. And semantics isn't linear, like HTML is. If you want some vague form of semantic representation (because there's no good, universal semantic representation, and the rest is just data tagging), use something else, or add a new namespace if you want to abuse HTML even further.
- denton-scratch 4y agoThis is quite annoying. There is a lot of web-pages that use <i> to mean "italic"; possibly most of them. Many of those are not going to be updated just because of a change in the definition of the tag. Instead, they should have introduced a new tag, e.g. <idiomatic>, while deprecating <i>. Most internet standards are descriptive, not coercive. The semantic web's advocates have been coercive from the beginning, but despite the repeated failures of coercion, they keep on at it. What does "idiomatic" mean anyway? If I say that idiomatic markup is a waste of time, do I have to put "waste of time" in an <idiomatic> element? How is text in "another language" idiomatic text? [Checks for another example] Oh, that's the only example they give of something that's "idiomatic". It seems clear to me that "idiomatic" isn't what they mean at all; what they mean is some text fragment that should appear differently, because in some way the "mode of speech" is to be treated differently. It looks as if they've hijacked the <i> tag because they want it to stop meaning what it means; they've chosen a meaning that starts with the letter "i" for that reason. The way I parse it, "idiomatic" text is any kind of text that would normally be set apart by being presented in italic. That is, it's not even semantic markup at all; it's a politically-correct gesture to the semantic markup die-hards.
- mysterydip 4y agoNext up: "<b> is for... beneficial text."
- unsafecast 4y agoIt's actually for "bring attention to" :) https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b
- capableweb 4y agoNot to be confused with "<strong>: The Strong Importance element"
- Garlef 4y ago
- AnthonBerg 4y agoI prefer ∠this⦢ way to mark text ∠italic⦢ and ⁎this* way to mark it as ⁎bold*. These are the symbols: — Italic: ∠ ANGLE Unicode: U+2220, UTF-8: E2 88 A0 ⦢ TURNED ANGLE Unicode: U+29A2, UTF-8: E2 A6 A2 Bold: ⁎ LOW ASTERISK Unicode: U+204E, UTF-8: E2 81 8E * ASTERISK Unicode: U+002A, UTF-8: 2A — I just made this encoding up. Ah, it would be more correct to say I just made this markup up. I made it up and nobody understands it. …Or yeah, actually most people will understand it?
- jonstewart 4y agoWho says sophistry is dead?
- epolanski 4y agoOkay, I've got a question then. If I have a label to some form element in italic, it would not be correct to write it as <label><i>Name:</i></label> , right? There's no surrounding text it needs to distinguish from and the fact that it is a label should already point out to screen readers that it's a label, while adding an italic font to the label without the i should distinguish it visually, is it correct?
- thesneakin 4y agoToo bad memes can't be included: "<i> is profanity. --- Change my mind."