To write a better HTML

よりよいHTMLを書くために

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

「何それ難しそう…」

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

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

テキストとバイナリの違い
テキストバイナリ
● .txt / .csv ● .bmp / .png / .gif / .jpg
● .html / xml ● .swf
● .js ● .wav / .wma / .mp3
● .css ● .avi / .wmv / .mpg
● .php ● .doc / .pdf / .xls
● .ini ● .exe / .dll / .lib
● .htaccess ● .zip
● ... ● ...

テキストとバイナリの違い
テキストバイナリ
●
テキストエディタで ●
専用のプログラムが
開ける必要
●
生のデータのままで ●
生のデータのままで
人間が読めるは読めない

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

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で span要素にCSSで
font-weight:bold color:red
（太字）（赤字）


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


コンピュータ「どっちもspanだ！
じゃあ重要じゃないんだね！」

強調したかったのに……

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

strong要素にCSSで span要素にCSSで


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

strong要素にCSSで strong要素にCSSで
ここは太字にしよう、あっちもこっちも
こっちも太字にしたいな赤字にしよう


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


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

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

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

●
適切な文書構造で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名だけを使うのは
やめよう
●
よく被る

●
パンくずリスト
●
topicpathかbreadcrumbか
●
好みもあるけどtopicpathの方が論理的
な名前の気がする
●
ページング
●
pager、pagination、paging…
●
せめて自分が使う分は統一したい

●
サイドバー
●
HTML5的にはasideになるらしい
●
sidebarはbarが形状由来でイケてない
●
シングルカラムサイトのフッタナビゲーションはsidebarと中身が
一緒なのにclassはfooterって何か違う…ということが起きる

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

To write a better HTML

More Related Content

Viewers also liked

Similar to To write a better HTML

To write a better HTML