よく使うHTMLのタグ一覧

titleタグ

「title」タグはタブに表示される文字を決定する際に使用します。
titleタグが設定されていない場合はファイル名がタブに表示されます。またtitleタグはheadタグ内に記載します。

「h」タグは見出しを作成する際に使用します。

<h1>が大見出しで1番大きく、サイトのメインとなる見出しに使われます。<h2>〜<h6>となるにつれ、小さな見出しになっていきます。

「p」タグはテキストの段落を作成する際に使用します。

pタグで囲ったテキストには改行が生まれます、意図的に改行をしたい場合は「br」を使用して改行をすることが多いです。

<p>テキスト</p>
<p>テキスト<br>ここで改行</p>

「a」タグはリンクをページに埋め込む際に使用します。

aタグは「href」属性でリンク先を指定します。
また「target」属性でリンク先を新規のウィンドウやタブで開くように指定します。

「ul」タグは順序のないリストを表示する際に使用します。（箇条書きのリスト）
type属性を指定することで、先頭の「・」を変更することができます。

「ol」タグは順序のあるリストを表示する際に使用します。（数字付きのリスト）
type属性を指定することで、先頭につく記号の種類を変更できます。

「li」タグはリストの各項目を記述する際に使用します。
ulタグもしくはolタグの入れ子として使用します。

<ul>
<li>ulリスト1</li>
<li>ulリスト2</li>
<li>ulリスト3</li>
<li>ulリスト4</li>
</ul>
<ol>
<li>olリスト1</li>
<li>olリスト2</li>
<li>olリスト3</li>
<li>olリスト4</li>
</ol>

「img」タグは画像やイメージを表示する際に使用します。

src属性は必須の属性でファイル名(表示させたい画像やイメージ)を指定します。
alt属性はページ上で画像が表示されなかった際に表示されるテキストです。必須ではありませんが設定するようにしましょう。

「table」タグは、表を作成する際に使用します。
tableタグ内にtrタグ、thタグ、tdタグと併せて使用してテーブルを作成します。

「tr」は表なかの行を作成する際に使用します。
trタグをの分だけ、行の数が追加されていきます。

「th」タグは表の中の見出しのセルとして使用します。

「td」タグは表の中のテキストとして使用します。

「div」は要素を任意のグループに分けるときに使用します。
CSSを使用する際の目印となるように使用されることが多いです。

「span」タグは「div」タグと同様に要素を任意のグループに分けるときに使用します。
しかし、「div」タグとは異なり改行されずに横並びで表示されます。

「header」タグは、サイトのヘッダー部分を構造化する際に使用します。
（わかりやすくするための目印）
「title」タグなどを内部に入れることが多いです。

<header>
ヘッダー情報
</header>

「main」タグは、サイトの重要な部分を構造化する際に使用します。
mainタグの中にはサイトの主要なコンテンツを入れます。

「footer」タグは、サイトの最後の部分を示す際に使用します。
ページの末尾にサイトに関する情報や、著作権などの情報を入れます。

<footer>
フッター情報
</footer>

タグではありませんが、HTMLを記載する際にHTML文章をわかりやすくするため、コメントを残すことが多いです。その際に使用されるのが「コメントアウト文」です。

コメントアウト分は「<!–」と「–>」で囲まれた部分は画面上には表示されません。
そのため、のちにHTMLが見やすくなるようにコメントを活用しましょう。

<p>コメントアウト</p>
<!– 画面上に表示されない部分 –>