<custom> html tags with no function?

Question

I've seen this done before on multiple websites.

What I'm looking to do is use tags like <header> and <description> and <contact> without any attributes, in place of comments, as it looks much cleaner.

However, I'm wondering whether or not they'll be any repercussions for doing so, and whether or not it's safe to do?

Answer 1

Custom tags are not evil

just consider:

• They are not recognized in IE 6-8 by default -> you have to use JavaScript to introduce each custom tag you use on the page e.g: document.createElement('custom-tag') This means your website will only render correctly with JavaScript turned on
• In most browsers your custom tags will be treated as inline elements like <span>, this means you have to write CSS to declare them as custom-tag { display: block }
• There is no resource I found that could proof that custom tags have any negative impact on search engines. In fact Google released Angular.js which promotes custom tags (<pane> and <tab>) in its examples on the front page.
• Most HTML Editors will mark your custom tags as invalid HTML, because they are.
• Your web page will not validate to the HTML spec anymore (what this means for your website is up to you..)

To summarize:

• Use custom tags when there are important elements that have more meaning than <div> and there is no existing HTML 4/5 equivalent. This is especially true for web applications which parse the DOM for special tags/attributes/classes to create components (like Angular.js).
• If all you build is a simple website with normal content, stick to standard HTML. You will want your website to work also without JavaScript turned on.
• If you build a web application where custom tags could really help to make the source cleaner and express special semantics, use them. All negative implications mentioned above (JavaScript has to be turned on / CSS declaration) won't matter much for these cases as your web application won't work without these anyway. The same rules apply to custom attributes.

Answer 2

If you want to make additional tags you can use:

document.createElement("custom")

in javascript, then you can use

<custom>bla bla bla</custom>

and apply CSS rules like this:

custom { display:none;}

but this will not be valid HTML and it is not advised to do this

Answer 3

Firstly, <header> is in fact a valid HTML5 tag. So if you're planning to use it because it's your own custom invention and not a valid tag, then you need to come up with an alternative.

Generally speaking, it's not a good idea to add your own tags.

As you can see already from the first paragraph of this answer, there's nothing to say that a tag you've chosen as a 'custom' tag won't become a standard one in the future. The next version of HTML may well contain a <description> tag. And it may have rules in future browsers which conflict with how you're using it. The <header> tag probably already does this. Be extremely cautious.

In general, it's far better to use the existing HTML tags, and simply give them a class name which indicates their function. This is the standard behaviour, and is what the browsers expect.

If you must use custom tags, be very careful with styling them, as even if it works in different browsers, they may get different default styles in different browsers. This means you need to thoroughly test your site in every version of every browser. This is good practice anyway, obviously, but using custom tags makes it even more important, and more likely to throw up unexpected quirks.

Custom tags will work in most browsers. HTML5 added a bunch of new tags, and they worked just fine in almost all existing browsers, albeit with odd styling for some. The exception (as always) is IE, but even here it can be made to work fairly easily.

IE requires a special hack to get custom styles to work. There is a small Javascript tool known as the HTML5Shiv which does this hack for all the new HTML5 tags. IE has a quirk which means it won't accept tags it doesn't recognise until they've been created via Javascript, and this quirk is exploited by the script. Weird, but it works.

Therefore, if you really want to have a custom tag, it will work in all browsers except IE. In IE, you need to do a Javascript createElement() using your custom tag, and then it will work. And then use a CSS reset stylesheet to ensure they look the same in all browsers.

So it can be done. But I still don't recommend it.

Answer 4

If you read W3C's specifications, you see that it is necessary for browsers not to bubble upo any exception. Browsers have many parsers, one for HTML, one for CSS and one for JavaScript. When you use custom tags in your HTML document, and browser tries to understand it, it simply doesn't understand. But the good point is that, it doesn't throw exception. In other words, your custom element won't cause any problem in browser.

However, you loos valid badge, that is, your HTML document won't be regarded as valid anymore.

From the point of CSS, applying CSS to tags is not limited to official HTML tags, as you can apply CSS to something like XML too (ex. Applying CSS on XML). So, you can technically format your custom element across browsers.

If you don't mind, I have a better recommendation for you. Why not sticking to community-agreed-upon HTML5 custom attributes? The start with data prefix and can pass validation tests. Ex. <a href='...' data-custom-attribute='custom-value'></a>.

Answer 5

1. They aren't HTML (except for those which are)
2. Internet Explorer (except maybe version 9) won't let you style them without JavaScript hacks
3. You may get unexpected results, especially in non-visual user agents (such as search engines) and tools that work with the DOM in the browser (such as screen readers).
4. If they get added to HTML in the future, they might not mean what you intended them to mean and default stylesheets might interact with your stylesheets in unwanted ways.

Answer 6

Short answer; don't. It will not be valid (except in XHTML where you can add such tags)

It will not only break in some browsers it will be confusing for other people to read as well.

See this qustion: https://stackoverflow.com/questions/211394/when-to-use-custom-html-tags