13: The HTML element - 日々ごちゃごちゃと考える

既に知ってることを読んでて「はいはいはいはい」とか思うのをグッとこらえるのがしんどい。はてダって < とかは < って書かないとダメなのね。

Introduction

head element のお勉強をします。

Head? What head are we talking about?

前に言ったとおり valid な HTML には doctype が必要だが、とりあえず document には head element と body element を含む html element が必要だということを指定するってことにしておく。
head element は（title element を除けば）何も表示されないから大して重要ではなさそうに見える。でも head element にはブラウザに何か指示したり document そのものに関する情報（meta 情報）が含まれている。

Setting the document's primary language

head element の parent である html element に含まれる情報として、その document の言語がある。フランス語とか英語とか。これは screen reader にとって役に立つ（同じスペルでもフランス語と英語では違う発音をする）し、サーチエンジンにも助けになる。

<html lang="en-GB">
   ...
</html>

INFO: `<span lang="fr">Bonjour</span>` みたいに、document の一部だけに言語を指定することもできる。

言語を指定するのに使う attribute は DOCTYPE に寄る:

For HTML use the lang attribute only, for XHTML 1.0 served as text/html use the lang and xml:lang attributes, and for XHTML served as XML use the xml:lang attribute only.
HTML では lang attribute のみ。XHTML 1.0 では、text/html として配信されたのであれば lang と xml:lang を、XML として配信されたのであれば xml:lang のみを使う。
Authoring HTML: Language declarations

言語コード（language codes）は、"en" のような2文字か、"en-US" のような4文字。2文字の方は ISO 639-1 で定義されている。

こっちを使え、と言ってる。がなんか長かったのでリンクだけ置いとく。

Language tags in HTML and XML

Judging a document by its title

head element 内でもっとも重要な element: title。ほとんど全ての user agent でタイトルバーに表示される。screen readers とか search engines も、document に何が書いてあるかのヒントとして使うので、人間にわかりやすく、適切なキーワードを使うことで web 上でも見つかりやすくなる。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
   <title>I am a title example</title>
</head>
<body>
</body>
</html>

これでタイトルバーに "I am a title example" と表示される。

あちこちに「よいタイトルの付け方」のチュートリアルがあるが、ほとんどは SEO に関連するもの。検索エンジンをだまそうとしないで、その document が何なのかを簡潔に書くこと。

Adding keywords and a description

要らんような気がするかもしれないけど、キーワードと説明を書く。どっちも meta element として head element 内に書く。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
   <title>Yahoo! UK & Ireland Eurosport-Sports News | Live Scores | Sport</title>
   <meta name="description"
         content="Latest sports news and live scores f..">
   <meta name="keywords"
         content="eurosport,sports,sport,sports news,...">
</head>
<body>
</body>
</html>

この document はブラウザで開いても何も表示されないが、web 上に置いといて検索エンジンが index すると、検索結果に description が表示される。ちゃんと書いとけばクリックしてくれるかも。

いくつかのブラウザは description を bookmark に表示する（description も保存する？）。

すぐにどうこうという話ではないが、description 重要。keywords も重要。

スパマーが keywords 乱用したんで今の検索エンジンは keywords を重要視しないけど、ちゃんと使えば有用。CMS の検索で使えば、全部の document 読み込んで分析しなくていいとか。

What about the looks? Adding styles

次に head element に含めることができるのは CSS。style element を使えば埋め込むこともできる。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
   <title>Breeding Dogs-Tips about Alsatians</title>
   <meta name="description" content="...">
   <meta name="keywords" content="...">
   <style type="text/css">
      body{
         background:#000;
         color:#ccc;
         font-family: helvetica, arial, sans-serif;
      }
   </style>
</head>
<body>
<p>Test!</p>
</body>
</html>

この document をブラウザで開くと、"Test!" というテキストが黒背景にグレイで表示され、フォントは Helvetica か Arial になる。

