HTMLの意味理解

Sep 20, 2016 am 03:30 AM

1. HTML セマンティクスとは何ですか?

<基本的には、タイトル (H1 ~ H6)、リスト (li)、強調 (em) など、いくつかの主要なタグを中心に展開します。>

コンテンツの構造(コンテンツセマンティクス)に従って、適切なタグ(コードセマンティクス)を選択すると、開発者はより洗練されたコードを読み書きしやすくなり、同時にブラウザのクローラーやマシンがコードを適切に解析できるようになります。

2. なぜセマンティクスなのか?

  • CSS を使用せずにページに適切なコンテンツ構造とコード構造を表示するには: 裸で実行したときに見栄えを良くするため。
  • ユーザー エクスペリエンス: たとえば、タイトルと alt は名詞の説明や画像情報の説明に使用され、ラベル タグを柔軟に使用できます。
  • SEO に有利: 検索エンジンとの良好なコミュニケーションを確立すると、クローラーはより効果的な情報をクロールできます。クローラーはタグに依存して各キーワードのコンテキストと重みを判断します。
  • 他のデバイス (スクリーン リーダー、ブラインド リーダー、モバイル デバイスなど) が Web ページを意味のある方法でレンダリングするための利便性
  • チームの開発と保守が容易になり、セマンティクスがより読みやすくなります。これは、Web ページの次のステップでは、すべてのチームがこの標準に従うため、差別化が減少する可能性があります。
  • 3. HTMLコードを書くときに注意すべきことは何ですか?

非セマンティックなタグ div と span をできるだけ少なく使用します

    セマンティクスが明確でない場合は、div または p を使用できます。p にはデフォルトで上下のスペースがあり、特殊な端末との互換性にとって有益であるため、p を使用してみてください。
  • b、font、u などの純粋なスタイル タグを使用せず、代わりに CSS 設定を使用してください。
  • 強調する必要があるテキストは、strong タグまたは em タグに含めることができます (ブラウザーのデフォルトのスタイル。CSS で指定できる場合は使用しないでください)。strong のデフォルトのスタイルは太字です (b は使用しないでください)。 em は斜体です (i は使用しないでください)。
  • 表を使用する場合は、タイトルに caption、ヘッダーに thead、メイン部分に tbody、末尾に tfoot を使用します。テーブルヘッダーは通常のセルと区別する必要があります。テーブルヘッダーには th を使用し、セルには td を使用します。
  • フォームフィールドはfieldsetタグで囲み、凡例タグを使用してフォームの目的を説明する必要があります。
  • 各入力ラベルに対応する説明文はlabelタグを使用する必要があり、inputにid属性を設定し、labelタグにfor=someldを設定することで説明文が対応する入力に関連付けられます。
  • 4. HTML5 に追加された新しいセマンティックタグについて詳しく説明してください。
こちらのフロントエンドマスターのブログをご覧ください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は? 公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は? Mar 04, 2025 pm 12:32 PM

公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は?

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? Mar 17, 2025 pm 12:27 PM

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか?

WebページのPNG画像にストローク効果を効率的に追加する方法は? WebページのPNG画像にストローク効果を効率的に追加する方法は? Mar 04, 2025 pm 02:39 PM

WebページのPNG画像にストローク効果を効率的に追加する方法は?

&lt; iframe&gt;の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? &lt; iframe&gt;の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? Mar 20, 2025 pm 06:05 PM

&lt; iframe&gt;の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか?

&lt; meter&gt;の目的は何ですか 要素? &lt; meter&gt;の目的は何ですか 要素? Mar 21, 2025 pm 12:35 PM

&lt; meter&gt;の目的は何ですか 要素?

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? Mar 17, 2025 pm 12:20 PM

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか?

&lt; datalist&gt;の目的は何ですか 要素? &lt; datalist&gt;の目的は何ですか 要素? Mar 21, 2025 pm 12:33 PM

&lt; datalist&gt;の目的は何ですか 要素?

HTML5&lt; meter&gt;を使用するにはどうすればよいですか 範囲内に数値データを表示する要素? HTML5&lt; meter&gt;を使用するにはどうすればよいですか 範囲内に数値データを表示する要素? Mar 12, 2025 pm 04:08 PM

HTML5&lt; meter&gt;を使用するにはどうすればよいですか 範囲内に数値データを表示する要素?

See all articles