セマンティックタグとは何ですか?-htmlチュートリアル-php.cn

1. セマンティックタグとは何ですか?
簡単に言うと、例えば、
Webページ上の記事のタイトルをタイトルと呼び、Webページ上の各記事を記事と呼ぶことができます。

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

(1) 検索エンジンによってインデックスされやすくなります。
(2). スクリーンリーダーが Web ページのコンテンツを読みやすくします。
(3). ページのテーマをより適切に反映できます。
(4). より多くのネットワークデバイスに対する互換性とサポートが向上しました。
2. 一般的なセマンティックタグ

ヘッダー - ヘッダータグとナビゲーションタグ

ヘッダーヘッダー、本文の下の直接のサブ要素、ヘッダーは通常、ウェブサイト名、ロゴ、またはページの紹介情報を入れるために使用されます。ナビゲーションバーのナビゲーション。

 <header><h1>html5语义化标签</h1><nav><h1>导航</h1><ul><li>章节标签</li><li>标题标签</li></ul></nav></header>

ログイン後にコピー

nav要素はページのナビゲーションリンク領域を表します。ページのメインナビゲーションセクションを定義するために使用されます。

メイン部分 - メインとセクション

主体部分如下：<article> <hgroup>     <h1>我是标题</h1>     <cite>《我是作品标题》</cite><br>     <span>我是时间 <time pubdate="" datetime="2017-03-02">2017年03月02日</time></span>     <p>我是内容</p> </hgroup> <section>     <blockquote>我是引文我是引文我是引文我是引文我是引文我是引文</blockquote>     <figure>         <img alt="" src="images/sess1.jpg">         <figcaption>我是图片</figcaption>     </figure>     <table borde="1">         <caption>我是表格标题</caption>         <thead>         <tr>             <th>我是表格头部1</th>             <th>我是表格头部2</th>         </tr>         </thead>         <tbody>         <tr>             <td>我是内容1</td>             <td>我是内容1</td>         </tr>         <tr>             <td>我是内容1</td>             <td>我是内容1</td>         </tr>         </tbody>         <tfoot>         <tr>             <td>我是表格结尾1</td>             <td>我是表格结尾2</td>         </tr>         </tfoot>         </tr>     </table> </section> <footer>
     我是文章页脚 </footer></article><aside> <hgroup>     <h2>我是标题标签</h2>     <p>我是内容</p> </hgroup> <code> 我是代码</code> <pre class="brush:php;toolbar:false">
             静夜思
           作者：李白
     床前明月光，疑是地上霜。
     举头望明月，低头思故乡。

ログイン後にコピー

テーマ部分のレンダリングは次のとおりです:

1): 記事タグ: このタグは、実際、セクションと div と最も混同されやすいです。記事は、ドキュメント内の項目、つまり開発者が独自に開発または再利用することを目的としたページまたは Web サイト内の自己完結型コンテンツを表します。記事の構造は一般的に次のとおりです:

    <article>     <hgroup><header>         <h1></h1>         <h2></h2></header>     </hgroup>     <section></section>     <footer></footer></article>

ログイン後にコピー

記事のアプリケーションは、フォーラムの投稿、ブログの記事、ユーザーのコメント、インタラクティブなウィジェットなどです。 (特別セクション) 記事には、内容に加えて、タイトル (通常はヘッダー) とフッターが含まれます。

2): hgroup タグ: このタグは Web ページまたはセクションのタイトルを結合します。平たく言えば、多数のタイトルを 1 つのバスケットに入れる方がはるかに便利です。

3):cite タグ: コンテンツを引用する書籍や雑誌のタイトルを定義するために使用され、著者や日付などの他の情報は許可されません。

4): 時間タグ: このタグには通常、機械が認識できるタイムスタンプという 3 つのコンポーネントがあります。形式はマイナス記号で区切られた年、月、日の数字でなければなりません。時間を追加する場合は、文字 T を追加してから 24 を追加します。日付の後の時間の値とタイムゾーンオフセット (datetime="2012-2-15T22:49:40+08:00" の形式)。人間が判読できるテキストコンテンツ: 形式は任意です。理解できる。オプションの pubdata タグ: pubdata はブール値です。必要に応じて、属性名を pubdata として記述します。ただし、見た目を美しくするために、 pubdata="" と記述することもできます。時刻が記事内にある場合は、記事内にない場合はその記事の公開時刻を表すことになります。、ドキュメント全体の公開時間を表します。

5): セクションタグ: ドキュメント内の「セクション」または「段落」を表します。「セクション」は記事のトピックベースの区分を指します。「セクション」はページ内のグループを指します。

セクションには通常タイトルもありますが、HTML5 のセクションではタイトル h1 ～ h6 が自動的にダウングレードされますが、手動でダウングレードすることをお勧めします。

6):blockquote タグ: このタグは、別のソースから取得したブロック引用を定義します。

と

の間のテキストはすべて通常のテキストから分離されており、多くの場合、左右がインデントされ、場合によっては斜体になります。つまり、ブロック参照には独自のスペースがあります。

7):figure タグ: 独立したストリームコンテンツ (画像、チャート、写真、コードなど) を指定します。

figure 要素のコンテンツはメインコンテンツに関連している必要がありますが、削除してもドキュメントフローに影響はありません。

8):figcaption タグ: Figure 要素のタイトル (キャプション) を定義します。

「figcaption」要素は、「figure」要素の最初または最後の子要素として配置する必要があります。

9): table タグの意味化: table タグは、テーブル内の行をグループ化する thead、tfoot、および tbody 要素を提供します。テーブルを作成するとき、ヘッダー行、データを含むいくつかの行、および下部に合計行を含めることができます。この分割により、ブラウザはテーブルのヘッダーやフッターとは独立してテーブル本体のスクロールをサポートできるようになります。テーブル内で thead、tfoot、および tbody 要素を使用する場合は、ブラウザがすべてのデータを受信する前にフッターを表示できるように、すべての要素を thead、tbody、tfoot の順序で使用する必要があることに注意してください。

10): サイド要素は、メインコンテンツの補助情報部分として記事要素に含まれます。コンテンツには、現在の記事に関連する関連情報、タグ、ランキングの説明などが含まれます。 (特別セクション)

11):code: このタグは、コンピューターコードのテキストを定義するために使用されるフレーズタグです。

12):pre タグ: pre はフォーマット済みのテキストを定義できます。通常、pre 要素で囲まれたテキストには空白と改行が保持されます。テキストも固定幅フォントで表示されます。 pre タグの一般的な用途は、ソースコードを表すことです。

code标签和pre标签之间的关系，两者的共同点是应用上类似，都主要应用于浏览器显示计算机中的源代码。但是两者之间还是有很大不同的，code标签的一个功能是暗示浏览器code标签所包围的文本是计算机源代码，浏览器可以做出自己的样式处理，pre标签则没有这项功能，但是pre标签可以保留文本中的空格和换行符，保留文本中的空格和换行符是计算机源代码显示所必须的样式。那么这个时候我们可以想象一下，code标签和pre标签可不可以一块使用呢？答案是可以的，code标签和pre标签是可以嵌套使用的，但是必须注意两者的嵌套顺序。

13):dialog标签：该标签定义对话框或窗口，这可以很方便的使用弹出层窗口。
默认情况下，该标签支持的浏览器(Chrome 37+和Opera 27+)会以隐藏的形式呈现