ウェブページ作成時のHTMLタグの使用に注意してください

この記事では、Web ページの作成を学習するときに注意すべき HTML タグに関するいくつかの問題を紹介します。
HTML はプレゼンテーションからコンテンツへの移行を試みており、コンテンツの意味(HTML) とプレゼンテーション(CSS) を分離するという論理的根拠に至っています。これにより、プレゼンテーション命令のセット (外部 CSS ドキュメントの形式) を複数のページに適用できるため、Web ページのサイズが縮小されます。これにより、単一のファイルを変更するだけでグローバルな変更を行うことができるため、サイトの管理も容易になります。
不適切なタグの中には、本質的にはプレゼンテーション用のタグ ( smallなど) があり、より意味のある単純な CSS ルールに置き換えることができます。その他のタグは、プレゼンテーション用であるだけでなく、不必要に大きくなったり ( fontタグなど)、ユーザビリティに悪影響を与えるほど目障りなもの ( blinkなど) もあります。タグ以下に、頻繁に遭遇する可能性のある、より優れたオプションを持つタグをいくつか示します。b b使用すると、要素を太字にすることができます。代わりにstrong (強い強調を意味する) を使用するか、太字の要素を示すfont-weight: boldルールを追加して CSS で同じ作業を行う方が理にかなっています。 i要素を斜体にするのに使用できます。 em (強調) を使用すると、より意味がわかりやすくなります。または、CSS を使用して斜体にすることもできます。font font-style: italic big使用すると、より大きなフォントが生成されます。代わりに見出し（テキストがすでに見出しになっている場合はh1 、 h2など）を使用して意味を追加するか、CSS のfont-sizeプロパティを使用してより細かく制御します。 small小さいフォントを生成します。ここでも、CSS ( font-size ) によってさらに細かい制御が可能になります。 hr水平線を表示するために使用できます。 CSS デザインでhrを使用することはほとんどありません。CSS のborder-top 、 border-bottomプロパティ、または単純な画像の方が適しています。
上記のタグは最新の HTML 標準と互換性がありますが、適切なタグとして期待されるようなコンテンツに対する意味はありません。これらはもっと役に立つかもしれませんが、特に有害というわけではなく、次のような汚いタグの隣に立つと、口の中で溶けないほどの純粋なおいしさの無邪気なバターの塊と簡単に間違われる可能性があります。要素に下線を引くことができu 。下線付きのテキストには多くの関連性があることを思い出させます。このタグがずっと前に廃止されたのはそのためです。接続されていないテキストに下線を引く必要はありません。 center要素内の要素を中央に配置するために使用できます。 CSS プロパティtext-align 、 centerだけでなく、 left 、 right 、 justifyも許可されます。 menuメニューリストを作成するために使用されます。 ulほど完璧ではありません。順序なしリストの方が汎用性が高く、 ul menu よりも優れているからです。 layer 、CSS によって配置されるという点でdiv要素に似ています。これは Netscape の古いバージョンでのみ機能するため、もはや役に立ちません。 blinkまたはmarquee 。大声でノーと言いましょう！当然のことながら、サポートは非常に限られており、非常にひどいジョークにしかなりません。要素のフォント名、サイズ、色を定義するために使用できるfont 、タグの世界ではタグの王という悪名高い称号を当然のように得ています。古いウェブサイト（そして新しいウェブサイトも）がアリの大群のようにページ中に散らばっています。 fontタグの増加のほとんどは、 fontタグを使用してすべての要素の色とサイズを指定する Web デザインソフトウェアによるものです。 fontタグは繰り返し要素ごとに表示されるように悪用されます (たとえば、 p要素を使用するたびに)。一方、CSS は繰り返し要素に適用することも、短いコードで Web サイト全体を制御することもできます。 CSS アプローチを使用すると、 fontタグで乱雑になっているページよりもページがスリムになるだけでなく、 fontタグを 1 つずつ変更するのではなく、CSS ファイル内の1 行を変更するだけで済むため、メンテナンスも簡単になります。これにより、長期にわたって一貫したデザインスタイルで Web サイトを維持できる可能性も高まります。 fontタグとテーブルの不適切な使用は、Web ページの不要な肥大化を引き起こす主な原因の 2 つです。属性適切なタグを使用していると思っていても、いつでも現れる可能性のある厄介な寄生属性が潜んでいます。 name要素の名前を指定するために使用されます。 inputなどのフォーム要素では完全に受け入れられますが、他の場所ではnameの役割はid属性に置き換えられています。 textとbgcolor body開始タグ内のページの基本的なテキスト色と背景色を定義するために使用できます。 CSS のcolorプロパティとbackground-colorプロパティをbodyセレクターに適用すると、同じことが実現できます。 background bodyタグ内に背景画像を指定できます。 CSS では、background-image などのプロパティを使用して背景画像をより適切に処理できます。 link 、 alink 、 vlink bodyタグ内でリンク (未訪問、アクティブ、訪問済み) を指定するために使用されます。 CSS の達人である:link 、 :active 、 :visited役に立ちます。 align要素のコンテンツを配置するために使用できます ( <div align="center">Stuff</div>など) が、 centerタグと同様に、CSS のtext-alignプロパティが新しい主役になります。 targetさまざまな方法でリンクを開くことができますが、最も一般的な方法は新しいウィンドウを開くことです (例: <a href="wherever.html" target="_blank">Help me</a> )。見た目は良いですが、自分のサイトではこれを行いません。ユーザーは奇妙なもの（新しいウィンドウなど）が表示されることを期待しておらず、最もよく使用されるブラウジングツールはブラウザーの戻るボタンですが、新しいウィンドウを開くとこのボタンは機能しません。違法であり使用できません。これらの要素は異なる値を使用することが多いため、画像のwidthやheight 、表のcellpaddingやcellspacingなどのタグのプレゼンテーション属性は保持されることに注意してください。これは完璧な解決策ではありませんが、ページに画像や表が多数ある場合は、それらを使用する以外に賢明な選択肢はありません。
最も混乱を招くプレゼンテーション属性はtextareaタグです。このタグには、最新の HTML バージョンでも必須となっているcolsとrowsという 2 つの有効な属性しかありません。ラベルは良いが、使い方は悪い寝室に入るには、かがんで犬用の穴を通らなければなりませんが、待ってください、人間用の取っ手付きのドアもあります!わあ、見てよ、ちょうど一人入るくらいだよ。
信じられないかもしれませんが、HTML タグ (良いタグ) を使用するのには、非常に良い理由があります (信じてください!)。使用する前提が良ければ良いほど、より良い結果が得られます。
ユーザーにとっては、HTML タグの構文やセマンティクスよりも Web ページ自体の方が使いやすいです。スクリーンリーダーは、 ulタグやh1またはh2の付いたタイトルタグを検出すると、それを強調表示することがよくあります。
HTML の世界で最も乱用されるタグはテーブルです。テーブルはレイアウトによく使用されますが、テーブルは設計上、表形式のデータを表示する目的でのみ使用する必要があります。テーブルを使用しないレイアウトアプローチは、禅のような悟りの追求ではありません。Web ページのサイズを大幅に縮小できるだけでなく、メンテナンスや再設計も容易になります。デザイナーは、ここで説明したタグや属性 (特にレイアウトにテーブルを使用する) を使用して、古いブラウザー (特に Netscape 4) と最新のブラウザーの両方で機能する移行デザインを作成する場合があることに注意してください。 CSS が不十分な Netscape 4 では、テーブルによってプレゼンテーションをより細かく制御できます。残念ながら、このようなユーザーはほとんどおらず、一方でモバイルデバイスユーザーの数は増加しており、テーブルレイアウトの欠点がはっきりと現れています。上記のテーブルレス設計により、すべてのビューで完全な機能が維持されながら、少数のユーザーに対してわずかなパフォーマンスの変化が生じるだけで、これらの欠点が回避されます。フレーム
ゴルディロックスはシリアルを一杯食べるのがいい考えだと思ったが、突然3匹の大きな肉食哺乳類が現れ、彼女を窓から投げ出した。フレームはシリアルを入れるカップです。見た目は良いかもしれませんが、絶滅の危機に瀕しており、すぐに消えてしまいます。
ほとんどの Web サイトはフレームを使用しておらず、一般ユーザーもドキュメントをページとして扱います。
場合によっては、ユーザーが特定の Web ページをブックマークに追加できないようにしたい場合や、ユーザーに電子メールやインスタントメッセージングソフトウェア経由で特定の Web ページを推奨させたい場合、Web サイト全体を非常に複雑にして、スクリーンリーダーを使用するユーザーがフレーム間を頻繁に操作しなければならないようにしたい場合、検索エンジンを混乱させたい場合など、フレームを使用すれば十分です。
つまり、フレームワークは複雑さを増し、使いやすさを失わせるだけです。これらのルールに従う限り、将来間違いを犯すことはないことに注意してください。
1)タグや属性がパフォーマンスとわずかでも相関関係にある場合は、使用しないでください。それが CSS のものです。そして、CSS はそれをより良く実現します。
2)ラベルはその名前が示す目的に沿って使用します。テーブルタグは表形式のデータに使用されます。タイトルにはタイトルタグが使用されます。などなど。
3)特定のコンテンツに適切なタグを使用します。リストにはlistを使用し、見出しには hx (x = 1 - 7) などを使用します。