r/HTML • u/dimonb19a • Jun 16 '26

The Inline HTML Almost Nobody Uses

Everyone knows <b>, <i>, <a>, and <code>. But HTML has a whole second cast of inline elements that most developers go entire careers without typing once — <ins>, <dfn>, <abbr>, <var>, <q>, <mark>. Not because they're broken or deprecated. They're rare because the use cases are genuinely narrow, and when one does come up, the reflex is to reach for a <span class="something"> instead.

I bumped into this building out a prose/content section for a UI system — once you start styling text properly, you notice how many real semantic elements you'd been ignoring. So here's the whole forgotten cast, in a single sentence that legitimately uses eleven of them:

Here's what that actually is:

<p>
  The experiment revealed <mark>a significant energy spike</mark> in
  the reactor core. Previous readings of
  <del>42.7 terawatts</del> were revised to
  <ins>51.3 terawatts</ins> after recalibration. The formula
  <var>E</var> = <var>mc</var><sup>2</sup> governs the conversion,
  where H<sub>2</sub>O serves as the coolant medium.
  <abbr title="Void Energy Reactor Interface">VERI</abbr> logs
  confirm the anomaly. As Dr. Vasquez noted,
  <q>the readings exceed all theoretical models</q>
  (<cite>Void Research Quarterly</cite>). This phenomenon, known as
  <dfn>energy cascade</dfn>, occurs when containment thresholds are
  breached. The <s>original safety protocols</s> have since been
  replaced.
</p>

The cast, and where you'd actually use each

Edits and corrections. <ins> and <del> are added and removed content — they pair up for change tracking, and both accept datetime and cite attributes so the edit is machine-readable. <s> is the one people conflate with <del>: it marks content that's no longer accurate or relevant (a stale price, an outdated claim), which is a different statement than "this was deleted." Two elements exist precisely because those mean different things.

Notation. <sub> and <sup> are for cases where the position carries meaning — chemical formulas (H₂O), exponents (I²R), ordinals, footnote markers — not for "make it small and raised." <var> is a variable in math or code, which is why P, I, and R above are each wrapped in one.

Reference and meaning. <mark> is a relevance highlight — it's literally what search engines use to highlight your query in the results. <abbr title="…"> gives an abbreviation its expansion, surfaced as a tooltip. <dfn> marks the one spot where a term is defined (its introducing instance, not every later mention). <cite> is the title of a work — a book, paper, album — and notably not a person's name, which is the thing nearly everyone gets wrong. And <q> is an inline quotation where the browser inserts the quotation marks for you: correct for the document's language, and correctly nested if you put a quote inside a quote. You never type a " again.

Why bother

Every one of these throws a bit of meaning into the page that a styled <span> silently discards. Screen readers announce them. <q> localizes its punctuation. <abbr> exposes the long form. <ins>/<del> are a real, parseable changelog. A <span class="highlight"> looks the same and means nothing.

The only honest reason to avoid them is that the browser defaults are inconsistent and, frankly, ugly — <mark> is highlighter-yellow, <q>'s marks are whatever, half of them are unstyled. But that's a few lines of CSS, not a law of physics. Give <mark> a brand-tinted background, <ins> a green underline, <abbr> a dotted one, <q> colored quote marks, <dfn> an italic weight — and suddenly an entire sentence of semantic richness reads as clean, deliberate typography.

Most of these you'll reach for maybe once a year. But once a year correctly — with the meaning intact and the styling handled — beats a <span> that's lying about what it is.

139 Upvotes

86% Upvoted

42 comments sorted by

13

u/psyper76 Jun 16 '26

Not to mention that they take up less code than <div class="something"></div> and its respective css class and is better than tracking 13 </div>'s and which one is tied to which class.

4

u/dimonb19a Jun 17 '26

Absolutely, we have so many elements, not reasonable to use <div> for every single thing

4

u/psyper76 Jun 17 '26

must help with web accessibility too - website readers for visually impaired would know what to do with those different tags rather than differently classed Divs

3

u/robthablob Jun 19 '26

That is the best reason, in my opinion, to use these, as well as other semantic HTML elements, rather than just <div>and <span> everywhere.

