13: The HTML <head> element

Forums » Article Discussions

Discuss the articles posted on Dev.Opera.

Note: You need to login to post in the forums. if you don't have an account you first need to sign up.

By ChrisHeilmann Tuesday, 8. July 2008, 07:13:20

In this article, Christian Heilmann takes you through the most important parts contained within the HTML <head> element. This is the part of the HTML that describes your document, and links it to further resources.

( Read the article )

By Ton-Lankveld Friday, 18. July 2008, 18:06:27

One attribute of the <html> tag I would like to see in this chapter is "lang" or "xml:lang". it indicates the natural language used in the document.
In my opinion this is important for search engines and assistive technologies.

By r12a Wednesday, 8. October 2008, 16:59:19

The language codes may be two-letter codes, such as en for English, four-letter codes such as en-US for American English, or other, less common, codes. The two-letter codes are defined in ISO 639-1.

Hi Chris. Please note that people should use the IANA subtag registry for language codes, not the ISO lists. For more information, go to http://www.w3.org/International/articles/language-tags/.

Ideally, the language would be set on the html tag, which is not strictly relevant to the head element (though it's still worth mentioning it, i'd say).

Also, none of your example code declares the language. I think you should follow your good advice ;-)

Hope that helps.

By chrismills Wednesday, 8. October 2008, 21:42:36

r12a: I've added some further explanation. You are right about the code samples - I will add language to them as soon as I get the time ;-)

By Dylan1968 Monday, 17. November 2008, 21:45:29

Originally posted by ChrisHeilmann:

Stop right there! Inline CSS and JavaScript is not too clever!

How about dynamically generated css? In some cases it might be very useful to use dynamically generated css and perhaps a bit of javascript.. ah well, the java (or other) script can be easilt linked, but css generally resides in a css file or in the head.

Let's say I have a basic CMS I'd use often... and a basic grid of positions. Depending on what modules are loaded I'd might use different css. No side module loaded, expand the main content

Another reason might be to have the css dynamically generated is that I can give it parameters, i.e. as to widths for page or any (wrapper) div, margins, positions, float left or right for one thing and float:$other for the other... I'll just change the parameters and voila, I have a "new template". Instead of a menu on the left, it's on the right.. variations on a theme.

Or perhaps I'd might wanna give higher memberships (i.e. paid accounts, worthy community members, forum ranking, etc) different css so they get less-annoying banners... they might still get them, but they're out of the way less of in your face.

Just my 2c, maybe in some cases it's not not too clever to use inline css ;-)

Post edited Monday, 17. November 2008, 21:54:39

By dorward Monday, 17. November 2008, 22:51:32

Originally posted by Dylan1968:

Let's say I have a basic CMS I'd use often... and a basic grid of positions. Depending on what modules are loaded I'd might use different css.

All those examples could be simply handled with classes.

By Dylan1968 Tuesday, 18. November 2008, 07:14:26

Huh? Yes of course classes and ID's... Despite my prolixity I may have failed to properly explain myself: the whole point is that the css for id or class itself might need to be different...

Maybe this one tiny example will clarify one of the scenarios/reasons. Naturally the parameters would be put into a config file or somewhere in a database. You can also use http post and get or even cookies if you want the user to be able to choose/keep his favorite layout..

<?php

$pagewidth = 800;
$sidewidth = 200;
$mainalign = 'left';
$css = array();

if ($mainalign == 'left') {
$other = 'right';
} else {
$mainalign = 'right'; // typos revert to 'right'
$other = 'left';
}

if loaded(side) {
$css[] = '#main {float:' . $mainalign . ';width:' . ($pagewidth-$sidewidth) . 'px;}';
$css[] = '#side {float:' . $other . ';width:' . $sidewidth . 'px;}';
} else {
$css[] = '#main {width:' . $pagewidth . 'px;}';
}

foreach ($css as $line) { echo $line; }
?>

loaded(side): as y'all 'll understand: this (CMS) function checks whether the side thingie is loaded

So how would I put a feature like this in external stylesheets? Can I use php in .css files? Or can I link to a stylesheet named mysheet.php (or for that matter, perl, cgi, asp whatever)

In my limited knowledge and experience I have assumed the <head> section in a webpage would be the most logical place for something like this.. just enclose the whole thing in <style> and </style>.

Let's say you put it into mycss.php and do an include somewhere in the webpages' head section, a foreach ($css as $line) { echo $line; } would still generate the css and put it in the head anyway..

I can also not write to a css file on the server and then link to that.. the next client might view a different page, where different thingies are loaded and therefore requiring different css

Alternatively, I could do these calculations in the body section, simply echoing different html such as

<body>

<?php if loaded(side) {
echo '<div id="main-' . $mainalign . '">';
/* do your content here */
echo '</div>';
echo '<div id="side-' . $other . '">';
/* do your side thingie here */
echo '</div>';
} else {
echo '<div id="main">';
/* do your content here */
echo '</div>';
};?>

</body>

Calculating it within the body, writing to divs instead of to css would be fine if it were just the few parameters and just the two divs as in this example... but it tends to grow very complex if you have a magnitude of parameters.

Any thoughts on this ??

Post edited Tuesday, 18. November 2008, 08:23:24

By dorward Wednesday, 19. November 2008, 09:47:02

Originally posted by Dylan1968:

it tends to grow very complex if you have a magnitude of parameters

If there are that many options, then it is likely that you simply have inconsistant design and should aim for greater consistancy.

You should be able to define two or three basic layouts in your stylesheet, and then apply them using classes and ids in the document (using your server side program to decide which to use).

<div id="content" class="beside-sidebar"> ... </div>
<div id="sideBar"> ... </div>

... and if you have themes, then you just link to different stylesheets.

By AndBre Thursday, 8. January 2009, 16:54:36

Am I wrong or "script tag" should actually be "script element"?

Cheers

By chrismills Friday, 9. January 2009, 16:19:36

Originally posted by AndBre:

Am I wrong or "script tag" should actually be "script element"?

Strictly speaking, you are right. Changed!

By AndBre Saturday, 10. January 2009, 16:42:28

The top of the page link "Next article—Choosing the right doctype for your HTML documents" points to "http://dev.opera.com/articles/view/37-css-absolute-and-fixed-positioning/".

By chrismills Sunday, 11. January 2009, 22:28:33

Originally posted by AndBre:

The top of the page link "Next article—Choosing the right doctype for your HTML documents" points to "http://dev.opera.com/articles/view/37-css-absolute-and-fixed-positioning/".

That is very weird - I've got no idea how that happened. It's fixed now.

By QmunkE Friday, 23. January 2009, 13:32:06

Putting scripts in the head isn't always a good idea either, according to some people:

http://developer.yahoo.com/performance/rules.html#js_bottom

By chrismills Thursday, 29. January 2009, 11:40:07

Originally posted by QmunkE:

Putting scripts in the head isn't always a good idea either, according to some people:

True - we cover when to put scripts in the head, and when to put them in the body in one of the WSC JavaScript articles. These should be published by the end of this week; fingers crossed!

By scarby421 Tuesday, 2. June 2009, 00:30:05

Which is right.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> or
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> or
does it really matter ?

Login

Forums » Article Discussions

13: The HTML <head> element