I have a need to add an attribute to the title tag, perhaps a class attribute. Is this valid xhtml? What are the allowable attributes for the title tag?
http://www.w3.org/TR/html401/struct/global.html#h-7.4.2:
<title> element appears in the <head>, which means you can’t target it with CSS, hence there is no need for the class attribute.
Which, by the way, is not supported by the <title> element:
Attributes defined elsewhere
* lang (language information), dir (text direction)
You also don’t need a class for it since there is only one <title> per html page.
Why do you think you need an attribute for the <title> tag?
You can actually target it with css but why you would want to do so is beyond me. It’s invalid to use a class but an id will validate.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title id="red">Untitled Document</title>
<style type="text/css">
head {
display:block
}
#red {
display:block;
background:red
}
</style>
</head>
<body>
</body>
</html>
Head elements are set to display:none by the browser but you can turn them on again and they will display in the page.
It’s of absolutely no:) use though other than a trick but interesting all the same.
If the OP was thinking of styling the actual title text that the browser displays in the chrome then that’s impossible.
Thanks for all the feedback. I’m not looking to style the title tag. Just needed to add an attribute to it to foil external plugin’s attempts to rewrite post titles, since my theme already has onboard SEO.
An id will only validate in xhtml. In html id for <title> is still an invalid attribute.
Obviously, id in x(ht)ml makes some sense, but certainly not for CSS. Or maybe not?
Also obviously, any element accepting content in the <head> would be displayed. That leaves out void elements like <meta>.
The following examples shows what you can do with invalid CSS code: force browsers to render inept web pages. Aside from the display for content in elements inside <head>, I’ve extended the wrong use of id, which is perfectly OK, it seems It works, isn’t it?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title id="red">Untitled Document</title>
<style id="red" type="text/css">
head {
display:block
}
#red {
display:block;
background:red
}
</style>
<script id="red" type="text/javascript">
(function()
{
if (window.addEventListener)
{
window.addEventListener("load", hide_loading_screen, false);
}
else
{
window.attachEvent("onload", hide_loading_screen);
}
})();
function display_loading_screen()
{
document.getElementById("loading_screen").style.display = 'block';
}
function hide_loading_screen()
{
document.getElementById("loading_screen").style.display = 'none';
}
</script>
</head>
<body>
</body>
</html>
That doesn’t mean we should do it, or that it’s OK for me to do it like that if I find a reason. It means I should not abuse the good will browsers have towards me and my code!
Why you posted this in CSS forum then?
Good point. Mods will feel free to move this to a more appropriate forum…sorry about that . I should have posted it to SEO.
We can still style it though
head {display:block}
meta{
display:block;
width:300px;
height:500px;
background:green
}
Only useful for fun though
(to anyone watching don’t do this)
I’m still a bit confused as to what you want
If you want to dynamically add an attribute to an element then that would be a programming job (js or php).
I’ll move the thread but I don’t think seo is appropriate for a programming request
Yep, me too
I’m not trying to dynamically add the attribute. I’ll just add it to my theme’s title tag. It could go in php or SEO and there are arguments either way. Tossup perhaps.
I say SEO because other theme developers might have an issue with how the near ubiquitous “All in One SEO Pack” plugin rewrites post and page titles without regard to what the theme is already doing. Most users just install it and trust it, but in certain instances, it can conflict in ways that only the theme creator knows.
The addition of an attribute, any attribute, it seems for now, throws off the plugin to the point that it no longer rewrites the title in this case. Its a hack, but an easy one. I just added a xml:lang=“en” attribute to my title tag to sidestep the plugin rewrite of the title tag and only in a very limited scope.
Or for messing up with ppl
I should have tried it before posting
So have you solved this now then? There was a discussion here about some similar bug that has now been fixed in the seopack.
To answer your question the only allowed attributes in html for the title element are “dir” and “lang” with id also allowed in xhtml as mentioned before.
Yes, I discovered it by accident, after weeks of searching for a way to intercept and filter the plugin’s functions.
Actually, I’m using…
<title xml:lang=“en”>title of page</title>
Are both lang= and xml:lang= valid?
Seems to pass validation so I don’t expect there will be any problems with it.
It depends up on what version of XHTML you are using as to whether you can use the backwards compatible HTML lang attribute with the xml:lang but if you are using vanilla XHTML 1.0 then, yes.
So which version is more compatible or preferred?
<title lang=“en”>
OR
<title xml:lang=“en”>
Scott: I would think lang=“xx” would be preferred.
The xml:lang attribute is the xml “version” of the language attribute. Usually you see it on the <html> tag, but I believe (Robert could say for certain) that it could be placed on any tag who can have a language setting.
Since most people send their XHTML as text/html, I don’t see any reason not to just use “lang”.
The xml: version should only be used if you are serving the page as XHTML or XML.