HTML の書き方まとめ

HTML の書き方や注意点をまとめています。

この記事の目次非表示

例として使うドメイン名
HTML のブロック要素
dl 要素の使い方
正しい引用文の使い方
特殊文字の書き方
html の img 要素に直接 border 属性を書かない方が良いみたい
HTML のアクセスキー
HTML ソースコードのインデント ( 字下げ ) について
HTML ソース内での改行
ハイパーリンクで半角チルダを使う
HTML と CSS の文法チェックができるサイト

例として使うドメイン名

ひとつの例としてドメイン名を挙げる場合、実在するドメイン名を書いてしまうと、そのドメインの管理者さんに迷惑（アクセス集中など）がかかってしまうので、例として使っても良いドメイン名が以下のように準備されています。

example.com
example.net
example.org

例としてドメイン名を使う時は、上記のドメイン名を使うように注意しなければなりませんね。詳しく書かれた RFC2606 と言う英語のドキュメントがありますので参考にしてください。

HTML のブロック要素

ブログを書くようになって、正しいマークアップで記事を書きたいと思うようになり勉強中です。すごく簡単に説明すると、ブロック要素とは、要素の前後に改行が挿入されるタグのことです。反対に改行が入らないのがインライン要素って事ですね。

まずは XHTML 1.0 Strict で body 要素内に直接配置できるブロック要素をまとめてみます。※div、form、script、hr と非推奨の要素は除きます。

テキスト要素のタグは

h1-h6（見出し）
p（段落）
address（連絡先・住所）
blockquote（引用）
pre（整形済みテキスト）

テーブル要素のタグは

table（表組み）

リスト要素のタグは

ul（非序列リスト）
ol（序列リスト）
dl（定義リスト）

とりあえず、上記のタグでテキストをマークアップしとけばいいのかな？
div もリストに入れるかどうか悩んだのですが、汎用ブロックレベルコンテナなので除外。

dl 要素の使い方

<ul> や <ol> なんかはよく使ってたんですが、<dl> というものを今まで知りませんでしたｗ

<dl>
  <dt>用語</dt>
  <dd>用語の説明</dd>
</dl>

こんな使い方みたいですね。ちなみに、<dt> と <dd> は一対でなくても構わないみたい。

正しい引用文の使い方

まとまったテキストを引用する時に使う blockquote 要素は、ブロックレベル要素だが、直接インライン要素やテキストを含むことが出来ないらしいので、p 要素などを小要素として使うみたい。それから、cite 属性で引用元の URI、title 属性で引用したページのタイトル等を書いておくと良いらしい。

また、短いテキストの引用には、q 要素を使う。この時の引用符はブラウザが自動的に付けるのが WEB 標準では正しいらしい。

以下は、正しい引用文の例

<blockquote cite="http://www.example.com/index.html" title="Title">
<p>引用文</p>
</blockquote>

特殊文字の書き方

HTML で「<」、「>」などを文字として書きたい場合は、特殊な書き方になります。

記号	書き方	説明
&	&	ampersand
<	<	less than
>	>	greater than
“	"

HTML の特殊文字って、アンドとかダブルコーテーションとか、あと数個しか無いのかと思ったら、結構いろんなのがあるみたい。
とりあえず、使えそうな所をピックアップしてメモしときます。

&#13214	キロメートル
&#13218	平方キロメートル
&#13217	平方メートル
&#8544	いち
&#8545	にい
&#8546	さん

Mac OS 10.4.7 + Firefox 1.5.0.4 では、フォントファミリーに Osaka を指定しとかんと表示されない。
参考にさせてもらったページは、HTMLの特殊文字 / Studio Rikiy です。ありがとうございます。

html の img 要素に直接 border 属性を書かない方が良いみたい

例えば、Dreamweaver 8 で画像を配置してリンクを設定すると、

<a href="#"><img src="sample.png" border="0" />

みたく border 属性が勝手に入りますが、CSS をオフにした時にリンクであると認識できるよう HTML 内に border 属性を直接書かない方がいいみたい。

a img { border-width: 0; }

上記の様に CSS で設定するのが良いみたいです。なるほどね。

HTML のアクセスキー

以前から気になってはいたのですが、

<h1><a href="index.html" accesskey="1">BlogName</a></h1>

上のソースにある [ accesskey ] ってなんやろ？
と思い調べてみると、Alt キーと組み合わせることで、フォームにフォーカスしたり、ボタンを押したり、リンクにジャンプする為の機能だったんですねー。

要するにキーボードショートカットみたいな物だと思います。

Mac OS 10.4.8 + Firefox 2.0 の場合は、Ctrl キーと組み合わせて使うみたいです。

HTML ソースコードのインデント ( 字下げ ) について

皆さん、HTML ソースコードのインデント ( 字下げ ) はどのようにしていますか？
私はインデントなし、タグ・属性は小文字で統一しています。

試しに Yahoo! のトップページで実験してみると、ダウンロードした HTML ソースが 40KB で、これにスペース２個のインデントを加えると 51KB になります。たった 11KB しか変わりませんが、約 20％も容量が節約できています。

ソースが読みづらくなるといった欠点はありますが、私はしばらくインデントなしでやってみようと思います。

HTML ソース内での改行

HTML のソース内で改行すると、ウェブブラウザで表示した時、改行部分に半角スペースがひとつ入って表示されます。
スペースが入る事を想定した上でソースを改行する分には問題なし。
私の場合は、できるだけブロック要素で改行するようにしてます。

ハイパーリンクで半角チルダを使う

ハイパーリンクで半角チルダを使う時は、「%7E」と URL エンコードしたもので書かなければいけないのでしょうか？どうやら、古い仕様（RFC1738）で半角チルダは使用不可、新しい仕様（RFC2396）では使用可。となってるみたいです。

なんですが、Macintosh 版 Dreamweaver MX 2004 (7.0.1) にはバグがあり、コードビュー上でハイパーリンクに半角チルダを使用し、保存後、再度開くと全角に変わります。困ったものだｗ

HTML と CSS の文法チェックができるサイト

HTML と CSS がキチンと書けているか気になったので、文法チェックができるサイトを探してみました。

HTML をチェックする時は、W3C Markup Validation Service と言うサービス。英語なので良く分かりませんがｗ。CSS をチェックする時は、W3C CSS 検証サービスと言うサービスがあります。

また、日本語でチェックしてくれる Another HTML-lint gateway というサイトもあります。