- Custom tags are valid HTML and accepted in all browsers (including IE!).
- Create your own named elements.
- Custom tags cut out the need for long lines of HTML with class names and make your HTML easier to read.
- No need for javascript. Style with CSS.

For example coding see this pen . For more info: Matthew James Taylor

Always use custom tags inside semantic elements otherwise the browser may ignore them. Don't replace semantic tags with custom ones.

Custom tags should always start with a letter, contain a hyphen, and may also contain numbers and even emojis, i.e. `<custom-box-2-🧐>` .

Do not use uppercase letters.

`<custom-box>` ✓
`<custom-box-2>` ✓
`<custombox-2>` ✓
`<custombox-👽>` ✓

`<custombox>` ✗
`<customBox-2>` ✗
`<2-custom-box>` ✗
`<custom-box />` ✗

Custom tags are not self-closing and a closing tag should always be used, i.e.
`<custom-box>
</custom-box>`

A custom tag displays inline by default .

`<my-box></my-box>` `<my-box></my-box>`

Use display: block; to change its behaviour to that of a div element

`<my-box></my-box>` `<my-box></my-box>`

Style your custom tags with CSS in the usual way, i.e.

`custom-box {
<-- styling here -->
}`