Loading...

ブログ詳細

BLOG DETAIL

ブログ詳細

HTML5で主要なタグをまとめてみました!

PR

2021.01.19

HTML5で主要なタグをまとめてみました!
今回はコーディングを教える立場になった時に、タグ一覧がまとめてあったら便利だと思い

ざっくりと主要なタグ一覧を作ってみました。

 

初心者がまず覚えるべきタグ


 

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タグ


このタグで囲った要素が1つのセクションであることを定義するためのタグです。

仕様上、見出しを伴う意味的なグループの単位であるため、

このタグの中には見出しタグ( <h1> 〜 <h6> )を含める必要があります。

 

articleタグ


上記 <section> と同じく、囲った要素が1つのセクションであることを定義するためのタグです。

<section> との用途の違いは、タグで囲われた内容が単体で完結しているかという点です。

例えばブログ記事などのように単一のテーマについて書かれていて、

そのセクションを切り出しても意味が成立する内容なのであれば <section> ではなく <article> を使用します。

 

navタグ


リンクナビゲーションを表すタグです。

主にWebサイト全体のリンクに関わるグローバルナビゲーションや、

コンテンツ内の移動を助けるサブナビゲーションに使用します。

 

timeタグ


日付や時刻を指定する際に用います。

24時間表記、新暦のグレゴリオ暦における正確な日付を表します。

日時を目に見えるように記述するdatetime属性はWebサイトの更新日時を表示します。

たとえば更新日時が信憑性にかかわるニュースなどの記事の日にちや時間表示として使われることが多いです。

 

 

最後に・・・


最後まで読んで頂き、ありがとうございました!

HTMLのタグはたくさんありすぎるので、最低限の意味合いを理解していれば

全て覚える必要はないと思っております。今はすぐネットで調べられますしね!!

今後も新たに追加して、こちらの記事は更新していきたいと思います。

それでは引き続き、ブログ更新していきます!!!

今更ですが、Wantedly始めました

最新の記事が存在しません

R E C R U I T

採用に興味がある方はこちら

ライブエストでは通年採用を行っております。
興味がある方はお気軽にお問合せください。