知ってると便利なHTMLタグ厳選13個（簡単な例文付き）

頻繁に使うタグを選びました

こんにちは、ホームページ制作のオイゾウです！
HTMLには様々なタグがありますが、それらを全部覚えるのはとても大変なことで、もしホームページを作る上で全くの白紙からHTML文書をコーディングしていく場合、やはりある程度全般的に知っておかなければなりません。
ですが最近はとても便利な時代になりました！
HTMLを全て自分で作らなくても、様々なサービスを利用することで必要な部分だけコーディングすれば、ちゃんとしたホームページやブログを作ることができてしまうんです。
そこで今回は、初心者の方にとって「これだけ覚えておけばとりあえずOK」なHTMLタグをピックアップし、その使い方を紹介していきます！

【1】div【かたまり（ブロック）】

ブロック要素の1つで、文字通りブロック（かたまり）の状態を定義する要素です。
div要素はこれ自体にどんなコンテンツであるかという意味を持たず、このかたまりにCSSでスタイル指定するときに便利なのでよく使われます。
ちなみにブロック要素とは、その前後で改行が入るものになり、逆にインライン要素と呼ばれるものは前後に改行が入りません。

例

[html]<div>しのだ屋のこだわり</div>
<div>素材の持つ素朴な味わいを最大限に引き出し、安心して食べて頂くために、地元で採れた無農薬の食材を厳選して使用しております。</div>[/html] このHTMLソースは、ブラウザでは以下のように表示されます。

【2】p【段落】

div同様にブロック要素であるpは、文章のひとまとまりを段落（paragraph）で示すために使います。

例

[html]<p>素材の持つ素朴な味わいを最大限に引き出し、安心して食べて頂くために、地元で採れた無農薬の食材を厳選して使用しております。</p>
<p>当店の芋まんじゅうは、上品な甘さとやさしい口溶けが自慢。緑茶や抹茶によく合います。12個入りで販売中、お取り寄せもできますので是非ご利用ください。</p>
<p>江戸時代から続く伝統は崩すことなく、今の時代に合ったテイストを取り入れて、温故知新の味を実現しました。</p>[/html] このHTMLソースは、ブラウザでは以下のように表示されます。

【3】span【かたまり（インライン）】

div要素同様に特に意味を持たないのがこのspan要素。
文章の一部をスタイル指定するときに使います。
インライン要素なので前後に改行が入りません。

例

[html]<p>素材の持つ<span style="color: red;">素朴な味わい</span>を最大限に引き出し、安心して食べて頂くために、地元で採れた無農薬の食材を厳選して使用しております。</p>[/html] 「素朴な味わい」という文字の色をred（赤）に指定しています。

こんな感じにもできます。

例

[html]<p>素材の持つ<span style="color: white; background-color: red;">素朴な味わい</span>を最大限に引き出し、安心して食べて頂くために、地元で採れた無農薬の食材を厳選して使用しております。</p>[/html] このHTMLソースは、ブラウザでは以下のように表示されます。

【4】h1, h2, h3, h4, h5, h6【見出し】

文章の見出し（heading）として使うブロック要素のタグ。
この見出しのレベルはh1〜h6まで6段階あり、h1が最も重要となります。

例

[html]<h3>しのだ屋のこだわり</h3>
<p>素材の持つ素朴な味わいを最大限に引き出し、安心して食べて頂くために、地元で採れた無農薬の食材を厳選して使用しております。</p>
<h3>贈り物にも喜ばれます</h3>
<p>当店の芋まんじゅうは、上品な甘さとやさしい口溶けが自慢。緑茶や抹茶によく合います。12個入りで販売中、お取り寄せもできますので是非ご利用ください。</p>
<h3>伝統と旬の融合</h3>
<p>江戸時代から続く伝統は崩すことなく、今の時代に合ったテイストを取り入れて、温故知新の味を実現しました。</p>[/html] このHTMLソースは、ブラウザでは以下のように表示されます。

※CSSでスタイル指定してあります。（見出し文の下の青い線）

