<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?
For us small things, like enable reader views. For people with disabilities, it lets them effectively use screen readers.
Also, from a purely selfish aspect, I vastly prefer documents with at least a minimum of semantic organization, even if it's just header, footer, main, and meaningful heading levels.
Without those, well, it's just a document full of undifferentiated text with various attributes to distinguish it visually or typographically, and usually inconsistently used. Is this piece of text styled "bold with fontsize 16" supposed to be a second or 3rd level header?
<em> for things that are emphasized, as in emphatic expressions within text. For example "You'll get nothing and you'll like it."
> It's worth noting that the W3C specification says that a reference to a creative work, as included within a <cite> element, may include the name of the work's author. However, the WHATWG specification for <cite> says the opposite: that a person's name must never be included, under any circumstances.
(The heuristics only apply now, as there are two kinds of emphasis, which introduces some uncertainty of how things should be expressed. Moreover, as type styles have moved to CSS, there's a chance that a screen reader presentation may miss an intended separation of text.)
Edit: There's a clear meaning to the use of distinctive type styles. I don't see an intrinsic value in pretending and that there is no such intended meaning and that there should be an artificial separation, rather than generalizing on presentation styles.
Edit #2: In Antiqua, italics isn't just oblique text, it's an entirely different script. So what is the use case and the intended meaning of using a different script? Isn't this more conceptual than just using a fancy visual presentation style, which may be happily ignored in any other representation as there's probably no intended meaning to this?
Fun fact: the original HTML definition [1] has "typewriter" as the only styling element and uses surrounding underscores ("_are_") for emphasis.
[1] http://info.cern.ch/hypertext/WWW//MarkUp/Connolly/complete....
But then HTML became the rendering layer for a universal sandboxed VM, and all that went away.
Why, it has liberated us from European colonialism. <i> being no longer italic, you can wrap it around any script from the world and enjoy the semantics of it.
The phrase "What has semantic HTML ever done for us?" is a riff on the quote "What have the Romans ever done for us?" from the movie Life of Brian, about a Jewish-Roman man mistaken for another Messiah.
The Romans are, of course, Italic peoples.
Italic type is derived from a form of semi-cursive writing, and is entrenched in the European printing tradition. No punning with Italy intended.
So what does it mean if you have <i> around Chinese, or Devangari or what have you? Do you just apply shear to make the text slanted?
I suspect that it bothered some "woke" types that HTML contains Euro-centric typographical directives, so they have been repurposed to have some sort of, culturally neutral semantics that is more inclusive of the planet's diversity (pardon me if I'm not nailing the terminology here).
In short, <i> no longer belongs to whitey and his writing system.
There's actually a tag for this. I can't remember what it is, but it puts dots above the ideograms, which serves the same function.
https://en.wikipedia.org/wiki/Ruby_character#HTML_markup
With CSS `text-emphasis` we can do the dots you are speaking of:
https://css-tricks.com/almanac/properties/t/text-emphasis/
Probably there are other useful bits of HTML/CSS for Asian languages. (right to left and/or vertical writing, anyone? I always wanted to fart around with pretty-printed Chinese poems and, like, calligraphy script fonts with procedurally generated jitter.)
Edit: there are also Unicode entities for these:
Actually, yes! <i> is still defined in the standard to use the italic font style: https://html.spec.whatwg.org/#phrasing-content-3
And if there isn't an italic version of the font (often the case for Chinese etc), https://w3c.github.io/csswg-drafts/css-fonts/#font-style-pro... says the browser should programatically shear it:
> If no italic or oblique face is available, oblique faces may be synthesized by rendering non-obliqued faces with an artificial obliquing operation.
If look at Tailwind's website and examples, you'll see that it's one of the very few CSS frameworks that properly uses semantic HTML everywhere.
And there's no such thing as "semantic CSS".
Whereas with Tailwind or HTML < 5 you name you elements based on what they look like. ".font-bold" or "<b>"
> Whereas with Tailwind or HTML < 5 you name you elements based on what they look like. ".font-bold" or "<b>"
No, you don't. With Tailwind you use the semantic elements in HTML. And you style them using generic primitives
It works quite nicely.
I think the parent meant “[semantic HTML] and CSS”, not “semantic [HTML and CSS]”.
I suppose it’s easier to reason about, but it feels like it was invented by that grug brain dude who likes solving lots of problems but hates thinking.
You can contact me directly using my handle at my domain, which is 21337.tech
We need to treat the screen like a PNG which an AI can parse to determine what the text is, what text is relevant to read to the user, where and what the buttons are, how to emphasize reading the text based on the visuals, etc. It's the only thing that will scale and while difficult it seems that creating something like this is within reach.
This actually gives me a little hope that AI-interpreted UI could trigger a trend back to visually obvious and unambiguous controls.
All operating systems and platforms have pretty fluent and in-depth APIs for exposing an “accessibility tree” for assistive technologies to use. It’s your responsibility as a developer to build interfaces for actual users, and there’s very little reason not to.
That's actually a really good idea.
It's 2059. We're using browsers that render pages created with Dreamweaver and Frontpage using advanced machine learning techniques to determine that <blockquote><font size="+1"> is an entry in the table of contents, while <p><font size=+2> is a level 1 header.
I also used to believe that rigorous semantic tagging was The Way To Do Documents, and it was certainly a useful crutch, but we absolutely need to move beyond that.
Prefab[1] and especially Bubble Cursor [2] look like be super useful additions for the flat-UI era.
Here's an explanation of the accessibility features I've added to my canvas library[1]. These features may not be the best approach, or even the most appropriate approach ... but at least they're there, and they can evolve into something better as/when people offer feedback.
H2 or H3? A purely semantic distinction with Tailwind.
Use an OL for a custom list of items? You start with a clean slate, no overrides required.
And you are discouraged from writing custom CSS that causes unexpected styling as well.
Every HTML tag with an empty class attribute is a clean slate. You only have to care about the default display mode and about allowed descendants.
Just use the <em> tag.
The OP addresses "idiom in another language" as one case, but if it is within a scholarly quotation, can one change the typography to a different convention?