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

ウェブページ作成時の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使用すると、より大きなフォントが生成されます。代わりに見出し(テキストがすでに見出しになっている場合はh1h2など)を使用して意味を追加するか、CSS のfont-sizeプロパティを使用してより細かく制御します。 small小さいフォントを生成します。ここでも、CSS ( font-size ) によってさらに細かい制御が可能になります。 hr水平線を表示するために使用できます。 CSS デザインでhrを使用することはほとんどありません。CSS のborder-topborder-bottomプロパティ、または単純な画像の方が適しています。
上記のタグは最新の HTML 標準と互換性がありますが、適切なタグとして期待されるようなコンテンツに対する意味はありません。これらはもっと役に立つかもしれませんが、特に有害というわけではなく、次のような汚いタグの隣に立つと、口の中で溶けないほどの純粋なおいしさの無邪気なバターの塊と簡単に間違われる可能性があります。要素に下線を引くことができu 。下線付きのテキストには多くの関連性があることを思い出させます。このタグがずっと前に廃止されたのはそのためです。接続されていないテキストに下線を引く必要はありません。 center要素内の要素を中央に配置するために使用できます。 CSS プロパティtext-aligncenterだけでなく、 leftrightjustifyも許可されます。 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属性に置き換えられています。 textbgcolor body開始タグ内のページの基本的なテキスト色と背景色を定義するために使用できます。 CSS のcolorプロパティとbackground-colorプロパティをbodyセレクターに適用すると、同じことが実現できます。 background bodyタグ内に背景画像を指定できます。 CSS では、background-image などのプロパティを使用して背景画像をより適切に処理できます。 linkalinkvlink 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> )。見た目は良いですが、自分のサイトではこれを行いません。ユーザーは奇妙なもの(新しいウィンドウなど)が表示されることを期待しておらず、最もよく使用されるブラウジング ツールはブラウザーの戻るボタンですが、新しいウィンドウを開くとこのボタンは機能しません。違法であり使用できません。 これらの要素は異なる値を使用することが多いため、画像のwidthheight 、表のcellpaddingcellspacingなどのタグのプレゼンテーション属性は保持されることに注意してください。これは完璧な解決策ではありませんが、ページに画像や表が多数ある場合は、それらを使用する以外に賢明な選択肢はありません。
最も混乱を招くプレゼンテーション属性はtextareaタグです。このタグには、最新の HTML バージョンでも必須となっているcolsrowsという 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) などを使用します。

さらに読む: HTML 上級ガイド: 悪い習慣を断ち切り、標準に移行する - XHTML の互換性

<<:  JavaScript リフレクション学習のヒント

>>:  lastInfdexOf 関数の MySQL 実装例

推薦する

Linux で同じバージョンの R を使用して Seurat2 と Seurat3 を同時にインストールするチュートリアル

Seurat は、単一細胞解析用の重量級の R パッケージです。使用したことがある人なら誰でも、その...

Macシステムをインストールした後にVMWareがフルスクリーンで表示できない問題を解決する

システム: VMTOOLs ダウンロード:リンク: https://pan.baidu.com/s/...

MySQLスレーブのメンテナンスに関する経験の共有

序文: MySQL マスター/スレーブ アーキテクチャは、最も一般的に使用されるアーキテクチャ セッ...

HTML インライン要素と HTML ブロックレベル要素の概要と違い

ブロックレベル要素の機能: • 常に新しい行から始まり、それ自体で 1 行を占め、後続の要素も新しい...

JavaScript でのプロキシの使用を理解するための記事

目次エージェントとは何かプロキシの基礎知識ハンドラオブジェクトのメソッドプロキシでできること参考文献...

Linuxで権限が拒否された場合の解決策の詳細な説明

許可が拒否されました:その理由は、ファイルの読み取り、書き込み、作成、削除などの権限がないためです。...

MySQL トランザクションと分離レベルの基本原理の簡単な分析

目次序文1. 取引の基本原則の簡単な分析原子性:持続性分離:一貫性: 2. 分離レベルの基本原理の分...

Linux での SELinux を理解する方法

目次1. SELinux の紹介2. SELinuxの基本概念2.1 仕事の種類2.2. セキュリテ...

Vue ポーリング リクエスト ソリューションの完全な例

世論調査の理解実際、ポーリングの焦点はループ自体ではなく、実行間の間隔にあります。 Ajax は非同...

Mysql binlog ログファイルが大きすぎる場合の解決策

目次1. 関連するbinlog設定2. binlogに関する詳細設定2.1 バイナリログモードの変更...

JavaScript クラス配列の詳細な理解

js 配列はどこでも使用されているため、おそらく誰もがよく知っているでしょうが、配列クラス (疑似配...

Vueはスクロールバースタイルを実装します

最初はブラウザのスクロールバーのスタイルを変更して効果を実現したいと思っていましたが、情報を調べてみ...

ショートビデオ(Douyin)の透かし除去ツールの実装コード

目次1. まず最初のリンクを取得する2. ブラウザでこのリンクを開いてください3. アドレスを開くと...

Linux で MySQL 5.6 X64 バージョンをインストールする詳細な手順

環境: 1. CentOS6.5 X64 2.mysql-5.6.34-linux-glibc2.5...

JavaScript初心者がよく犯す間違い

目次序文undefined と null の混同紛らわしい数値の加算と文字列の連結戻り文の改行の問題...