きれいなHTMLとは？

締切済

質問者：magnix0122
質問日時：2005/12/14 16:32
回答数：7件

はじめまして。キャリアの浅いWEBデザイナーです。
タイトル通り「きれいなHTML」の条件を教えて下さい。
よく、このHTMLは汚い！とか聞きますが、今イチ分かりません。
また、ドリウィとかで書くと余計なタグが沢山入ったりするので
好ましくない、とも聞きます。そこで、

・綺麗なHTMLの具体的条件
・綺麗なHTMLを実践しているサイト

があれば教えてください。
出来るだけ具体的に教えていただけるとありがたいです。
お手数ですが、何卒よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (7件)

最新から表示
回答順に表示

No.1

回答者： beryl89
回答日時：2005/12/14 16:50

改行されているか、タブなどで階層がわかるようになっているか。

これだと思います。
同じ内容でも
<html>
<head>
<title>タイトル</tite>
</head>
<body>
<h1>見出し</h1><hr>
テキスト 
改行テスト
</body>
</html>
このように書いてあるのと
<html><head><title>タイトル</tite></head><body><h1>見出し</h1><hr>テキスト 改行テスト</body></html>
このように書いてあるのとでは後々の修正のしやすさが違います。
これがきれいかそうでないかの違いじゃないかと思います。たぶん
ただ階層をきれいに分けるのは面倒なんで僕はめったなとき意外は改行しかやりませんけどね

あ、あと時々見かけますが、タグに大文字使っているやつ
あれはあまり好きじゃないですね
それとところどころコメント入れていると良いかも？（複雑なタグの説明とか）

- 0
- 件

通報する

この回答へのお礼

早々のご回答に感謝します。

＞ただ階層をきれいに分けるのは・・・
これはどういう意味でしょうか。お時間があれば教えてください。

通報する

お礼日時：2005/12/15 21:22

No.2

回答者： Aisak
回答日時：2005/12/14 16:59

思いつくままですが……

・タグがきちんと閉じている
最近のブラウザだとタグが閉じていなくても正常動作することがあるので、見落とすことがあります

・CSSに置き換える
は、CSSでと置き換えられます。CSSの方が構造を綺麗に整理できることが多いです

・改行にを使わない
昔はよくいました。はとセットで段落を意味するので、2行分の改行に使うのは行儀が悪いです

・値をダブルクォートで囲む


は両方とも正常動作しますが、後者の方が行儀が良いです

・ソースを改行する
稀に改行してない、インデント入ってないで滅茶苦茶汚いソースになっているものがあります。

・無駄にタグを使わない
文章１
文章２
文章３
これは

文章１
文章２
文章３

として、タグの重複を削ることが出来ます。

・入れるものを入れる
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<meta http-equiv="Content-Type" content="text/html; charset=Shift-JIS">
など、省略できるけど入れた方が良いものは入れた方がいいです。文字化けや誤動作などを防げますから。

要領を得ない内容になってしまいましたが……

- 0
- 件

通報する

この回答へのお礼

お返事ありがとうございます。

＞・ソースを改行する
＞稀に改行してない、インデント入ってないで・・・
「同じタグを縦軸で揃える」という解釈して間違いありませんでしょうか。

通報する

お礼日時：2005/12/15 21:26

No.3

回答者： takkunnet
回答日時：2005/12/14 17:03

指標が結構人それぞれ違うので一概には言えませんが、一般的にはプログラム同様「まとまっている」「読みやすい」ってことではないでしょうか？

SEO対策されたページが綺麗といえるかもしれません。

ＳＥＯについてはGoogleとかの検索で「SEO 対策」として検索してみたら「ＳＥＯ」がどのようなものなのかはわかると思います。

「読みやすい」の例としては
<html><head><title>タイトル</title></head><body>中身</body></html>
よりも
<html>
<head>
<title>タイトル</title>
</head>
<body>
中身
</body>
</html>
のほうが「読みやすい」とは思いませんか？
こういった適宜改行を入れたり体裁を整えるのも「綺麗」という表現になると思います。

