HTML セマンティック タグ、HTML5 の新しいセマンティック タグについての簡単な説明_html/css_WEB-ITnose

HTML セマンティック タグ、HTML5 の新しいセマンティック タグ

勉強期間中に、HTML のセマンティック タグに関する知識をいくつかまとめましたが、このリストは包括的ではありません

新しい洞察があれば、メッセージを残していただければ幸いです。追加してください、ありがとうございます

1. セマンティックタグとは何ですか?

セマンティックタグとは何ですか? 簡単に言えば、各タグの目的を理解することです (どのような状況でこのタグを使用できますか?) , Webページ上の記事の

タイトル

にはtitleタグが使用でき、Webページ上の各列の列名にもtitleタグが使用できます。 記事内の内容の段落は

段落タグ

内に配置する必要があります。記事内で強調したいテキストがある場合は、emタグを使用して強調などを表現できます。

2. セマンティックタグを使用する理由

1. 検索エンジンにインデックスされやすくなります。

2. スクリーン リーダーが Web コンテンツを読みやすくします。

3. ページのテーマをより適切に反映できます

4. 互換性の向上、より多くのネットワーク デバイスのサポート

1): タグ: ハイパーリンクの実装

マウスをリンク テキスト上でスライドさせると、この属性のテキスト コンテンツが表示されます。この属性は、実際の Web 開発において主に、検索エンジンがリンク アドレスの内容を理解しやすくするために役立ちます (意味的により分かりやすい)

2):

タグ内に記事の段落が配置されます。 ;p> タグ

3): タグ: 記事タイトル、列タイトルは

合計 6 つのタイトル タグがあります。h1、h2、h3、h4、h5、 h6 はそれぞれ第 1 段見出し、第 3 段見出し、第 4 段見出し、第 5 段見出し、第 6 段見出しです。そして重要度の降順に。

は最高レベルです。

4): タグ: 特定の単語を強調します

ただし、強調のトーンが異なります: は強調を意味します。強調。ブラウザでは、 はデフォルトで

イタリック体

で表され、 は

太字

で表されます。

この 2 つのタグと比較して、国内のフロントエンド プログラマは現在、強調を表現するために を使用することを好みます。

5): タグ: 短いテキストの引用

引用するテキストは

二重引用符

である必要はありません。ブラウザは自動的に q タグに二重引用符を追加します

6):

タグ: 長いテキストの引用

ブラウザは

インデント スタイルで

blockquote> タグを解析することに注意してください

7):

にアドレス情報を追加しますWeb ページ

8 ; コンテンツはブラウザに表示されません。その機能は、表の可読性 (意味化) を高め、検索エンジンが表の内容をよりよく理解できるようにすること、また、スクリーン リーダーが特別なユーザーが表の内容を読みやすくできるようにすることです。

文法:

タイトルは表の内容を説明するために使用されます。 タイトルは表の上部に表示されます。

構文:

タイトルテキスト

4.Html5 セマンティックタグ

1):article タグ: 独立した記事コンテンツをロードして表示します。

例えば、完全なフォーラム投稿、Web サイトのニュース、ブログ記事など、ユーザーのコメントなど。アーティルスは入れ子にすることができ、内側のアーティルスは外側の記事タグと従属関係を持ちます。

たとえば、ブログ投稿を記事として表示し、そこにいくつかのコメントを記事の形式で埋め込むことができます。

<article><h1 id="文章标题">文章标题</h1>这是一篇文章   <article>评论1...</article>    <article>评论2...</article></article>

2):section タグ: ドキュメント内のセクション (セクション、セクション) を定義します。章、ヘッダー、フッター、文書のその他の部分など。

例:

<section>   <h1 id="章节一">章节一</h1>    <p>详细内容...</p></section><section>   <h1 id="章节二">章节二</h1>    <p>详细内容...</p></section>

3):aside タグ: 非テキストコンテンツをロードするために使用されます。広告、リンクのグループ、サイドバーなど。

4):hgroup タグ: Web ページまたはセクションのタイトル要素 (h1 ～ h6) をグループ化するために使用されます。

たとえば、セクション内に h 系列のタグ要素が連続する場合、それらを hgroup で囲むことができます。

<hgroup><h1 id="标题">标题1</h1><h2 id="标题">标题2</h2></hgroup>

5):header タグ: ドキュメントのページの組み合わせ、通常は何らかのガイダンスとナビゲーション情報を定義します。

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

通常、この要素には作成者の名前、文書の作成日、および/または連絡先情報が含まれます。

例:

<footer> &copy; 2012 Baidu 使用百度前必读 京ICP证030173号 </footer>

 

7):nav 标签:导航链接放在nav标签里。

nav标签里应该放入一些当前页面的主要导航链接。

例如在页脚显示一个站点的导航链接（如首页，服务信息页面，版权信息页面等等），就可以使用nav标签，当然，这不是必须的。

 

8):time 标签:定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的。

该元素能够以机器可读的方式对日期和时间进行编码,搜索引擎也能够生成更智能的搜索结果

 

9):mark 标签:定义带有记号的文本。请在需要突出显示文本时使用 标签。

 

10):figure标签:规定独立的流内容（图像、图表、照片、代码等等）。

figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。

 

11):figcaption 标签:定义 figure 元素的标题（caption）。

"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

实例：

<figure> <figcaption>美女图片</figcaption> <img  src="/static/imghwm/default1.png"  data-src="meizi.jpg"  class="lazy"    style="max-width:90%"  style="max-width:90%" / alt="HTML セマンティック タグ、HTML5 の新しいセマンティック タグについての簡単な説明_html/css_WEB-ITnose" ></figure>