h5 セマンティック タグの詳細な紹介

HTML 5 の革新 - セマンティック タグ (1)

1. HTML 5 が登場する前は、ページの章を表すために div を使用していましたが、これらの div には実際的な意味はありませんでした。 (このコンテンツの意味を記述するために CSS スタイル ID とクラスを使用する場合でも)。これらのタグは、Web ページの特定の部分を定義するためにブラウザーに提供する単なる指示です。しかし、html5 の登場により、以前は「意味」を持たなかったタグが消えてしまいました。これが通常「セマンティクス」と呼ばれるものです。

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

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

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

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

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

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

   主体部分如下：<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">
                静夜思
              作者：李白
        床前明月光，疑是地上霜。
        举头望明月，低头思故乡。 

    

        

   百度ife到底怎么样？

        

   当然棒啦！还等什么，学完就能秒变大神！

        Close 

    Open Dialog! 

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

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+)会以隐藏的形式呈现

元素，只有调用JavaScript的show()或showModal()方法才可以显现，调用close()方法再次将其隐藏。通常情况下，会在一个click事件上执行此方法。

3.尾部——footer

  <footer><p>copyright &copy @</p><address>我是地址</address>  </footer>

adderss标签:该标签定义文档作者或拥有者的联系信息，通常呈现为斜体。大多数浏览器会在该元素的前后添加换行。如果

元素位于

元素内部，则它表示该文章作者或拥有者的联系信息。通常的做法是将 address 元素添加到网页的头部或底部。注意，不应该使用

标签来描述邮政地址，除非这些信息是联系信息的组成部分。

三、总结
能语义化的标签当然不止这些，还有很多，这里仅仅是把可能常见的展示出来，其余的标签在此不一一列举了。
最后展示一张全家福来结束本篇笔记：

以上がh5 セマンティック タグの詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。