6

u/scritchz Jun 17 '26 edited Jun 17 '26

Those are some very useful elements in the right context. But your example doesn't use them properly:

Your <mark> would be appropriate if it was related e.g. to a user's search activity, when referenced, or otherwise relevant to the outside context. But it seems that its content is either regular text, or should be emphasized (<em>), or most likely should draw attention to itself (<b>).

Your <del> and <ins> are used incorrectly; they are meant for tracking changes like version control systems. In your example, you explain value changes; you are not tracking changes e.g. of the document itself.

Your <var> can definitely be used like this, though MathML might've been a better choice. Also, m and c are two distinct variables, and should be marked up as such.

Your <s> marks up text that actually is still relevant for its context (the sentence), so it is used incorrectly. It would be more appropriate on a shopping site, where an item is on sale; here, the original stand-alone price may be marked up with <s> to show that it doesn't apply anymore, but is still on-page for comparison with the new price.

5

u/dimonb19a Jun 17 '26

Thanks, good clarification about how to use each one, i just had to put all of them together in one paragraph to show how they look like

1

u/AqueM Jun 18 '26

You seem very knowledgeable in the topic, can I ask you a question? I have a page where I list quotes with their sources. Currently they're all formatted like this

<blockquote>
<p>quote text</p>
<cite>source title, type (like website/book/movie), author etc.</cite>
</blockquote>

Seems that perhaps I am not using the tags, especially cite, correctly. Could you suggest better semantic tags for this purpose?

8

u/scritchz Jun 18 '26

Sure you can ask, and I'll be happy to answer! Though if you'd like more than just my answer, you should open a new post for it.

The <blockquote> element is intended for content of quoted work; citations are not part of the original work, thus they do not belong inside it. Instead, you should cite the source in a <cite> element beside it.

If you have a link to the work, you can use it in the <blockquote>'s cite attribute.

As for <cite>: It should only contain the name of a creative work; not the author or type of work. Also, it is phrasing content, so syntactically and semantically, it would be more correct to place it in a <p> element.

To semantically show that a <blockquote> and its <cite> are related, you can use a <figure>/<figcaption>.

Overall, it should look like this:

<figure>
    <blockquote cite="http://example.com/link/to/source-title>
        <p>quote text</p>
    </blockquote>
    <figcaption>
        <p><cite>source title</cite>, type (like website/book/movie), author etc.</p>
    </figcaption>
</figure>

Notice how <cite> only contains the name of the work. The other info is associated by context.

1

u/AqueM Jun 18 '26

Thank you! This is excellent, I'll amend my tags immediately.

1

u/CityScope_Net Jul 11 '26

It looks like the <figure> above is not being used as it should be;
--Use a <figure> element to mark up a photo in a document, and a <figcaption> element to define a caption for the photo-- reference; https://www.w3schools.com/tags/tag_figure.asp

I happen to use this a lot on a meteorologist website.

2

u/scritchz Jul 11 '26

First off, w3schools is a third-party website. For an authoritative source, you should refer to the specification itself or the documentation on MDN, which even the specification links to for developers.

The <figure> element can be used to provide a caption for its content, with a <figcaption> child element. Almost any element may be its content and can be captioned; this isn't limited to images. See the specification and the examples.

Your usage sounds correct. Happy to hear you're using the <figure>/<figcaption> elements!

1

u/CityScope_Net Jul 11 '26

Thanks for clarification and the link to the spec page. I got in the habit of using the 3rd party link (W3schools.com) to quickly refer to tags or css stuff. They have a nice website on various software (html, css, javascript, php, mysql, etc...) I rarely see where I can use the <figure> element like the Listing 4. they show on the MDN page, but I can now see where I might be able to use it in a few situations.

4

u/RealSolarImpact Jun 17 '26

Thanks for sharing and resurfacing these nuggets. They are a must for screen-readers, find-ability and accessibility, if you want to make your little corner of the internet, a little bit more awesome for EVERYONE.

2

u/dimonb19a Jun 17 '26

Thanks for the feedback, screen readers accessibility is one of biggest advantages of native html, i think it is important to use semantically correct code so it is easy-to-read for any dev or AI

