-1

I'm currently working on a piece of interactive fiction, and part of it requires the reader to look at the HTML document itself. I want to make it as readable as possible, especially for people who aren't used to looking at HTML documents. I already am using very specific class names to style certain elements (i.e. <span class="game_mechanic_A">) but there are parts of the text that I want to "highlight"/draw attention to in a more streamlined manner.

I was thinking I could do This text is <foo>important</foo> for the story instead of This text is <span class="foo">important</span> for the story. In my own testing it seems to work fine, but I am absolutely not an expert on HTML so I don't know if there's something I'm missing. I have noticed that in the inspect pane/panel it formats it like so:

This text is
<foo>important</foo>
for the story

...which feels like a nice bonus, since it brings even more attention to what's in <foo>. Would I be making a huge mistake if I do this? I don't actually want the tag to do anything, just be "formatting" in the HTML document.

Chasejxyz
  • 9
  • 1
  • Does this answer your question? [Are custom elements valid HTML5?](https://stackoverflow.com/questions/9845011/are-custom-elements-valid-html5) – Martheen Jun 20 '21 at 01:05
  • It would do nothing to your eyes, but screen readers would be awfully confused! – no ai please Jun 20 '21 at 19:35

1 Answers1

0

Mostly, no. What's the difference between the two snippets below?

<invalidtag>some tag</invalidtag>

<span>some tag</span>

You can't see any difference in the rendering output. But this doesn't mean it is always no.

The browser renders it as an inline element, like <span>. So, if you replace <span> with <invalidtag>, it will still work.

This is really bad practice though, don't do it!

  • It triggers a markup validation error: Unknown tag <invalidtag>.
  • Screen readers do not know how to handle it. The blind people are cut off from enjoying your site.

So, invalid tags are rendered as spans, but don't do it.

To make it more clear:

<p>This is a p tag with a <span style="color:red;">red span</span> inside.</p>

<p>This is a p tag with a <invalidtag style="color:red;">red invalid tag</invalidtag> inside.</p>

<small><em>No difference, eh? Try using a screen reader or looking below!</em></small>

<p>This is a <div style="background-color:cyan; border:1px solid black;">div</div> inside a p tag.</p>

<p>This is a <badtag style="background-color:cyan; border:1px solid black;">bad tag</badtag> inside a p tag.</p>
no ai please
  • 732
  • 3
  • 11
  • 24