【5】br【改行】

改行（break）します。
pやdivなどのブロック要素の中で、単に改行したいときに使います。

例

[html]<p>当店の芋まんじゅうは、上品な甘さとやさしい口溶けが自慢。<br>緑茶や抹茶によく合います。<br>12個入りで販売中、お取り寄せもできますので是非ご利用ください。</p>[/html] このHTMLソースは、ブラウザでは以下のように表示されます。

【6】hr【水平線】

コンテンツを区切るときなどに使う水平線（horizontal rule）。

例

[html]<h3>しのだ屋のこだわり</h3>
<p>素材の持つ素朴な味わいを最大限に引き出し、安心して食べて頂くために、地元で採れた無農薬の食材を厳選して使用しております。</p>
<hr>
<h3>贈り物にも喜ばれます</h3>
<p>当店の芋まんじゅうは、上品な甘さとやさしい口溶けが自慢。緑茶や抹茶によく合います。12個入りで販売中、お取り寄せもできますので是非ご利用ください。</p>
<hr>
<h3>伝統と旬の融合</h3>
<p>江戸時代から続く伝統は崩すことなく、今の時代に合ったテイストを取り入れて、温故知新の味を実現しました。</p>[/html] このHTMLソースは、ブラウザでは以下のように表示されます。

【7】blockquote【引用】

引用文ということを示すためのタグ。

例

[html]<h3>伝統と旬の融合</h3>
<p>江戸時代から続く伝統は崩すことなく、今の時代に合ったテイストを取り入れて、温故知新の味を実現しました。</p>
<blockquote><h4>温故知新とは？</h4>
<p>前に学んだことや昔の事柄をもう一度調べたり考えたりして、新たな道理や知識を見い出し自分のものとすること。古いものをたずね求めて新しい事柄を知る意から。▽「温」はたずね求める意。一説に、冷たいものをあたため直し味わう意とも。「故ふるきを温たずねて新あたらしきを知しる」または「故ふるきを温あたためて新あたらしきを知しる」と訓読する。</p>
<p>引用：goo辞書</p></blockquote>[/html] このHTMLソースは、ブラウザでは以下のように表示されます。

※CSSでスタイル指定してあります。

【8】a【アンカー（リンク）】

アンカー（anchor）タグと言って、リンク先を指定するときに使います。
他にもページ内の指定した場所に移動したり、電話やメールを起動するときもこのアンカータグで行ないます。

例

[html]<p>しのだ屋は創業82年です。さつま芋を使った和菓子や和風の食器、小物などのお土産を販売しています。<a href="https://oizo.jp/sample/osusume.html">芋まんじゅうのお取り寄せ</a>も可能です。川越に来た際には是非立ち寄ってください。</p>
[/html] 「href」でリンク先の指定ができます。
[html]<a href="https://oizo.jp/sample/osusume.html">芋まんじゅうのお取り寄せ</a>[/html] このように、hrefに指定したURLの前後を「"」（ダブルクォーテーション）で囲みます。
このHTMLソースは、ブラウザでは以下のように表示されます。

応用1：画像にリンクを設定

文字にリンクを設定することと比較しても特に難しいことがあるわけではなく、画像タグの前後をaタグで囲むだけです。

例

[html]<a href="https://oizo.jp/sample/osusume.html"><img src="https://oizo.jp/sample/images/manju.jpg"></a>[/html] このHTMLソースは、ブラウザでは以下のように表示されます。

応用2：ターゲットを指定

通常アンカータグではリンク先のページにジャンプしますが、「target="_blank"」とすることにより新しいページで表示させることができます。
一般的には外部サイトにリンクを飛ばす際に使用することが多いです。

例

[html]<a href="https://oizo.jp/sample/osusume.html" target="_blank"><img src="https://oizo.jp/sample/images/manju.jpg" /></a>[/html] このHTMLソースは、ブラウザでは以下のように表示されます。

応用3：ページ内の別の場所に移動

例

