htmlcsstagssemantic-markup

Using custom HTML Tags

In my HTML I was curious if it was semantically correct to use unique identifiers such as <toys> rather than an <h1>. For example:

I wanted to have:

<toys class="grid_4 push_2">&nbsp;</toys>

With the CSS:

toys {
  background: url("toys.png") no-repeat scroll 0 0 transparent;
  width: 181px;
  height: 93px;
  margin-top: -8px;
}

I currently have:

<h1 class="grid_4 push_2">&nbsp;</h1>

With the CSS:

h1.push_2 {
  background: url("toys.png") no-repeat scroll 0 0 transparent;
  width: 181px;
  height: 93px;
  margin-top: -8px;
}

Is the use of unique identifiers like <toys> semantically correct?

Solution

  • It is best to avoid using custom tags, as you never know when those tags may become standardized, and have special usage in the future.

    The best thing to do for your example, if you want to avoid using the header tags, is the following:

    <div class="toys grid_4 push_2">&nbsp</div>

.toys {
    background: url("toys.png") no-repeat scroll 0 0 transparent;
    width: 181px;
    height: 93px;
    margin-top: -8px;
}

    In addition:

    If you do not use standard html tags when designing pages, they will not appear in any organized manner when styles are disabled. This is not a problem, going forward, but if for any reason you needed to view a list of "toys" without styles, you had be out of luck unless you use <ul> or <ol> with <li> tags.

    UPDATE:

    As Flimzy pointed out in the comments, custom HTML elements now have their own W3C specification. However, they are not yet fully supported.