また、「まとまりがある」の例としては
あいう
ａｂｃ
とするより
.font_list{
FONT-SIZE: 10px;
COLOR; #AAAAAA;
}
あいう
ａｂｃ
としたほうがまとまりがあって良くないですか？
直感的に「同じスタイル」ってのもわかりますし。
こういった「まとまりがある」というのも「綺麗」になると思います。

その他にもいろんな指標があるのではないでしょうか？

- 0
- 件

通報する

この回答へのお礼

なるほど。勉強になりました。
ありがとうございました。

通報する

お礼日時：2005/12/15 21:27

No.4

回答者： galluda
回答日時：2005/12/14 18:20

がると申します。

んっと、おっしゃるニュアンス的に近しいものは、おそらく
・W3C勧告準拠
・きちんとしたインデント
の２つではなかろうかと思います。

W3C勧告準拠ですが。HTMLにも無論文法があり、そこには決まりごとがあります。ただ、実際には「結構アバウトに書いても」通じてしまうのですが。
そういった点で「W3C勧告に沿った、省略などをしていない、或いは必須なアトリビュートを正しく設定している」HTMLはきれいだと思います。
端的には、IMGエレメントのaltアトリビュートなどが一時期有名だったような。
altは本来「画像が表示されない、或いは自動ダウンロードされない人たち向けの表示のための必須アトリビュート」です。
ただ、実際には「必須なのに設定されていない」とか「意味の不明な内容が設定されている」とかまぁ色々ありまして。
例えばそういった部分を含めて「正しく」HTMLが作成されているかどうか、が「きれいなHTML」の１方針になるかと思います。

次にインデントですが。例えば以下の二つを見比べてみてください。
<DL>
<DT>***</DT>
<DD>****</DD>
<DT>***</DT>
<DD>****</DD>
</DL>
と
<DL>
　<DT>***</DT>
　　<DD>****</DD>

　<DT>***</DT>
　　<DD>****</DD>
</DL>

どちらが見やすいでしょう？
インデントってのはどっちかっていうと「プログラマの概念」として浸透しているように思われるのですが。
こういった「ちょっとした工夫」が案外見やすいものを作ると思ってます。

何かの参考にでもなれば幸いです。

- 0
- 件

通報する

この回答へのお礼

お返事ありがとうございます。

＞きちんとしたインデント
好みや慣れにもよると思いますが、
インデントでずらした表記が決して見やすいとは思えないんですよ。
でも、それが一般的なルールであるならば、慣れるより仕方ないですね。

通報する

お礼日時：2005/12/15 21:30

No.5

回答者： partita
回答日時：2005/12/15 00:17

私が考える「きれいな」HTMLは

・文書構造に基づいたタグを使用している
・文書構造とデザインの分離が徹底している
　→HTMLとCSSの活用
・インデント使用（読みやすい）

といったところです。

「きれいなHTML」だと思うサイト（インデントは除外）：
http://www.cybergarden.net/
http://www.openspc2.org/
http://www.w3.org/
など。
Webデザイン会社やHTML解説サイトなら、それなりにHTMLにも気を配っているので「きれい」な部類になるサイトが多いと思います。
また、XHTMLで書いてあるサイトで「汚い」サイトはほとんどないような気もします。

逆に「汚い」「参考にならない」と思うのは
・fontタグ使用
・ の連続使用
・テーブルレイアウト使用
・DOCTYPE宣言がない
などですね。

- 0
- 件

通報する

この回答へのお礼

お返事ありがとうございます。
参考サイト、とても勉強になりました。

＞XHTMLで書いてあるサイトで「汚い」サイトはほとんどない
なるほど、確かにそうですね。
今後はXHTMLが常識になっていくのでしょうか。。。

通報する

お礼日時：2005/12/15 21:31

No.6

回答者： koutarou504
回答日時：2005/12/15 05:32

単純であり意図が明確である事。

「綺麗なHTML」の目的が、第三者に診てもらう事を（事も）想定していると思っていますので。

で、何が書いてあるかという事で
DOCTYPE宣言
は必要ですし、
タグの省略可能なものも省略しない方が判り易い。
（少々文字数を減らす程度の弧とりは判り易さ。）
物を列記している時などは別として、構造を意識する必要があるなど見える必要がありそうな記述は
１行８０桁から１００桁程度に抑えて改行する。
HTML は場所さえ間違えなければ改行しても内容に影響しない。
また、適度の余白も付加する。これも HTML での余白の扱われ方を意識して。
尚ここでインデントは、あまり HTML ではお勧めしません。手間の割りに見た目の効果が薄いので。
理由は１タグの記述の長さと、インデントが必要そうな構造になった場合はその構造自身が問題というかきれいでないと・・・。

