THE HAM MEDIA BLOG

初心者がXHTMLを上達するためのポイント

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
HTML
タグ:
XHTML
Strict
初心者がXHTMLのマークアップを覚えるときに、
『コレをおさえておけば大丈夫!』
というポイントをまとめてみました。



上達するためのポイント


マークアップするための基本も含めて、
上達するためのポイントは以下の通り。

  1. 1.タグは小文字で書く
  2. 2.終了タグを入れ忘れない
  3. 3.テーブルレイアウトやフレーム仕様にしない
  4. 4.表示の指定を直接組み込まない
  5. 5.表示の指定を目的に空の要素を使わない
  6. 6.作るときはXHTML1.0 Strictの文法で
  7. 7.入れ子にしたときはタグの終了順序を間違えない
  8. 8.divの入れ子はなるべくしない
  9. 9.divやspanを乱用しない。
  10. 10.空要素の最後のスラッシュ(/)を入れ忘れない
  11. 11.インデントなどを使い読みやすいソースにコードにする
  12. 12.適度にコメントを入れておく
  13. 13.最後に必ずバリデートしてみる


1.2.7.10は最初はありがちな間違えだ。
×→<BODY>    ○→<body>
×→<p>あいうえお ○→<p>あいうえお</p>

×→<div><p><strong>あいうえお<p><strong><div>
○→<div><p><strong>あいうえお<strong><p><div>

×→<img src="###"> ×→<img src="###"/>
○→<img src="###" />

僕も最初はかなりの頻度で間違っていた。
今でもimgやmetaの最後のスラッシュを忘れたりする。
作るときに最初から間違えない人はいないのだから、
作り終えたときに必ずチェックして直すようにすればいい。

最後のimgの例を3つ挙げたが、
スラッシュの前には必ず半角スペースを一つ入れるようにしよう。
入れないとエラーだ。


3については単にしなければいい。
テーブルレイアウトはHTMLに表示指定を組み込んで、
本来のテーブルの役割をしていないつくりをしているし、
ユーザビリティ的にも向いていない。

フレームを使ってのつくりは、
同じ表示しているページの中に別なページが存在していたりするし、
ユーザーの混乱を招く可能性があるので、今は使われていない。

しかし、少し古いオーサリングソフトとかを使うと
フレームレイアウトを使ったり、
テーブルレイアウトで作成してしまう場合があるので、
必ずソースコードを見直すようにしてほしい。


4と5は、たとえばfontのタグを使ったり、
<div></div>と中身を何も入れずに書いたりすること。
HTMLの本来の意味では用いるべきではないでしょう。


6は初心者は特にいろんな文法など覚えていないのなら、
すんなりStrictの文法を覚えることができると思う。
基本的な構造がStrictなのであるから、
最初から覚えるのが一番だ!


8と9は、タグに迷ったときに使ったり、
CSSをつける上で徐々に安易につける場合が多いが、
多用はしないほうがいい。
構造がより複雑になってしまう場合もあるので、
なるべく使わないほうがいいだろう。


11、12は、ソースを書いていく上で、
ミスを少なくするためである。
他の人が見ても、わかるようにインデントを入れたり
必要部分にコメントを入れて、ソースをわかりやすくしよう。


13は必ず行うようにして欲しい。
もちろん作っている最中からわかるようなソフトもあるので、
そういうのを導入しておいて、チェックしやすいようにしよう。
Firefoxのアドオンで、『Html Validator』というのもあるので、
ぜひ導入しておくといい。


説明が不十分かもしれないが、
これから勉強するという人は参考にして欲しい。
しかし、1〜10までの項目に関しては、
全部クリアしておくことで
だいたいの事がStrictの文法につながっていくことなので、
気をつけながら制作するといいでしょう。


Web標準テキスト(3) HTML/XHTML (Web標準テキストシリーズ 3)


参考サイト:



この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。