HTML5 custom tags, validity and backwards compatability

[csdude55]

I'm curious what the overall consensus is about custom HTML5 tags?

I understand that they DO work, but you're required to preface the tag with x-... eg, <hi>Hi!</hi> doesn't "work", but <x-hi>Hi!</x-hi> does. Sorta like the data- prefix for attributes.

But I'm not sure if this validates to W3C standards, so does it affect search engine placement?

And how about older browsers, like IE9? I still have a fair amount of traffic from older browsers, so I have to make things at least degrade in an acceptable manner. Is there any way to make them recognize the custom tag appropriately?

I'm really only interested in custom tags for the sake of minimizing the size of my documents. I could realistically change <div class="hi"></div> to <x-hi></x-hi>, saving 9 bytes per tag... minimal, yes, but I have pages with 250+ DIV tags so the savings could add up. And any fraction of a second saved inevitably turns in to more page views :-)

[Marshall]

have pages with 250+ DIV tags

Why so many?

[lucy24]

Why so many?

That was my first reaction too, but I took the precaution of checking. My personal record appears to be 3012--a figure that frankly staggered me. But that’s in a text that (a) is over 300 pages, (b) was written by a German (c) in 1880 (d) using three languages. With a dense tangle of commentary, apparatus, primary text, marginalia and so on, vast numbers of divs are pretty well a given. Even without critical apparatus, it's fairly easy to go into the hundreds if each illustration requires opening and closing a div, a pattern I use fairly often for readability's sake.

Another way to make the divs pile up is to multiply your CMS themes. In addtion to the added stylesheets, each new theme seems to create at least two more layers of nested divs.

[csdude55]

Yup. The page I checked was the list page for the classifieds, which has 20 records per page.

Looking at my live site (not the one I'm building), the header page has 122... mostly in the navigation. And the footer has another 68. So before I even get to the content of the page I have 190 div tags. If custom tags are widely accepted then I could realistically cut every page down by 1.7kb.

The header also has 168 <span> tags, which could also be replaced and save even more space.

I haven't tested my "new" design yet, but it could be higher since I'm replacing my old usage of tables for formatting with CSS styling.

[lucy24]

The header also has 168 <span> tags

For this kind of thing I like to cheat by repurposing some long-established markup that I don't ever use, for example
u {text-decoration: none; other-recurring-style: blahblah;}
Unfortunately there's no convenient analogue for block-level markup, unless you've got the nerve (I don't) to similarly repurpose table markup, or lists or whatever suits.

Many browsers--unfortunately not all*--will even let you style attributes that don’t exist, so in the preparation stages my texts will be littered with <f> (font change) and <sc> (smallcaps) and so on ad lib.

But this is all drifting away from html and into css.

Edit: I'm a great fan of reducing filesize wherever possible. But 1.7K is pretty meaningless when you consider the average size of even a single image. (To say nothing of grossly un-resized images. When you can watch an image slowly loading onto the page, unrolling pixel by pixel, you know that the original is multi-megabytes, most often for absolutely no good reason.) Heck, even your average stylesheet is bigger than that. Not worth bothering about unless a significant proportion of your readers are on dialup.


* No prizes for guessing which browser won't let you do this.

[csdude55]

Not worth bothering about unless a significant proportion of your readers are on dialup.

This is, indeed, the case with me. At least some of my sites are in very rural areas, where dialup is the only option and there's no such thing as cell service.

Seriously.

At my house, right now, the fastest DSL I can get is 3MB. On rainy days, my internet speed is often less than 1MB.

But either way, since I'm rebuilding everything right now I'm trying to shave tiny bits where I can, using the logic that every fraction of a second saved has the potential to turn in to more pageviews. Even just 1 more pageview per session could make me an extra few hundred dollars a month. It costs me nothing to change a <div> to <x->, and since I'm rebuilding anyway then it's a minor effort... if it's all advantage within minimal disadvantage.

[lucy24]

dialup is the only option and there's no such thing as cell service

Yikes. And if they did have an alternative it would be satellite internet, which is almost as glacial as dialup. Gotcha. It's not that long since a part of my own target audience was in a part of the world that simply didn't have high-speed internet (DSL or cable) ... and quite a few government offices used MSIE 6. It does tend to cramp one's style.

[tangor]

All the above being true, there's still a KISS version which is not being applied. Just because you CAN style something does not mean you SHOULD style it. CSS the standard stuff and go from there. Keep your triggers corralled and minimal. JS (which I don't) the rest as needed.

After all, somebody ("you", for example) will have to maintain any complicated presentation (display) down the road. Few of us have perfect memory and it is all too easy to break something like that with unexpected parent/child inherit problems (for example).

[edited by: tangor at 5:26 am (utc) on Jun 14, 2018]

[tangor]

Secondary thought on some of these issues is accessibility and those vision impaired users running high contrast (color denied) and font choice denied, with a default font of their choice and size (minimum) and might be reliant on internal Zoom to boot. This is a growing number of users who will never see the fine points and could care less, but remain the largest group of spenders/conversions, at least until the end of the next decade.

[tangor]

Backward compatibility is not the issue. Future user compatibility/device choices is. IE9 won't be around much longer (hardware does die so even the most ardent slow pokes will disappear).

[QuaterPan]

Since you are using '<div>' it means the next element is certainly also a block element. In that case, you can also do this

<p class="hi">Hi!

Without the closing '</p>', which is permitted in HTML 5 if the next element is also a block element. This is only one more byte than "<x-hi>Hi!</x-hi>" and you can style your <p> to remove margin, and padding.

To reduce page size, you can also increase the compression level (gzip,deflate, etc...)

About compression, it's also possible that "<div class=" compresses better than "<x-xxx>" , because, the same series of characters "<div class=" will appear often, and so compress better than plenty of "different" <x-xxx>.

Also, you don't have to add a class to all elements you style. You can also play wit the "nth-child" pseudo-class for recurring series of blocks (like for a table for example).