次に構造で、意味ある必要な物だけで書かれている。
デザインはスタイルシート，（動的）処理はスクリプトと分離されて且つ別ファイルである。
その上で HTML だけでスタイルシート，スクリプトがなくても閲覧でき操作（リンクをたどるなど）は出来る。
この様な HTML なら目的も判りやすいと思います。

最後に目的を忘れていないか？　がポイント。
まぁ「綺麗なHTML」を作る事が目的なら、
いろいろな規則的な事を機械的に記述，整理すれば良いと思いますが、
ただそれでは表面的にはきれいかもしれませんが・・・。
そもそも表現したい物があっての HTML 記述のはずなので、作者が何をしたいのか判り易く表現されているかが問題かと思います。
故に何故にそのタグを用いているのかが現れているか、そのタグで何を行おうとしているか伝わっているかが・・・。
（例えばユーザの事を配慮してＣＳＳに対するブラウザのバグからテーブルによるレイアウトで対応しているとかだって明確であれば良いのでは・・・。）

- 0
- 件

通報する

この回答へのお礼

＞手間の割りに見た目の効果が薄いので。
私もそう思うのです。。。
確かドリウィなんかは設定次第で自動で
インデントされると思いますが、手打ちの場合結構手間ですよね。

＞問題かと思います。
全く同感です。HTML大好きな人って、過剰というか、
ユーザーが求めていない次元までこだわる傾向があると思うんです。
それでスケジュールに影響した日には、
全く持って本末転倒な気がするんです。
もちろん、HTMLスキルに富んだ人や、
プログラマー肌の人へのリスペクトは忘れてませんが。

通報する

お礼日時：2005/12/15 21:43

No.7

回答者： jammin#2
回答日時：2006/11/15 02:25

個人サイトの運営歴だけは長いですが、素人です。

前の方とかぶることもあると思いますが、個人的な雑感を書かせていただきますね。

・極端に横に長いソースでなければ、ソース自体のインデントや改行はある程度、作る人の好みでもいいと思います。例えば私はインデントと大文字タグが嫌いで使いませんが、それらを使った方が判りやすいのは確かです。

・CSSの使用できるところは極力CSS。style属性を使うと見苦しいです。

・JAVAやCSSなどは、できれば直接書かずに外部ファイルで呼び出して欲しいです。

・無駄がないこと。
　例えば<div align="center"><center>～</center></div>みたいに同じようなタグを繰り返したりとか。市販のエディタを使うと陥りがちです。（本当はalign属性やcenterタグの使用自体もあまりおすすめできないので、上記の例は悪い例です。いいものが思いつきませんでした。すみません）

・推奨されないタグを使わないこと。ルール違反をしないこと。
　普通はそこまでこだわらなくてもいいと思いますが、出来ているに越したことはないです。
　代替タグなどを探すのに時間がかかって納期に間に合わないとか、レイアウトが崩れるといった場合には、この点は犠牲にしてもいいと思います。
　とはいえ、上にも書いた<center>や程度は避けて欲しいかも…。
　もうご存知かもしれませんが、http://openlab.ring.gr.jp/k16/htmllint/で一度チェックされると参考になると思います。あくまで参考程度ですが。

また、市販エディタは余計なタグが入ると心配されているようですが、設定と使い方次第です。
私はhttp://www5f.biglobe.ne.jp/~t-susumu/library/tpa …のテキストエディタをメインで使ってますが、ソースの整形やファイルの管理、その他手作業でやってられない仕事はホームページビルダーに任せています。
特にプロの方でしたら時間との戦いだと思いますので、ツールとしてドリウィやビルダーを使われるのは便利でいいかと。

ちょっと長くなりました^-^;
参考になれば幸いです。

参考URL：http://openlab.ring.gr.jp/k16/htmllint/,http://www5f.biglobe.ne.jp/~t-susumu/library/tpa …