HTML タグと属性をセマンタイズする

巴扎黑
リリース: 2017-04-05 16:52:29
オリジナル
990 人が閲覧しました

構造とプレゼンテーションを分離するもう 1 つの重要な側面は、文書コンテンツを構造化するためにセマンティック マークアップを使用することです。 XHTML 要素の存在は、マークされたコンテンツの部分が対応する構造的意味を持っていることを意味し、他のマークアップを使用する理由はありません。つまり、

タグの見出しの代わりに

を使用するなど、CSS で 1 つの HTML 要素が別の HTML 要素のように見えるようにしないでください。

1 つ目は、セマンティクスとデフォルト スタイルの違いについてです。デフォルト スタイルは、ブラウザによって設定されるいくつかの一般的に使用されるタグの表現であり、その主な目的は、マークアップと属性を直感的に理解できるようにすることです。 Hx シリーズは太字で大きなフォント サイズであるため、タイトルによく似ていることがわかります。 は他の単語と区別し、強調する役割を果たします。リストと表は、それらが何をするのかを明確に示します。

次に、セマンティック Web ページの最も重要な利点は、構造とセマンティクスが優れているため、Web コンテンツが検索エンジンによって自然にクロールされやすくなり、Web サイトを宣伝する際の労力を大幅に節約できることです。

タイトルとしては、重要度の高い順に、

が使用されます。

は最高レベルです。例:
<h1>文档标题</h1>
<h2>次级标题</h2>
ログイン後にコピー

ドキュメント タイトル

または ドキュメント タイトル を使用する代わりに、検索エンジンは明らかに後者を使用しません。タイトルにある1つ。

段落記号、

を段落として認識すると、
を使用して改行する必要がなくなります。段落。

内のテキストは自動的に折り返され、行折り返し効果は
よりも優れています。段落間の間隔は CSS を使用して制御することもできるため、段落を相互に簡単かつ明確に区別できます。 line-height を使用すると、行間の間隔を簡単に定義し、ドロップ キャップなどの効果を定義できます。これは完璧です。例:

<p>Admin10000.com 是WEB开发者学习交流的网站,这里提供大量实用的技术文档及相关资源下载,是网页设计、网络编程人员及其爱好者必备网站。</p>
<p>希望大家能在这里学到WEB开发知识,启发灵感,提高自己的WEB开发水平。</p>
ログイン後にコピー