Question

As you know HTML5 introduced some new html tag, like footer,header, …

What prevent us from using a lot of other new tag and apply shiv to these new tags? (from functional, behavior, style, structure, … viewpoints)

I want use following code (more semantic, concise and readable, a step forward Web 3.0):

<style type="text/css">
    book {
        display: block;
        color: red;
    }

    book title {
        display: inline-block;
        font-weight: bold;
    }
</style>

<book>
    <title>
        My Title
    </title>
</book>

instead of using following traditional (!) code:

   <style type="text/css">
        div.book {
            color: red;
        }

        div.book div.title {
            font-weight: bold;
        }
    </style>

    <div class="book">
        <span class="title">My title</span>
    </div>

Answer 1

Using your own tags works well up to a point, and it sounds tempting. However, you are not adding any meaning (semantics) that way; an invented tag has no defined meaning, and pretending that the tag name is descriptive of meaning is an illusion.

Custom tags have several problems. But your simple example also demonstrates extended usage of tags that are defined in HTML specifications. Who knows what will happen if a document contains several title elements, or a title element outside its “legal” scope, the head element? Who knows what search engines will think about it?

The point is that title is defined in HTML and browsers treat it in their ways, which cannot be controlled by you. If the browser decides to take a misplaced title element as if it were standard-conformingly in the head and therefore uses it in certain ways (e.g., in top bar or tab control), what can you do about it? If it even overrides a standard-conforming title element, what do you do?

If you just use custom tags, you might decide to ignore the IE problem (which cannot be completely solved using JavaScript, because JavaScript might be disabled). But you would still be using something that may crash tomorrow when some browser vendor starts supporting an extended tag and it happens to have the same name as your tag (but different meaning). And <book> is a good candidate for that. It might even make its way to HTML specs some day; HTML5 drafts already have <article>.

Your style sheet might override any default presentation describable in CSS today, but browsers might use extended CSS features or might use presentational features not describable in CSS. And new tags might have default functionality that surprises you and can hardly be anticipated now.