初心者のWeb開発者向けのHTML作成ガイドライン

自分のために取っておいた明らかなこと。 有能な人にこの短いリストに追加してほしい。 目標は、あなたと他の人の両方のコードをより美しく、有効で、簡単に理解し、意味的に読み書きできるようにすることです。



<br />タグの使用


これは主に、テキストの認識を改善するため、または単一の要素をフォーマットするために必要です。 したがって、いくつかの要素を分離する必要がある場合、または新しい要素が新しい行にあるようにする必要がある場合、ブロック要素(div、p、h1 ...を使用する必要があります。デフォルトではdisplay:block cssプロパティがありますが、余分な要素を生成します)。 また、インデントする必要がある場合、10個の<br>を挿入する必要はありませんが、cssでmarginプロパティを記述する必要があります。



スタイル属性と!重要なプロパティの使用


これは、場所が一意である例外的な場合に必要です。 ほとんどの場合、プロパティをcssファイルに移動したcssクラスを使用する必要があります。 また、要素を非表示にする必要がある場合(表示:なし)、ユニバーサルクラス(たとえば、css:.hidden {display:none;})を作成し、<span class =” error hidden”>と記述する方が適切です。

クラスの説明で、一部のプロパティを使用しない場合は、記述する必要はありません!重要なのは、ほとんどの場合、IDではなくクラスの前に親セレクターを追加することで十分です。





非推奨のHTML要素と属性


<CENTER>、<FONT>、ボーダー、色、セルパディング、セルスペーシング、幅(テーブル用)

これらはすべてCSSのプロパティに置き換えられるため、上記の要素を使用しないでください。 また、XHTMLのname属性は無効です-使用する必要はありません(すべてはidを介して行われます)。



<label>要素


特に、入力の目的を説明するために、<label>要素があります(HTML5では、この目的のためにplaceholder属性を使用できます)。 したがって、入力があるところはどこでも、ほとんど常に<label for =” input_id”>があるはずです。



連続スペースとワードラップ


ワードラップを予測し、必要に応じて&nbsp;を使用してください。 破れを防ぎます。 コンテンツが動的で、1行に保持する必要がある場合は、css-propertyを使用できます。これにより、新しい行でのワードラップが防止されます-white-space:nowrap;



ボタンのレイアウト


右側には、押される可能性が最も高いボタンがあります。 (たとえば、1.Cancel 2.Ok)、これは情報出力には適用されません-最も重要なことは先にすべきです。 ただし、ユーザーは考えられるすべてのアクションをチェックするため、見たとしても強制的に戻る必要はありません。



列、ボタン、アクションの名前


ルール-別の要素-新しい提案を遵守し、それに応じて-大文字でそれを書くようにしてください(送信、今すぐ注文)。 また、単語、文、または段落で文全体を書く必要はありません。 必要に応じて、cssプロパティtext-transform:uppercase;があります。



下線とハイライト


リンク以外のアイテムに下線を引かないでください。 選択するには、<strong>、<em>を対応するcss-properties font-weight:bold、font-style:italicで使用するか、フォント自体を変更します。 セマンティックフラグメントが強調表示されず、視覚的にのみ強調表示される場合は、<span>を使用します。



これにはおそらく、フォーマットやid要素の名前の選択方法など、より明白なものは含まれていませんでしたが、これは、コードを書く文化ではなくスタイルに当てはまります。 CSSは誰もが完全に知る必要はないかもしれませんが、HTMLドキュメントの構造はすべての開発者が理解する必要があります。



このメモがあなたのコメントによって役に立ち、補足/修正されることを願っています。



All Articles