The <u> tag and why it should be avoided.
Tuesday the 20th of August, 2024
Ah, the underline tag tag a quick and easy way to give emphasis to an item which is much more obvious that bold or italicised text. So why do I have such a ******* problem with it?!
The World Before the Wide World of Web
Before the introduction of computer assisted writing and highlighters, underlining was the only major way to give emphasis to some text string, as it was difficult to create bold and italic text. Seriously! Get out a piece of paper and try to write in bold or italics. You're gonna have a hard time.
Then, someone had an idea, what if we underline a piece of text, to show emphasis? It's quick and to the point; a sort of "look here! this is vital information!" sort of thing. Thus, the practice of underlining became commonplace.
Later down the line, in 1963, Dr. Frank Honn created the highlighter[source], a quick and easy way to give emphasis, plus it's more colourful and can give some personality to your texts! I mean, back when you were in school, didn't you just love highlighters? I mean it might've just been me and all the other girls in my classes but shhhh. Oh yeah, this is assuming that when you were in school, you weren't allowed to use computers for your work.
If anyone in the far future finds this, yes, people had to work on pen and paper back when I was in school! There were exclusions for some people, usually for accessibility reasons, but most people had to work in a book. An exercise book if you might.
Computers, hyperlinks and emphasis, oh my!
That didn't quite work, did it?
Now, when computers, and more importantly: the internet, came about we needed a way to identify links to other pages. Now, the much-smarter-than-me people behind the internet came up with an idea: "what if we underline hyperlinks?" and it stuck! Underlining hyperlinks became common practice among all web browsers and websites. Now, this is where my problem with the <u> tag originates.
Why I think the <u> tag should not be used for emphasis
Okay, imagine if hyperlinks didn't have a unique colour on a website, or say, you can't see colour. How do you recognise a hyperlink? Usually, you notice how it's underlined and its unique colour, but you can't here. You'd have to hover/tap on each individual piece of underlined text and see if it's a hyperlink, or use context clues to work out what is, or is not, a hyperlink.
Actually, let's have a little experiment. What is a hyperlink in the following paragraph of nonsense text? (You'll need to be rendering CSS else this won't work.)
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusamus quod, ratione illum facere minima voluptates neque dolores assumenda fugiat voluptas sunt, excepturi error fuga nisi nihil accusantium odio atque explicabo. Quod quis odit rem alias sequi. Est quaerat molestias eum. Labore, quod officiis! Ut maxime a veniam quae fugiat nemo est, nihil id autem. Maiores quam voluptas dignissimos consectetur ipsa doloremque impedit, culpa laboriosam.
If you managed to recognise any of those without hovering or tapping on them, congrats! Then you've solved this problem somehow. Get in touch and I'll personally write your name onto this article in the list below.
- No one yet.
But as far as I'm concerned: underlines should not be used for text emphasis on the internet. They're too easily confused with hyperlinks, making accessibility difficult and just being a pain in general. Instead, trying thinking of more unique ways to bring something to your reader's attention.
Some examples:
- Give it a highlight!
- If not restricted by low-motion mode, make it do something fun!
- Or, just use the tried and true italics and bold text.
Thanks for reading, have a good day / evening / night, wherever you are! ttyl!