BLOG DETAIL
ブログ詳細
HTML5で主要なタグをまとめてみました！
PR
2021.01.19
今回はコーディングを教える立場になった時に、タグ一覧がまとめてあったら便利だと思い
ざっくりと主要なタグ一覧を作ってみました。
HTML文章であることを宣言している基点（ドキュメントルート）を定義する要素です。
ドキュメントを構成する他の全ての要素は、このタグの中に配置する必要があります。
タイトルなど、ドキュメントにおける設定情報（メタデータ）を内包するための要素です。
Webサイト上に表示する内容ではなく、裏側でブラウザが理解するための情報が記載されます。
ウェブページの表題（タイトル）を定義します。
ブラウザ上のタブや検索結果のタイトルとして表示されるのが、この<title>タグに設定された値となります。
前述のように、
Webサイト上で、ユーザーに対して表示する情報を定義するための要素で、Webサイトの本体となる部分です。
このタグの中に配置された要素が実際にブラウザの画面に表示されます。
アンカー（Anchor）を意味するタグで、指定の要素に対してリンクを定義する要素です。
本来は単一の存在であるドキュメント同士を繋げ、蜘蛛の巣状（ウェブ状）に繋がってネットワークを
形成することがウェブサイトの本質です。そういった意味でも、
特に意味を持たないタグで、範囲を指定するためのブロック要素です。
グループ化を行うことで指定した範囲の背景や文字色の変更など、
スタイル（CSS）を指定することが可能となります。似た用途で
ブレイク（Break）を意味しており、改行を行うための要素です。終了タグを必要とせず、単独で使用します。
エクセルのような表組みを意味するタグです。
<table>タグの内側に後述する各種タグを指定することで、表構成を決定していきます。
表組みの行（横方向）を定義するためのタグです。前述の
また、 このタグの中には
表の見出しを設定するタグです。
<th>タグに指定された値は、自動的に太字で表示されます。。
実際のデータや値を設定するのが<td>タグとなります。
一般的には<th>タグで指定した見出しに対しての値を、<td>タグで設定することになります。
見出しを表すタグで、h1~h6まで指定することが可能です。
段落を指定するために利用されるブロック要素です。
<p>タグでは、範囲の終わりで自動的に一行分の改行が設定されます。
Webサイト上に画像を表示させるためのタグです。
表示したいイメージのURLを指定することで、Webサイトを開いた際に画像を表示することが可能となります。
順不同リスト（Unordered List）を意味する通り、表示順序に意味を持たないリストを定義するためのタグです。
このタグの中にはリストの項目を定義する
スタイル（CSS）の指定がない場合は通常、項目の前に黒丸や白丸などのアイコンが表示されます。
順序付きリスト（Ordered List）を意味する通り、表示順序に意味を持つリストを定義するためのタグです。
スタイル（CSS）の指定がない場合は通常、項目の前に算用数字などのアイコンが表示されます。
リストアイテム（List Item）を意味しており、前述の
ウェブページ全体や個別のセクションの導入部分（ヘッダー）を定義するためのタグです。
一般的にはウェブページに対するヘッダーとして
サイト名やロゴ、ナビゲーションなどを設置します。
会社概要などへのリンクやコピーライトを入れて使用します。
このタグで囲った要素が１つのセクションであることを定義するためのタグです。
仕様上、見出しを伴う意味的なグループの単位であるため、
このタグの中には見出しタグ（
上記
例えばブログ記事などのように単一のテーマについて書かれていて、
そのセクションを切り出しても意味が成立する内容なのであれば
リンクナビゲーションを表すタグです。
主にWebサイト全体のリンクに関わるグローバルナビゲーションや、
コンテンツ内の移動を助けるサブナビゲーションに使用します。
日付や時刻を指定する際に用います。
24時間表記、新暦のグレゴリオ暦における正確な日付を表します。
日時を目に見えるように記述するdatetime属性はWebサイトの更新日時を表示します。
たとえば更新日時が信憑性にかかわるニュースなどの記事の日にちや時間表示として使われることが多いです。
最後まで読んで頂き、ありがとうございました！
HTMLのタグはたくさんありすぎるので、最低限の意味合いを理解していれば
全て覚える必要はないと思っております。今はすぐネットで調べられますしね！！
今後も新たに追加して、こちらの記事は更新していきたいと思います。
それでは引き続き、ブログ更新していきます！！！
ざっくりと主要なタグ一覧を作ってみました。
初心者がまず覚えるべきタグ
htmlタグ
HTML文章であることを宣言している基点（ドキュメントルート）を定義する要素です。
ドキュメントを構成する他の全ての要素は、このタグの中に配置する必要があります。
headタグ
タイトルなど、ドキュメントにおける設定情報（メタデータ）を内包するための要素です。
Webサイト上に表示する内容ではなく、裏側でブラウザが理解するための情報が記載されます。
titleタグ
ウェブページの表題（タイトル）を定義します。
ブラウザ上のタブや検索結果のタイトルとして表示されるのが、この<title>タグに設定された値となります。
前述のように、
<head> タグの中に配置する必要があります。bodyタグ
Webサイト上で、ユーザーに対して表示する情報を定義するための要素で、Webサイトの本体となる部分です。
このタグの中に配置された要素が実際にブラウザの画面に表示されます。
<body> タグはドキュメント中に一つだけ配置できます。aタグ
アンカー（Anchor）を意味するタグで、指定の要素に対してリンクを定義する要素です。
本来は単一の存在であるドキュメント同士を繋げ、蜘蛛の巣状（ウェブ状）に繋がってネットワークを
形成することがウェブサイトの本質です。そういった意味でも、
<a> タグはHTMLにおいて重要な要素です。divタグ
特に意味を持たないタグで、範囲を指定するためのブロック要素です。
グループ化を行うことで指定した範囲の背景や文字色の変更など、
スタイル（CSS）を指定することが可能となります。似た用途で
<span> タグがあります。brタグ
ブレイク（Break）を意味しており、改行を行うための要素です。終了タグを必要とせず、単独で使用します。
tableタグ
エクセルのような表組みを意味するタグです。
<table>タグの内側に後述する各種タグを指定することで、表構成を決定していきます。
trタグ
表組みの行（横方向）を定義するためのタグです。前述の
<table> タグの中に記述しなければなりません。また、 このタグの中には
<th> または <td> を配置する必要があります。thタグ
表の見出しを設定するタグです。
<th>タグに指定された値は、自動的に太字で表示されます。。
tdタグ
実際のデータや値を設定するのが<td>タグとなります。
一般的には<th>タグで指定した見出しに対しての値を、<td>タグで設定することになります。
よく使用する主要なタグ
h1 〜 h6タグ
見出しを表すタグで、h1~h6まで指定することが可能です。
<h1> が最重要の大見出しとなって数値が上がるごとに小見出しという扱いとなります。pタグ
段落を指定するために利用されるブロック要素です。
<p>タグでは、範囲の終わりで自動的に一行分の改行が設定されます。
imgタグ
Webサイト上に画像を表示させるためのタグです。
表示したいイメージのURLを指定することで、Webサイトを開いた際に画像を表示することが可能となります。
ulタグ
順不同リスト（Unordered List）を意味する通り、表示順序に意味を持たないリストを定義するためのタグです。
このタグの中にはリストの項目を定義する
<li>を配置する必要があります。スタイル（CSS）の指定がない場合は通常、項目の前に黒丸や白丸などのアイコンが表示されます。
olタグ
順序付きリスト（Ordered List）を意味する通り、表示順序に意味を持つリストを定義するためのタグです。
<ul>タグと同じくリストの項目を定義する <li>を配置する必要があります。スタイル（CSS）の指定がない場合は通常、項目の前に算用数字などのアイコンが表示されます。
liタグ
リストアイテム（List Item）を意味しており、前述の
<ul> や <ol> のリスト項目を定義するためのタグです。HTML5で追加された主要タグ
headerタグ
ウェブページ全体や個別のセクションの導入部分（ヘッダー）を定義するためのタグです。
一般的にはウェブページに対するヘッダーとして
<body> タグの直下に設置し、サイト名やロゴ、ナビゲーションなどを設置します。
footerタグ
<header> タグと同じく、ウェブページ全体や個別のセクションのフッター部分を定義するためのタグです。会社概要などへのリンクやコピーライトを入れて使用します。
sectionタグ
このタグで囲った要素が１つのセクションであることを定義するためのタグです。
仕様上、見出しを伴う意味的なグループの単位であるため、
このタグの中には見出しタグ（
<h1> 〜 <h6> ）を含める必要があります。articleタグ
上記
<section> と同じく、囲った要素が１つのセクションであることを定義するためのタグです。<section> との用途の違いは、タグで囲われた内容が単体で完結しているかという点です。例えばブログ記事などのように単一のテーマについて書かれていて、
そのセクションを切り出しても意味が成立する内容なのであれば
<section> ではなく <article> を使用します。navタグ
リンクナビゲーションを表すタグです。
主にWebサイト全体のリンクに関わるグローバルナビゲーションや、
コンテンツ内の移動を助けるサブナビゲーションに使用します。
timeタグ
日付や時刻を指定する際に用います。
24時間表記、新暦のグレゴリオ暦における正確な日付を表します。
日時を目に見えるように記述するdatetime属性はWebサイトの更新日時を表示します。
たとえば更新日時が信憑性にかかわるニュースなどの記事の日にちや時間表示として使われることが多いです。
最後に・・・
最後まで読んで頂き、ありがとうございました！
HTMLのタグはたくさんありすぎるので、最低限の意味合いを理解していれば
全て覚える必要はないと思っております。今はすぐネットで調べられますしね！！
今後も新たに追加して、こちらの記事は更新していきたいと思います。
それでは引き続き、ブログ更新していきます！！！
