to write a better html

よりよいHTMLを書くために

HTMLの話をしよう

…の、前に

ファイルシステムの話をしよう

「何それ難しそう…」

「何それ難しそう…」そんなことはありません

ファイルシステムは難しくない● 詳しい話は確かに難しい● おおざっぱな話は単純● おおざっぱに分けてコンピュータのファイルは二種類だけ

● テキストファイルとバイナリファイル

テキストとバイナリの違いテキスト

● .txt / .csv● .html / xml● .js● .css● .php● .ini● .htaccess● ...

バイナリ● .bmp / .png / .gif / .jpg● .swf● .wav / .wma / .mp3● .avi / .wmv / .mpg● .doc / .pdf / .xls● .exe / .dll / .lib● .zip● ...

テキストとバイナリの違いテキスト● テキストエディタで開ける

● 生のデータのままで人間が読める

バイナリ● 専用のプログラムが必要

● 生のデータのままでは読めない

とりあえず今は名前だけ覚えておけばOK

HTMLの話に戻る

HTMLはテキストファイル● テキストエディタで開ける● 生のデータのままで人間が読める● 普通のテキストファイルとどこが違う？

HTMLはテキストファイルHTMLは…● タグを使って文字を大きくしたり画像を表示したりできる

● 別の場所にリンクを張れる→普通のテキストファイルでは無理

HyperText Markup Language

HyperText● 別の場所にリンクを張れる

Markup

● タグを使って文字を大きくしたり画像を表示したりできる

HyperText Markup Language

「リンクを張れて」「タグ付けできる」から、HTML

→それ以外はテキストファイルと同じ

ところで…

HTMLと見栄えの話昔のHTML● fontタグで文字の大きさや色を変えよう● tableタグで配置を調整しよう

HTMLと見栄えの話昔のHTML → 昔は昔、今は今！● fontタグで文字の大きさや色を変えよう → CSSで！● tableタグで配置を調整しよう → CSSったらCSSで！

今のHTML● 文字の見栄えや体裁はCSSでやろう● HTMLは文書構造を示すためのもの！

とはいえ

人間は見栄えから文書構造を読み取る● 斜体や太字

人間は見栄えから文書構造を読み取る● 斜体や太字 → 重要そう！

人間は見栄えから文書構造を読み取る● 斜体や太字 → 重要そう！● 大きな文字

人間は見栄えから文書構造を読み取る● 斜体や太字 → 重要そう！● 大きな文字 → 重要そう！

人間は見栄えから文書構造を読み取る● 斜体や太字 → 重要そう！● 大きな文字 → 重要そう！● 文章の先頭

人間は見栄えから文書構造を読み取る● 斜体や太字 → 重要そう！● 大きな文字 → 重要そう！● 文章の先頭 → 重要そう！

人間は見栄えから文書構造を読み取る● 斜体や太字 → 重要そう！● 大きな文字 → 重要そう！● 文章の先頭 → 重要そう！● 例：新聞記事の見出しは左上が一番大きい

人間は見栄えから文書構造を読み取る● 斜体や太字 → 重要そう！● 大きな文字 → 重要そう！● 文章の先頭 → 重要そう！● 例：新聞記事の見出しは左上が一番大きい

見栄えと構造は切っても切れない関係

けれども

コンピュータのためのHTML

● コンピュータもHTMLを読む● 例：Google検索エンジンのクローラ● コンピュータは見栄えから文書構造を読み取れない

● どうやって読み取る？→ そのためのHTML

コンピュータのためじゃないHTML

span要素にCSSでfont-weight:bold（太字）

span要素にCSSでcolor:red（赤字）

コンピュータのためじゃないHTML

span要素にCSSでfont-weight:bold（太字）

span要素にCSSでcolor:red（赤字）

コンピュータ「どっちが重要なの？？？」

コンピュータのためじゃないHTML

span要素にCSSでfont-weight:bold（太字）

span要素にCSSでcolor:red（赤字）

コンピュータ「どっちが重要なの？？？」コンピュータ「どっちもspanだ！

じゃあ重要じゃないんだね！」

強調したかったのに……

強調したかったらstrong要素を使おう！

コンピュータのためのHTML

strong要素にCSSでfont-weight:bold（太字）

span要素にCSSでcolor:red（赤字）

コンピュータのためのHTML

strong要素にCSSでfont-weight:bold（太字）

span要素にCSSでcolor:red（赤字）