[html]<p>アンカータグについてある程度理解することはできましたでしょうか？　もしよく分からなければもう一度<a href="#hajime">アンカータグの説明の最初</a>から読んでみてください！</p>
[/html] まず、hrefに#から始まる任意の文字列（英数字）を指定します。
そしてリンク先の場所（この場合はこのページ内のaタグを説明している最初の部分）に、以下のように指定します。
[html]<h2 id="hajime">a</h2>[/html] idという属性を用意し、先ほどの「hajime」を指定します。

【9】img【イメージ（画像）】

イメージ（image）、つまり画像を表示させるタグです。
説明の前に何度か概出だとは思いますが、表示させたい画像のURLをimgタグ内の「src」という属性に指定することで、画像を表示することができます。
URLの前後は「"」（ダブルクォーテーション）で囲みます。

例

[html]<img src="https://oizo.jp/sample/images/manju.jpg">[/html] このHTMLソースは、ブラウザでは以下のように表示されます。

応用：画像の説明を入れる

「alt」という属性を指定することで、その画像がもし表示されなかったり、読み込みに時間がかかったりする場合に、代わりにその画像を説明する文章を表示させることができます。
またこのalt属性はGoogleで画像検索する際にも参考にされますし、その画像にリンクを貼る場合はSEO的により良い評価となりますので、是非このalt属性をページ内の画像に指定することをおすすめします！

例

[html]<img src="https://oizo.jp/sample/images/manju.jpg" alt="しのだ屋のおすすめ芋まんじゅう">[/html] このHTMLソースは、ブラウザでは以下のように表示されます。

↑画像の上にカーソルを合わせると文字が出てきます。（ブラウザの設定により文字が出ない場合もあります）

【10】ul, li【箇条書きリスト】

箇条書きリストを作るためのタグです。

例

[html]<ul>
<li>しのだ屋のこだわり</li>
<li>贈り物にも喜ばれます</li>
<li>伝統と旬の融合</li>
</ul>[/html] このHTMLソースは、ブラウザでは以下のように表示されます。

【11】ol, li【番号付きリスト】

ulのような箇条書きリストと違い、こちらは番号が先頭に付いたリストになります。

例

[html]<ol>
<li>しのだ屋のこだわり</li>
<li>贈り物にも喜ばれます</li>
<li>伝統と旬の融合</li>
</ol>[/html] このHTMLソースは、ブラウザでは以下のように表示されます。

応用1：開始番号を指定

通常このol要素は1から順番に昇順で続きますが、「start」という属性を指定することで、違う数字から始めることもできます。

例

[html]<ol start="7">
<li>しのだ屋のこだわり</li>
<li>贈り物にも喜ばれます</li>
<li>伝統と旬の融合</li>
</ol>[/html] このHTMLソースは、ブラウザでは以下のように表示されます。

応用2：番号を降順にする

olに「reversed」という属性を指定することで、番号を逆順にすることができます。
その場合、前述のstart属性も併せて指定します。

例

[html]<ol reversed="reversed" start="7">
<li>しのだ屋のこだわり</li>
<li>贈り物にも喜ばれます</li>
<li>伝統と旬の融合</li>
</ol>[/html] このHTMLソースは、ブラウザでは以下のように表示されます。

【12】dl, dt, dd【定義型リスト】

定義型リスト（definition list）と呼ばれる要素で、dlとdtとddはセットで使用します。
定義する用語をdt（definition term）に、その用語の意味を詳しく説明した文章をdd（definition description）に記述します。
様々な状況でこの定義型リストは使うことができます。

例1：Q&A

[html]<dl>
<dt>送料はいくらですか？</dt>
<dd>地域によって変わります。1万円以上で送料無料になります。</dd>
<dt>お届け日の指定はできますか？</dt>
<dd>可能です。最短で注文日より3日目以降よりご指定できます。</dd>
<dt>返品したいのですが。</dt>
<dd>万が一商品に不具合がありましたら対応させて頂きますので、着払いにてご返送ください。</dd>
</dl>[/html] このHTMLソースは、ブラウザでは以下のように表示されます。

