HTML5 の主要な機能の 1 つである意味の理解について話しましょう

この記事では、HTML のセマンティクスに関する関連知識を紹介します。いわゆるセマンティクスとは、HTML 自体で人間化された構造を体験できることを意味します。皆様のお役に立てれば幸いです。

セマンティクスとは何かについて説明する前に、セマンティクスの背景を見てみましょう。

前の記事で述べたように、HTML の最も重要な機能はタグです。しかし、プロジェクトが大きく、ラベルが多すぎて理解できず、積み重ねられています。中には奇妙な名前もあり、維持したい人は退会を説得され、チームワークによりチーム戦が始まりました！

したがって、セマンティクスが緊急に必要です。

セマンティクスとは

実際には、HTML を書くときは重要ではありません。ユーザーは内部がどのように見えるかを見ることができず、見る必要もないからです。

CSS という美しい服を着ているので、たとえ HTML が汚くても、CSS で輝かせることができます。

しかし、ユーザーにはそれが見えませんが、開発者には見えます。したがって、このセマンティクスで最も友好的なのは開発者自身です。

いわゆるセマンティックとは、HTML 自体で人間化された構造を体験できることを意味します。

セマンティクスの利点

• CSS がなくても、ページは適切なコンテンツ構造とコード構造を表現できます。このようにして、開発者は一目で意図を理解し、すぐにアイスブレイクを行うことができます。

• SEO に優しい。開発者に優しいものであれば、開発者のバグにも優しいものになります。

  タグが適切に適用され、コンテキスト内で目的のキーワードの重みが反映されていれば、検索エンジン クローラーが味方になります。そうすればウェブサイトのトラフィックが来るでしょう？

• 一部の特殊なデバイス (ブラインド リーディング、モバイル デバイス)、Web ページの翻訳などをサポートできます。

• 最も直感的なポイントは、チームメイトがあなたに協力したいと思っているということです。チームメイトはあなたのコードのセマンティクスを気に入っています。

  セマンティックはより読みやすく、W3C 標準に従うチームはすべてこの標準に従うため、差別化が減少する可能性があります。 (ジョブホッピングと迅速な統合?)

仕事におけるセマンティック思考

• 純粋なスタイル タグを使用しないでください。これらの CSS が役に立ちます。私たちがやります。例: b、font、u、その他のタグ。

• 強調する必要があるテキストは、strong タグまたは em タグに含めることができます (strong のデフォルトのスタイルは太字 (b は使用しない)、em は斜体 (b は使用しない) です。 i). マークされた/強調表示されたテキストを表すには、マーク タグを使用します。

  ただし、CSS を使用して完成させることも検討できます。

• 各入力に対応する説明テキストlabel はラベル label を使用し、入力の id 属性を設定し、 lable タグで for=someld を設定することで、説明テキストを対応する入力に関連付ける必要があります。 fieldset タグで囲む必要があります。また、凡例タグを使用してフォームの目的を説明します。

• -

である必要があります。タイトルを示すために使用されます。

• CSS でスタイルを記述する場合、名前付けも HTML の構造に従い、セマンティクスの本質を反映する必要があります。

• セマンティック タグ

1,

タグはドキュメントのヘッダーを定義します

通常、ページのメインとサブタイトルが含まれます。<pre class="brush:php;toolbar:false">&lt;header&gt; &lt;h1 id=&quot;他真的是美男子吗&quot;&gt;他真的是美男子吗?&lt;/h1&gt; &lt;p&gt;据现场勘查，他真的是美男子！&lt;/p&gt; &lt;/header&gt;</pre>2、

タグはドキュメントまたはセクションのフッターを定義します

フッターには通常、ドキュメントの作成者、著作権情報、利用規約のリンク、連絡先情報などが含まれます。1 つのドキュメント ;

要素で複数の

<footer>
  <p>Posted by: 美男子</p></footer>

3. <main></main> タグはドキュメントのメイン コンテンツを指定します.

<main></main> 要素 コンテンツはドキュメントに固有である必要があります。

ドキュメント内で繰り返し表示されるコンテンツ (サイドバー、ナビゲーションなど) を含めないでください。バー、著作権情報、サイトのロゴ、または検索フォーム。

1 つの文書内に複数の

<main></main>

要素を含めることはできません。

この要素は、次の要素の子孫であってはなりません: <article> </article>、<aside></aside>、<footer></footer>、<header> または <code><nav></nav>.

<main>
  <h1 id="我的介绍">我的介绍</h1>
  <p>我是一个聪明的孩子</p></main>

4,

タグはドキュメント内のセクションを定義します。 # ドキュメント内の章、ヘッダー、フッター、またはその他のセクションなど。