コンピュータ「どっちが重要なの？？？」

コンピュータのためのHTML

strong要素にCSSでfont-weight:bold（太字）

span要素にCSSでcolor:red（赤字）

コンピュータ「どっちが重要なの？？？」コンピュータ「片方strong使ってるね。

こっちの方が重要なんだね」

strongいいじゃん

コンピュータのためじゃないHTMLstrong要素にCSSでfont-weight:bold（太字）

ここは太字にしよう、こっちも太字にしたいな

strong要素にCSSでcolor:red（赤字）

あっちもこっちも赤字にしよう

コンピュータのためじゃないHTMLstrong要素にCSSでfont-weight:bold（太字）

ここは太字にしよう、こっちも太字にしたいな

strong要素にCSSでcolor:red（赤字）

あっちもこっちも赤字にしよう

コンピュータ「このサイトstrongだらけだ…」

コンピュータのためじゃないHTMLstrong要素にCSSでfont-weight:bold（太字）

ここは太字にしよう、こっちも太字にしたいな

strong要素にCSSでcolor:red（赤字）

あっちもこっちも赤字にしよう

コンピュータ「このサイトstrongだらけだ…」コンピュータ「こんなに多いなんておかしい！

詐欺かも…？」

タグは適切に使いましょう

適切なタグは適切な文書構造から

コンピュータのためのHTML

● 適切な文書構造でHTMLを書くとコンピュータにとっても理解しやすい

コンピュータのためのHTML

● 適切な文書構造でHTMLを書くとコンピュータにとっても理解しやすい

● コンピュータが理解しやすいHTMLはコンピュータが評価しやすいHTML

コンピュータのためのHTML

● 適切な文書構造でHTMLを書くとコンピュータにとっても理解しやすい

● コンピュータが理解しやすいHTMLはコンピュータが評価しやすいHTML

● コンピュータが評価しやすいHTMLは検索エンジンで検索しやすい

コンピュータのためのHTML

● 適切な文書構造でHTMLを書くとコンピュータにとっても理解しやすい

● コンピュータが理解しやすいHTMLはコンピュータが評価しやすいHTML

● コンピュータが評価しやすいHTMLは検索エンジンで検索しやすい→ SEOで有利！

文書構造の話をしよう

文書構造って何だろう● 見出しと本文● 箇条書き● 本文と結びつかない情報

文書構造って何だろう● 見出しと本文 ← ｲﾏｺｺ● 箇条書き● 本文と結びつかない情報

たとえば、こんなふうに文章をひたすら長く書いているだけだと、文のまとまりがどこからどこまでなのか、一見しただけでは分かりにくく、何を目的にしているのかも読むまで分からない。今ここで「昨日はラーメンを食べたから今日は麺類はいやだな」……ということを突然書かれるとびっくりする。おそらく文章と文章とが適切に分かれているほうが自然なのではないか。

見出しと本文文章は適切に分けようたとえば、こんなふうに文章をひたすら長く書いているだけだと、文のまとまりがどこからどこまでなのか、一見しただけでは分かりにくく、何を目的にしているのかも読むまで分からない。今ここで「昨日はラーメンを食べたから今日は麺類はいやだな」……ということを突然書かれるとびっくりする。おそらく文章と文章とが適切に分かれているほうが自然なのではないか。

この文も、適切な見出しによって文章の目的が明確化されている。

今日の昼は何にしよう昨日はラーメンを食べたから今日は麺類はいやだな……と思ったけれどもあんかけスパゲッティを食べたい気分だったのであんかけ屋に行ってきました。おいしかったです。

という内容も、「今日の昼は何にしよう」という見出しがあれば、ごくごく自然に受け入れられる。

見出しと本文構造立てて文章を書こう文章は適切に分けよう文章を適切に分ければ読みやすくなる。

目的を持って文章を書こう見出しは文章の目的地を表す道しるべ。ここを見るだけで読み手は「何についての話なのか」すぐに理解できる。見出しを眺めるだけで文章全体の構成が見えてくる。

順序立てて文章を書こう文章を並べる順番も重要。最初に目的地を示すのが大事なのは見出しに限らない。文章を並べるときも、一番最初に目的をはっきりさせると読みやすい。補足的な内容は後の方に書く。小さな見出しと小さな章立てを組み合わせると、より分かりやすい構成になる。

見出しと本文● HTMLでは、h1要素からh6要素で見出しを表現する