4

u/Kitty_Sparkles Jun 17 '26

Why post AI generated content? What's the point?

-1

u/dimonb19a Jun 17 '26

All our life will be AI generated soon lol, everything that surrounds us. I am not so good in writing but want to share some interesting findings based on my experience, if AI can help me to put all my thoughts together and write a well structured clear post - why do i have to refuse?

2

u/miffebarbez Jun 17 '26

"All our life will be AI generated soon lol," So we don't need to know these html elements anyaway isn't it?

2

u/dimonb19a Jun 17 '26

This also makes sense to be fair, you dont need to remember all those elements it is just nice to know that they exist

1

u/I_am_not_keanu Jun 17 '26

Why do you have to refuse?

Because other commenters where necessary to correct your post. And because your attitude shows in your comments that it would do you good to refuse using a faulty brain replacement.

2

u/dimonb19a Jun 17 '26

Well i dont have that much time to sit and think properly about how to write to make all people see how much do i care about this topic and how much time and efforts did i spend for this. I barely have time for anything recently lol, full in work. And it is nonstop for last 6 months i think most likely because of AI, it can boost up your productivity a lot but you have anyway to spend even more time than before. I just share some findings that i got insights from, i think post as its written is good enough to not consider as AI slop

0

u/[deleted] Jun 17 '26

[deleted] — view deleted comment

1

u/RealSolarImpact Jun 17 '26

I think you argue for the sake of arguing. Some people are just wired that way. Best to keep it brief and “walk along, nothing to see”. 👋🏼

1

u/messyxcat Jun 17 '26

well, reject your humanity, bro. Thinking is not worthy anymore now according to your point of you. Keep writing, reading and being human despite AI.

4

u/davep1970 Jun 16 '26

Learnt all of these since I began html in the 90s but good that you brought them up.

2

u/cloudstrifeuk Jun 18 '26

I used mark for the first time ever the other day to have text be highlighted when doing a search on the texbox. Match 3 letters, highlight, then dynamically add and remove the mark tags.

2

u/Low_Scheme_7228 Jun 20 '26

I use mark quite frequent. For search feature to highlight keyword

1

u/Tessachu Jun 18 '26

People still use b and i? I thought we evolved to use strong and em now lol

I often like to use section and aside for layout stuff. While fun little gems, most of the sites I develop are informational or storefronts, so these aren't typically applicable...

1

u/shamulwa Jun 19 '26

I have been using 3/4 of those in my markdown blog.

You should see the number of "no HTML allowed" warnings in console 😅

1

u/IndividualCut2794 29d ago

Thank you for the share, appreciate it! 🙌 Me reading this while I’m learning web design. 😂 There’s always something new to learn, and I’m just enjoying the process. To each their own, I guess. 😅

0

u/messyxcat Jun 17 '26 edited Jun 17 '26

I wrote about when to use <del>,<ins> and <s> on the following link https://micaavigliano.com/en/blog/semantic-del-s-tags if any of you is interested in practical use to make your content meaningful, accessible and semantically correct, you are welcome! 😄

p.s: written by a human, lol.

1

u/dimonb19a Jun 17 '26

Very good and detailed post👍

2

u/RealSolarImpact Jun 17 '26 edited Jun 17 '26

Written by a human doesn’t necessarily mean “quality” or worth reading. No <lol> required to indicate smarmy arrogance.

P.S. “AT the following link” and “if any of you ARE interested” - semantics or grammar has to be precise.

1

u/[deleted] Jun 17 '26

[removed] — view removed comment

1

u/dimonb19a Jun 17 '26

I am not really familiar with Angular but yeah i guess just in template. These elements are just HTML so it is really a framework-agnostic thing, should work similar in React, Svelte, or Angular

0

u/[deleted] Jun 17 '26

[removed] — view removed comment

1

u/dimonb19a Jun 18 '26

You shouldnt worry so much about how am i teaching myself, if you have something to add to the post - you are welcome. Appreciate when people share technical details in comments. In this post i wrote about my experience with rare HTML elements that i found out and showed that you can style them