目次
1. HTML セマンティクスとは何ですか?
簡単に言うと、各タグは独自の処理を行うため、マシンが直接読み取ることができます。
2. なぜセマンティクスなのか?
1. 検索エンジンによってインデックスされやすくなります。
2. 他の種類のデバイス (スクリーン リーダーなど) による分析に便利です。
3. チームの開発とメンテナンスに便利です。
3. よく使用されるタグのセマンティクス
タグ | 意味 | note |
Web ページのタイトル | ユーザーと検索エンジンに伝えるために使用されますこれは Web ページのメインコンテンツです。検索エンジンは、タイトルから Web ページのテーマをすぐに判断できます。 | |
記事の段落 | デフォルトのスタイルでは、段落の前後にスペースが入ります。 | |
~ | 記事のタイトル | h1 は最も重要です、通常はウェブサイトの名前に使用されます。これらのタグはフォントをより太く大きくしますが、h タグは単にこの効果を実現するために使用することはできません。 |
/ | 記事内の特定の単語を強調します | どちらのタグも強調を表現するために使用されますが、 の方が強力です。 は斜体で表示され、 は太字で表示されます。 |
セマンティクスなし | その機能は、個別のスタイルを設定することです。 | |
他の人の短いコンテンツを引用する | 記事内で他の人の文章を引用する必要がある場合は、このタグを使用してください。デフォルトでは、ブラウザは自動的に二重引用符を q タグに追加します。短いコンテンツに適しています。 | |
他の人のコンテンツの大部分を引用する | 他の人のコンテンツも引用します。 | |
改行 | HTMLでは、キャリッジリターンとラインフィードは無視されます。 | |
水平線 | は、異なる段落を区切るために使用されます。 | |
ウェブサイトの連絡先アドレス情報 | デフォルトのスタイルは斜体で表示されます。 | |
単一行のコード | ||
事前にフォーマットされたテキスト | preタグ内のコンテンツにはキャリッジリターンと改行が保持されます。通常、複数行のコードを表示するために使用されます。 | |
List | シーケンスのないリスト。 | |
Ordered list | Ordered list | |
Container | は、Web ページの独立した領域を分割するために使用されます。 id および class 属性と組み合わせて、HTML 構造をより明確にすることができます。 | |