きれいな(X)HTMLの自分的書き方
- ページ内 目次
HTMLstrict,XHTMLstrictについて
人は見た目でここはタイトル、ここは、メニューと理解できますが、パソコンは理解してくれません。HTMLは本来、パソコンに意味を理解させてあげるための物です。デザイン部分はCSSに任せ、HTML,XHTMLは意味を理解させてあげるタグを書いてあげるように心がけましょう。
(SEO対策にもなります!!)
!DOCTYPE(ドキュメントタイプ)について
今書いてあるHTMLはどのような規定に従って書いているかという宣言です。かならずHTMLを書く際には記述しなければいけないものです。
厳密な2パタ−ンのドキュメントタイプ (HTMLとXHTML)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">- HTMLstrictのドキュメントタイプです。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">- XHTMLstrictのドキュメントタイプです。IE6で互換モードになるバグが有ります。
strictに当てはまらない場合のドキュメントタイプ (HTMLとXHTML)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">- HTMLでstrictに当てはまらなかった場合のドキュメントタイプです。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">- XHTMLでstrictに当てはまらなかった場合のドキュメントタイプです。IE6で互換モードになるバグが有ります。
とりあえず、HTMLstrictで記述していくのがいいかと思います。
(ドキュメントタイプによって見え方が変わる場合が有ります。XHTMLのドキュメントタイプほうでは、IEが互換モードと判断してしまうため、IE6なのにIE5なみのレンダリングしかしてくれなくなってしまうバグがあります。)
見出しタグ
<h1> 〜 <h6>
文章の見出しを表すタグ。
1〜6の数字は見出しのレベルを表します。h1が一番上にくるタイトル、その次が h2という具合です。
h1からいきなりh6にとんだりはできません。
例
<h1>今日の出来事</h1> <h2>朝</h2> <h3>朝飯</h3> <h3>みそ汁</h3> <h2>シャワー</h2> <h2>昼</h2> <h3>昼飯</h3> <h2>夜</h2> <h3>夜飯</h3>
段落タグ
<p>
文章の段落を表すタグ
例
<h1>今日の出来事</h1> <h2>朝</h2> <h3>朝飯</h3> <p>今日の朝ご飯は。ご飯、焼き魚、みそ汁でした。</p> <h4>シャワー</h4> <p>朝シャンはいいですね。</p> <h2>昼</h2> <h3>昼飯</h3> <p>昼は、牛丼をたべました。</p> <h2>夜</h2> <h3>夜飯</h3> <p>夜はうどんでした。うどんは案外飽きないです。</p>
リストタグ
<ul> <ol> <li>
メニュー、項目などにつかうタグ。
順番があるリストの場合には、olを使いましょう。
ul,olのなかには、liしか置くことができないので、覚えておきましょう！
(liの中には、全ての要素を置くことが可能です。)
例
<h1>今日の出来事</h1> <h2>朝</h2> <p>今日の朝ご飯は。</p> <ul> <li>ご飯</li> <li>焼き魚</li> <li>みそ汁</li> </ul> <p>とても、おいしくいただけました。</p> <h2>昼</h2> <ul> <li>牛丼</li> <li>卵</li> </ul> <h2>夜</h2> <ol> <li>うどん</li> <li>肉</li> </ol>
定義リストタグ
<dl> <dt> <dd>
定義(タイトル)のあるリスト。
dtが次にくるddに対してのタイトルです。一つのdtに対して、いくつでもddを書くことが出来ます。
dlもdt,ddしか中に置くことができません。
(dt,ddの中には、全ての要素を置くことが可能です。)
例
<h1>今日の出来事</h1> <h2>朝</h2> <dl> <dt>朝ご飯</dt> <dd>ご飯</dd> <dd>焼き魚</dd> <dd>みそ汁</dd> </dl> <h2>昼</h2> <dl> <dt>昼ご飯</dt> <dd>牛丼</dd> <dd>卵</dd> </dl> <h2>夜</h2> <dl> <dt>夕ご飯</dt> <dd>サラダ</dd> <dd>チャーハン</dd> <dt>夜食</dt> <dd>やきそば</dd> </dl>
文字強調タグ
<em> <strong>
文字の強調、emが強く表示、strongはそれよりさらに強く表示するタグ。
例
<p>昨日は<em>ハンバーグ< /em>、そして今日は<strong>カレーライス</strong>だ！ </p>
アドレスタグ
<address>
住所とか、電話番号とか、copyrightなどに使うタグ。
例
<p>下記のアドレスにご連絡ください。</p> <address>090-1234-5678</address>
構造タグ
<div> <span>
構造を補正するタグ。
項目をまとめたりします。
(divはブロック要素、spanはインライン要素。)
spanは使う機会が少ないですが、どうしても、どのタグにも当てはまらない場合に使うことがあります。(強調と逆に弱めたいときなど)
例
<h1>今日の出来事</h1> <div class="section"> <h2>朝</h2> <p>今日の朝ご飯は。</p> <ul> <li>ご飯</li> <li>焼き魚</li> <li>みそ汁</li> </ul> <p>とても、おいしくいただけました。</p> </div> <div class="section"> <h2>昼</h2> <ul> <li>牛丼</li> <li>卵</li> </ul> </div> <div class="section"> <h2>夜</h2> <ol> <li>うどん</li> <li>肉</li> </ol> </div>
Tableについて
summary属性
テーブルの説明や構造を示すものです。非視覚系ブラウザを使ってる人の為に、入れるようにしましょう。
<table cellspacing="0" summary="tableの説明">
<caption>
テーブルの見出しです。
ブラウザによって見え方に違いが出てくる場合があるため、cssで消してしまうことも多いのですが、表を作る際には、指定しましょう。
<table cellspacing="0" summary="tableの説明;> <caption>テーブル見出し</caption>
属性について
<img>要素には必ず、横幅(width)、立て幅(height)、代行テキスト(alt)を書くようにしましょう。
<img src="" alt="" width="" height="">
<table>ではHTMLで幅指定をせず、cssで指定しましょう。
<table cellspacing="0" summary="">
ブロック要素とインライン要素
ブロック要素とは、自分単体で改行してくれる要素。
インライン要素とは、自分単体では改行してくれない要素。
と覚えておけばいいかと思います。
インライン要素はbodyの直下には置くことが出来ません。何かに囲まれていて初めて役に立つことが出来ます。
ブロック要素
- <h1> 〜 <h6>
- <p>
- <ul> <ol> <li>
- <dl> <dt> <dd>
- <address>
- <div>
インライン要素
- <em> <strong>
- <span>
- <a>
- <img>
classとidについて
classは複数指定できるグループのような物、idは個別の特徴を表す物です。
個別に指定する必要がある場合、ページ内に一つしか出てこない場合などには、idをつけましょう。
例
(idが赤でclassが青。)
コメント : 0
トラックバック : 0
http://develo.org/mt/mt-tb.cgi/30