Extending HTML5 tags collection
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>
4 answers
solution1
5 2012-03-23 08:33:55
This seems to be a use case for RDFa. Actually, there is a very similar example in the RDFa specification . Here is what you can do (I know, it's more verbose than what you propose but who said that more semantics means more conciseness?)
<html
xmlns="http://www.w3.org/1999/xhtml"
prefix="bibo: http://purl.org/ontology/bibo/
dc: http://purl.org/dc/terms/"
>
<head>
<title>Title of the web page</title>
<style type="text/css">
div[typeof="bibo:Book"] {
color: red;
}
span[property="dc:title"] {
font-weight: bold;
}
</style>
</head>
<body>
<div typeof="bibo:Book">
<span property="dc:title">My title</span>
</div>
</body>
</html>
Here, you are saying that there is an entity of type bibo:Book (you need to define a namespace which refer to a vocabulary, here the Bibliography ontology ) and this entity has a dc:title (again, the property is defined in the Dublin Core vocabulary). You can see that I'm using CSS2 selectors to format the book as appropriate.
solution2
2 2012-03-23 08:49:11
<title> is already an element in HTML. Do you know what happens if you do this in all HTML consumers? In IE8 and earlier for example?
Even if you restrict yourself to elements that don't currently exist in HTML, how can you prevent an element of the same name being invented in the future, with behaviour in browsers that breaks your page?
solution3
1 2012-03-23 08:44:33
What you want can be done in raw XML...
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="main.css" type="text/css"?>
<Root>
<book>
<title>
My Title
</title>
</book>
</Root>
and main.css:
book {
display: block;
color: red;
}
book title {
display: inline-block;
font-weight: bold;
}
Concise enough?
solution4
1 ACCPTED 2012-03-23 11:36:54
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 (eg, 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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.