1

I am thinking about experimenting with a custom stylesheet. One big issue that I've seen for a long time is the simple fact that we only have h1 and p tags for typography.

It would make a lot more sense to (me to) have descriptive tags such as <hero>, <copy>, <micro>, <mini> etc that can be used instead of doing weird things like <h1 class='hero'>.

What actually happens with evergreen browsers & IE 10+ if you just define a new tag? It does work in general at least in chrome to just define a new tag and assign some CSS properties to it. However, will there be limitations on how we could use Javascript on a tag defined like this? Are there any big downsides?

I am not considering defining a webcomponent for <hero> since that would need to register a component whenever it gets attached which I'm sure would be heavy on performance for something as simple as a heading hero tag. Last time I remembered the html5shiv did something like this for IE8 or IE9. When it wouldn't know the tag it would just convert the tag to a block level element I think with standard properties. Is this what is happening in all evergreen browsers as of now, meaning as long as we don't need special events, methods and properties defined on a tag it would be ok to just write tags such as <hero>?

Andreas Galster
  • 415
  • 4
  • 17
  • you can create your own tags and style it as you expected – Azad Jun 09 '16 at 07:08
  • 3
    Possible duplicate of [Are custom elements valid HTML5?](http://stackoverflow.com/questions/9845011/are-custom-elements-valid-html5) – JJJ Jun 09 '16 at 07:12
  • 1
    Do you care about validation? Custom tags will fail something like https://validator.w3.org/ - in some browsers, you'll also cause the browser to revert to [quirks mode](https://developer.mozilla.org/en-US/docs/Quirks_Mode_and_Standards_Mode), which is not something fun to deal with. – Tieson T. Jun 09 '16 at 07:14
  • The main risk is that your element name gets used in future to do something special in browsers, thus breaking your web site. You can avoid that risk by complying with the custom elements requirement that the name of your invented element contains a hyphen. – Alohci Jun 10 '16 at 00:39
  • Plus, you’d be throwing all pre-defined semantics over board. Search engine bots and assistive technology such as screen readers etc. know the _meaning_ of elements such as headline, paragraphs, etc. - your ``, ``, ``, `` will mean nothing to them. – CBroe Jun 14 '16 at 08:31

1 Answers1

3

The the browser will stick the unrecognised element in the DOM with some default styling on the assumption that it is a new feature (and in the hope that there will be a CSS/JS shim to add backwards compatibility) rather than falling over because it's been given invalid HTML.

(Then, in the future, an element of that name does get added to the spec, and your page breaks).

Don't write invalid HTML.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335