● 本文はp要素で表現する

文書構造って何だろう● 見出しと本文● 箇条書き ← ｲﾏｺｺ● 本文と結びつかない情報

このページではHTMLに関する説明を掲載しています。CSSの話もあります。JavaScriptについても書いています。

もっと分かりやすく！

このページについて

このページでは下記のことについて説明しています。● HTML● CSS● JavaScript

箇条書きで階層も表現できる

HTMLに関する説明● HTMLとは何か

● HTMLを使う目的● HTMLにできること・できないこと

● HTMLの書き方● ブロック要素とインライン要素● 要素と属性

● 付録：HTMLタグ一覧

箇条書き● 文章中にキーワードを並べるよりも、箇条書きで項目を並べた方が見通しやすい

● 文章中にキーワードを並べたときは階層構造を表現できない

● 箇条書きなら階層構造も表現できる

箇条書き● HTMLでは、ul要素で箇条書き全体を囲って、個々の項目をli要素で表現する

● 項目に順序をつけるときはul要素ではなくol要素を使う

● 項目に説明をつけるときはdl要素とdt要素、dd要素を使う

文書構造って何だろう● 見出しと本文● 箇条書き● 本文と結びつかない情報 ← ｲﾏｺｺ

本文と結びつかない情報● 本文の内容そのものと関係がないまたは関係性が薄い情報

● ページ番号や文書全体のタイトルなど● Webサイトの場合、サイト内メニューや著作権表記などがある

● 独立した要素● 見出しがつかないなど、扱いが特殊

HTMLの弱点

● サイト全体の見出し● グローバルナビゲーション● パンくずリスト● サイドメニュー● 著作権表記

…などを表現するタグはまだ「ない」

HTMLの弱点● HTMLでは表現する方法がない● div要素で囲って、classに名前をつけることで表現してきた

● これまでHTMLではうまく表現できない● 旧来のHTMLがWebサイトの変化に対応しきれていない

HTMLの弱点● classはCSSだけのためのものじゃない● classはHTMLの要素に意味を持たせるためのもの

● 適切なマークアップのために、適切なclass名を！

もうすぐできる● HTML5では

● header要素 / footer要素● nav要素● section要素 / aside要素

など、本文と本文から独立した情報とを、別々に取り扱いやすくなる

もうすぐできる● div要素のclass名にHTML5の要素名を使うと

HTML5への移行がスムーズになる● div class="header" や div class="footer"● コンピュータは今後HTML5に対応していく方向

● ゆくゆくはWebサイトに適した文書構造をHTMLで表現できるようになっていく

HTML5も完全じゃない● HTML5でもパンくずを表現するタグはない● ページングを表現するタグもない● 著作権表記を表現するタグもない

● 前はaddress要素で表現できたのに…● チャットログやコメントなど会話を表現するタグが追加されるはずだったのになくなった

● しかもそれまで推奨されてきたdl要素は不適当になった（代わりにp要素を使う？）

HTML5も完全じゃないけど● b要素、i要素、small要素は非推奨から復活

● それぞれ「強調ではないけど差別化したい」ときに使う

● hr要素がセクション区切り要素として復活● 「p要素の中のbr要素」に対する「div要素や

section要素の中のhr要素」というイメージ？● 表現の選択肢が増えるのはいいこと

適切な文書構造を適切なマークアップで

● 文書構造があってそこにマークアップが乗る

● 文書構造に合わせたマークアップが必要● でもHTMLだけでは不充分● 今はdivとclass名を使い分けて表現する

適切なマークアップは難しい…

よいclass名のすゝめ● 形状や色など見た目に由来するclass名はやめよう

● redやgreen、leftやrightはあまりよくない例

● 汎用的すぎるclass名だけを使うのはやめよう

● よく被る

よいclass名のすゝめ● パンくずリスト

● topicpathかbreadcrumbか●好みもあるけどtopicpathの方が論理的な名前の気がする

● ページング● pager、pagination、paging…● せめて自分が使う分は統一したい

よいclass名のすゝめ● サイドバー

● HTML5的にはasideになるらしい● sidebarはbarが形状由来でイケてない

● シングルカラムサイトのフッタナビゲーションはsidebarと中身が一緒なのにclassはfooterって何か違う…ということが起きる

● 赤文字の注意書き、緑文字の補足● redとかgreenはやめよう● caution（注意）、note（補足）など

悩んだらGoogle！