I’ve noticed that IE9, Firefox and Chrome all allow you to use arbitrary html tags and style those tags with CSS.
Here’s a sample HTML file I whipped up to test this, and it works across all modern browsers:
<html>
<head>
<title>Test</title>
<style>
h3 { font-family: Arial; }
animals { padding: 20px; display: block; background-color: #eee; }
dog { background-color: brown; color: white; display: block; padding: 10px; }
</style>
</head>
<body>
<animals>
<dog>
<h3>Dog</h3>
</dog>
<cat>
<h3>Cat</h3>
</cat>
<giraffe>
<h3>Giraffe</h3>
</giraffe>
</animals>
</body>
</html>
Backwards-compatibility aside, if custom tags are supported by modern browsers, why shouldn’t I use them (in conjunction with the existing official tag specifications) to make my markup more semantically relevant to the content, the application elements and so forth?
If you stick to the established HTML5 tags, your page will work better with other tools besides browsers, notably, screen readers. The only program that will understand your new semantics is yours, and you can write yours to understand
<ul class='animals'>just as well.When people argue for “better semantics” in HTML, they mean, “choose the tag that best represents the meaning”, usually, not a table. They don’t mean, “invent a tag that no one but you will understand.”