「HTML」よく使われる基本的なタグの意味と使い方を紹介します。

TOP
コラム
「HTML」よく使われる基本的なタグ

はじめに

HTMLを勉強し始めた時は、タグの意味や使い方などについて迷うことが多いでしょう。当記事ではHTML初心者の方に向けて、使用頻度の高い基本的なタグや意味についてご紹介いたします。

<head>

「head」タグはサイトについての情報を記述する場所です。
CSSファイルやJavaScriptの読み込み、「meta description」や「meta keyword」など重要な記載を行う場所でもあります。
「title」以外はユーザーからは見えません。

<title>

ページのタイトルに使われるタグです。タイトルとはタブに表示される部分のことを指します。
SEO（検索エンジン最適化）においても非常に重要ですので必ず入力するようにしましょう。

<body>

サイトの中身を記述する場所です。ユーザーに見せたい部分をすべてこのタグの中に記述します。

<header>

「header」はサイトの導入部分を意味するタグです。
本で例えるなら「前書き」の部分です。
基本的な使い方としては、サイト名を入れたり、ナビゲーションメニューを表示させたりといった使い方でしょうか。

<footer>

「footer」はそのサイトに関する関連情報や誰が書いたかなどを表示するエリアです。©Copyright～などの記述をする部分もfooterが一般的です。

<main>

「main」はその名の通り、サイトの最も主張したいコンテンツです。
「body」の中に書きますが「header」、「footer」の中には「main」は使えません。

h1、h2、h3、h4～....

見出しタグです。
本で例えるならば、「h1」は本の表紙、「h2」は各章のタイトル、「h3」は各章の中の見出し、と考えていただければけっこうです。
HTML超初心者にありがちなこととしては、ここの文字を大きく太字にしたい、といった理由で見出しタグを使ってしまうことがあります。
が、こうした使い方は間違いですので、文字サイズはキチンとCSSで変更するようにしましょう。

<p>

「p」は段落を示すタグです。pとはParagraphの頭文字です。
「<p>pで囲まれた文章がひとつのまとまりとして認識されます。</p>」
「p」は閉じタグの時点で改行を行いますが、基本的に改行のために「p」を閉じるのは間違いで、通常の改行であれば「br」で十分です。
「ここからここまでがまとまった文章である」ということを読み手に理解してもらえるような使い方をしましょう。

<ul>、<ol>、<li>

「ul/ol」と「li」は箇条書きを意味するタグです。
「ul/ol」は箇条書きを始める場所に書き、中に「li」で実際の内容を記述していきます。
「ul」と「ol」の違いですが、「ol」は箇条書きした内容の横に数字がつくようになります。

<ol>
<li>あ</li>
<li>い</li>
<li>う</li>
</ol>

1. あ
2. い
3. う

なお箇条書きと説明しましたが、実際にはナビゲーションメニューなど、「ul」で書いたものをCSSで横並びにすることも多いです。

<div>

「div」はこれのみでは何か意味のあるものではありませんが、「div」で囲った部分をブロック要素として扱います。
ブロック要素と言われても初心者の方はわかりにくいと思いますので簡単に説明すると、「div」で囲った部分はひとかたまりとして扱う、と思っていただければけっこうです。
「div」だけではあまり意味がないので基本的にはクラス名をつけて使用します。
CSSでレイアウトを変更する際、「div」がなければ記述がとても煩雑になるでしょう。

<div class="contents">
    <h1>こんにちは</h1>
    <p>はじめまして</p>
</div>

contentsというクラス名のひとつのグループができました。

<img>

「img」は画像を表示するタグです。
なお閉じタグは不要です。
基本的な書き方としては「<img src="画像へのパス">」のように記述します。
画像の表示はHTML初心者がつまづきがちなポイントですので、画像が表示されないと思ったときは、タグの中身に誤字脱字がないか、パスが間違っていないかを確認してみましょう。

<a>

「a」はリンクをつけたい時に使用します。こちらは閉じタグが必要です。
基本的な書き方としては「<a href="リンク先の指定">リンク</a>」のように、文字などを「<a></a>」で囲って使用します。

最後に

以上が、HTMLでよく使用される基本的なタグについての紹介となります。HTMLは実は頻繁に使うタグの種類は案外少なく、骨組みを終えた後、CSSでレイアウトを調整していく方がはるかに時間がかかります。
無理に丸覚えしようとするのではなく、基本的なHTMLタグはすぐに覚えるので、とにかくたくさん書いて身に着けましょう。