You can make up HTML tags

Posted by todsacerdoti 13 hours ago

343 points | 126 commentspage 4

mg 8 hours ago|

My problem with custom tags is that they require a hyphen, and that makes it impossible to have consistency between tag names and variable names.

With classes, I can do:

    carList = document.querySelector('.carList')

With custom tags, that is not possible because variable names cannot have hyphens in them.

gkoberger 12 hours ago||

I probably wouldn't do this for a lot of reasons.

That being said, if you read through that post and were intrigued, you might also like custom web components: https://web.dev/articles/custom-elements-v1

It's a simple way to add more to your "made up" HTML tags. So you could have a tag called <my-code>, for example, that automatically has a copy button and syntax highlights the code.

callc 12 hours ago||

Wow, this is great, unlocks lots of freedom. I was under the impression that this was not possible, maybe through web components or <slot>.

As a side note, I’ve been going through all the HTML elements slowly to learn the fundamentals, and it turns out that lots of elements are just a <div> or <span>, with different default styles and default ARIA things.

And a <div> is just a <span> with display block…

This and TFA both help me to realize HTML is pretty darn simple.

pests 11 hours ago||

> And a <div> is just a <span> with display block…

It's a bit more subtle than that. HTML5 defines "Content Models", two of which are 'Phasing Content' and 'Flow Content'. Phasing Content can only contain text and text-like tags (em, strong, bold) whereas Flow Content can contain anything.

Technically <span> is defined as accepting Phrasing Content and <div> accepts Flow Content. Changing this with CSS doesn't change the content model.

Although browsers are very forgiving so it all works anyways and this is very in the deep end, I can't think of the last time I've consciously thought of this stuff.

https://html.spec.whatwg.org/#the-span-element

https://html.spec.whatwg.org/#the-div-element

https://html.spec.whatwg.org/#content-models

Devasta 3 hours ago||

You've always been able to do it, doesn't even need to be HTML, serialise as XHTML and you can include the tags on your own namespace and have separate CSS for them.

<!DOCTYPE html>

<html

        xmlns="http://www.w3.org/1999/xhtml"

        xmlns:ns1="mynamespace"

        xmlns:ns2="yournamespace"

<body>

<CustomElement>Hello</CustomElement>

<ns1:CustomElement>Hello</ns1:CustomElement>

<ns2:CustomElement>Hello</ns2:CustomElement>

    @namespace ns1 "mynamespace";

    @namespace ns2 "yournamespace";

    CustomElement {

        color:green;

    }

    ns1|CustomElement {

        color:red;

    }

    ns2|CustomElement {

        color:blue;

    }

</style>

</body>

</html>

ycombiredd 12 hours ago||

As someone who writes html only rarely (I'm more of a "backend" guy, and even use that term loosely.. most of my webdev experience dates back to the CGI days and often the html was spat out by Perl scripts) and usually in vim, I am pleased to know there is an in-built solution outside of me properly indenting or manually counting divs. Thanks for enlightening me.

wging 12 hours ago|

A more common alternative to counting divs would be CSS classnames or (for unique elements on the page) IDs. You'd do `document.querySelector('.my-class')` to locate `<div class="my-class">` or similar, rather than using the fact that e.g. something is nested 3 divs inside <body>.

Even if this custom element trick didn't work, I don't see why one would need to count divs (at least if you control the markup, but if not then made-up tags aren't an option anyway). The article even mentions using class names as an option.

ycombiredd 11 hours ago||

Sorry, I didn't mention class names because the article explicitly did and I assumed that my aversion to the extra typing would be presumed by a reader of my comment. My mistake.

So yeah, I guess what wasn't obvious from my statement of gratitude was that I appreciate knowing that there is a more concise way of keeping track - even without CSS styling. If I make up tags, they will just inherit default styling but to my eye I can be clear about where things are closed, and where to insert things later. I was talking about the manual editing (in vim, as I mentioned), rather than any dynamic query selectors. Make more sense?

cheeaun 10 hours ago||

Many years ago, IE requires `document.createElement`.

HTML5 Shiv was needed, with added history https://www.paulirish.com/2011/the-history-of-the-html5-shiv... (2011)

zkmon 9 hours ago||

That is ... XML without schema but with CSS support. Cool.

singpolyma3 11 hours ago||

You can but you never ever should. Do not do this. Use the `class` attribute to provide extra context about the kind of data your tag represents, that is what it is for.

yawaramin 10 hours ago||

See https://news.ycombinator.com/item?id=46417607

lytedev 10 hours ago||

Why is this?

superkuh 12 hours ago|

https://blog.jim-nielsen.com/2023/html-web-components/ - Jim Nielsen has a series of posts on how to use made up HTML tags in a way that doesn't just fail to nothing when the javascript defining the custom-element doesn't get successfully executed.

More comments...