style element では media attribute によって、どの種類のメディアでそのスタイルを適用するかを指定できる

screen: パソコンのモニタ
print: 印刷する
handheld: モバイルデバイス（ケータイとか）
projection: プレゼンテーション用（Opera Show）

たとえば印刷するときは色を変えてフォントを大きくしたいなら、もうひとつの style element を追加し、media attribute を print にすればよい。

<style type="text/css" media="print">
   body{
      background:#fff;
      color:#000;
      fond-family: helvetica, arial, sans-serif;
      fond-size:300%;
</style>

Adding dynamic features using javascript

javascript によって "client side scripts" を追加できる。アニメーション・エフェクトとか、フォームの値を検証するとか。

javascript は script element を使って追加する。ブラウザがそれを見つけると、document の parse を一旦止めてそのコードを実行する。つまり、document の内容より先に javascript を実行したいなら、それは head element 内になければならない。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
   <title>Breeding Dogs-Tips about Alsatians</title>
   <meta name="description" content="...">
   <meta name="keywords" content="...">
   <style type="text/css" media="screen">
      body {...}
   </style>
   <style type="text/css" media="print">...</style>
   <script>
      funciton leave(){
         return confirm("This will take you to another site,\nare you sure you want to go?");
      }
   </script>
</head>
<body>
Test!
<a href="http://dailypuppy.com" onclick="return leave()">The Daily Puppy</a>
</body>
</html>

この document をブラウザで開き、リンクをクリックすると確認される。

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

使い回せるモノは使い回そう。

スタイルやスクリプトは別のファイルにしておいて、HTML ファイルに読み込むようにすれば、変更するときもそのファイルだけ変更すればいい。

javascript には src attribute を指定した（そして中身は空っぽの）script element を使う。

CSS はちょっとめんどい。style element には src attribute など無くて、代わりに href attribute を持つ link element を使う。media attribute もここで指定する。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict">
<html>
<head>
   <title>Breeding Dogs-Tips about Alsatians</title>
   <meta name="description" content="...">
   <meta name="keywords" content="...">
   <link rel="stylesheet" type="text/css" media="screen" href="styles.css">
   <link rel="stylesheet" type="text/css" media="print" href="printstyle.css">
   <script src="leaving.js"></script>
</head>
<body>
Test!
<a href="http://dailypuppy.com" onclick="return leave()">The Daily Puppy</a>
</body>
</html>

別ファイルにすることのその他のメリット:

別のページでも一度ダウンロードした javascript や CSS は使えるので、何度もダウンロードする必要はない。しかもローカルにキャッシュされるので、次にページを開いたときにダウンロードし直す必要もない。
メンテしやすい。サイト内全て（数千ページかもしれない）に適用される javascript や CSS がたった1つのファイルなら、変更するのもたった1つで済む。

Summary

title
meta: descript と keywords
link: 外部の CSS ファイルを読み込む
script: 外部の javascript ファイルを読み込む

Exercise questions

Why does it make sense to add a description in a meta element if it doesn't get displayed on the screen?

検索結果とかに表示される、とか。サイト内のページ一覧とかに使ってもいいかも。

What is the benefit of adding javascript to the head of a document and not in the body?

document が読み込まれる前にごにょごにょできる、のは benefit なんだろうか。場合によるか。

How can you benefit from your browser's caching and what do you need to do to make it work for you?

先に後者: 外部ファイルにして link なり script なりで読み込む。benefit は毎回読み込まなくなるってことだけど、javascript なり CSS を変更したときに反映されなくて困ったような記憶が。

As search engines give the title of a document much love, whouldn't it be useful to cram it full of relevant keywords? What are the downsides of this practice?

タイトルバーからはみ出すようなタイトルとかやめてかださい。

As the title display can be a bit boring, wouldn't it make sense to bold some words with a b element? is that possible?

"bold some words with a b element" は可能だけど、それは title の代わりにはならんだろ、ｊｋ。