Forward Compatibility
As mentioned in the comments, creating elements like this is unsafe. For example, pretend the input element didn't exist, but was created later.
Some Content
Browsers rewrite this to (XHTML for clarity):
Some Content
SEO and Accessibility
HTML5 pages provide elements that describe the content. This helps search engines to understand your page. If they don't understand your page, it could lower your ranking.
If you insist on using these tags, and use them for more than a block of text, you should give them roles and aria-tags. This aids search-engines and people requiring screen-readers or other accessibility services.
Styleability
Some browsers won't let CSS styles take effect until you create an element programmatically. It's the same technique used by the html5shiv to get old browsers to support the new HTML5 elements.
document.createElement("arial"); // don't need to do anything with it
Browser Alternative: data-*
demo
You can use data-something attributes to tag elements for replacement. For example:
Large Text
Then, you can use a rewriter to replace these with different HTML. This example uses jQuery and an extremely simple templating language.
rewrites = {
large: '{}'
};
function rewrite(r) {
for (rule in r) {
// build a selector in the form of [data-something]
var selector = "[data-{}]".replace("{}", rule)
$(selector).each(function (i, el) {
// get our inner html and inject it into our template
var inner = $(this).html();
var templated = r[rule].replace("{}", inner);
// replace the element with our new HTML
$(this).replaceWith(templated);
});
}
}
rewrite(rewrites);
Server Side / Build
You can write your code using any tags you like, but transform it on the server before it reaches your browser. Here's a demo written in jQuery (client-side) but compatible with Cheerio (nodejs).
rewrites = {
large: '{}'
};
function rewrite($, r) {
for (rule in r) {
$(rule).each(function (i, el) {
var inner = $(this).html();
var templated = r[rule].replace("{}", inner);
$(this).replaceWith(templated);
});
}
}
rewrite($, rules)
This can either be worked into a build-script, or as a very simple server-side template. This way, browsers and search engines never see our made up elements. I recommend this solution, if you need these virtual elements.