例2：お知らせ

[html]<dl>
<dt>5月14日</dt>
<dd>限定の芋まんじゅう再入荷しました！</dd>
<dt>5月12日</dt>
<dd>川越市内に2店舗目がオープンしました！</dd>
<dt>5月9日</dt>
<dd>抽選で当たるキャンペーン開催中！</dd>
</dl>[/html] このHTMLソースは、ブラウザでは以下のように表示されます。

例3：画像とその説明

[html]<dl>
<dt><img src="https://oizo.jp/sample/images/manju.jpg" alt="芋まんじゅう"></dt>
<dd>芋まんじゅう</dd>
<dd>ほんのり甘さが人気の秘密。</dd>
<dt><img src="https://oizo.jp/sample/images/yokan.jpg" alt="芋ようかん"></dt>
<dd>芋ようかん</dd>
<dd>しっかりとした芋の風味がお茶によく合います。</dd>
<dt><img src="https://oizo.jp/sample/images/soft.jpg" alt="芋ソフト"></dt>
<dd>芋ソフト</dd>
<dd>新商品、芋が入ったソフトクリーム。</dd>
</dl>[/html] このHTMLソースは、ブラウザでは以下のように表示されます。

【13】table, tr, th, td【テーブル（表）】

表、つまりテーブル（table）のタグです。
tableはテーブル要素であることを示し、trは表の行、thは表の見出し用セル、tdは表のセルになります。

例1：3行×4列の表の場合（見出しあり）

[html]<table>
<tr>
<th>見出しセル1</th>
<th>見出しセル2</th>
<th>見出しセル3</th>
<th>見出しセル4</th>
</tr>
<tr>
<td>2行目のセル1</td>
<td>2行目のセル2</td>
<td>2行目のセル3</td>
<td>2行目のセル4</td>
</tr>
<tr>
<td>3行目のセル1</td>
<td>3行目のセル2</td>
<td>3行目のセル3</td>
<td>3行目のセル4</td>
</tr>
</table>[/html] このHTMLソースは、ブラウザでは以下のように表示されます。

例2：5行×2列の表の場合（見出しなし）

[html]<table>
<tr>
<td>1行目のセル1</td>
<td>1行目のセル2</td>
</tr>
<tr>
<td>2行目のセル1</td>
<td>2行目のセル2</td>
</tr>
<tr>
<td>3行目のセル1</td>
<td>3行目のセル2</td>
</tr>
<tr>
<td>4行目のセル1</td>
<td>4行目のセル2</td>
</tr>
<tr>
<td>5行目のセル1</td>
<td>5行目のセル2</td>
</tr>
</table>[/html] このHTMLソースは、ブラウザでは以下のように表示されます。

【番外編】【コメント】

<!― ◯◯◯◯◯◯◯◯ ―>←この◯部分にコメントを入れます。
ブラウザに表示させずに、HTMLソースに指示や注釈などを入れたいときに使います。
複数人でソースを編集する場合や、後になってご自身で内容を把握できるようにしたいときにとても便利です。

例

[html]<!― これは見出しです ―>
<h3>しのだ屋のこだわり</h3>
<!― これは本文です ―>
<p>素材の持つ素朴な味わいを最大限に引き出し、安心して食べて頂くために、地元で採れた無農薬の食材を厳選して使用しております。</p>[/html] このHTMLソースは、ブラウザでは以下のように表示されます。

いかがでしたでしょうか？
ホームページ作成ソフトを使ったり、WordPressなどCMS（コンテンツマネジメントシステム）で構築したり、または様々な有料（無料含む）ホームページ作成サービスを利用する上では、必ずしもHTMLに関して全てを知っている必要はありません。
ただいずれのサービスを利用するにしても、ある程度の知識があるのとないのとでは出来上がりにかなりの差が出ます。
そういった意味で今回紹介したHTMLのタグをしっかり押さえておけば、ホームページを作る上でかなり強い武器になると思いますので、是非これらのタグを使える様になりましょう！