【初心者向け】WEBライティングに便利なHTMLタグ25個！

この記事では、HTMLタグをまとめて紹介しています。記事執筆やコーディングで困った際は、ぜひ参考にしてみてください。

h2〜h6タグ

見出しに使うタグです。

HTML
<h2>ブログ記事の書き方</h2>
<h3>その1.わかりやすく書く</h3>
<p>読者が理解しやすいよう、わかりやすく書きましょう。</p>

ブラウザ
ブログ記事の書き方

その1.わかりやすく書く
読者が理解しやすいよう、わかりやすく書きましょう。

Pタグ

段落を作ることができるタグです。

HTML
<p>これは段落です。</p>
<p>これも段落です。</p>

ブラウザ
これは段落です。

これも段落です。

brタグ

改行を行えるタグです。

HTML
<p>ここで<br>
改行します。</p>

ブラウザ
ここで
改行します。

aタグ

リンクを貼る際に使うタグです。

HTML
<p>このサイトの
<a href="https://mooohblog.com/">トップページへ</a>
戻ります。</p>

ブラウザ
このサイトのトップページへ戻ります。

spanタグ

テキストの一部を指定する際に使うタグです。

HTML
<p>重要箇所は、<span>赤色</span>で。</p>

ブラウザ
重要箇所は、赤色で。

※分かりやすいよう色を付けています。

一部の色を変える、太字にする、下線を引く時など、は非常によく使います。

divタグ

テキストのまとまりを指定するタグです。

HTML
<div>
<h2>ここは見出し</h2>
<p>ここは本文です。</p>
</div>
<p>ここは違います。</p>

ブラウザ

ここは見出し ここは本文です。

ここは違います。

※分かりやすいよう色を付けています。

<div>も非常によく使います。

bタグ

テキストを太字にするタグです。

HTML
<p>ここを<b>太字</b>にします。</p>

ブラウザ
ここを太字にします。

その他の強調

＋font-weight:bold;でも同じことができます。

〜でも同じことができます。

iタグ

テキストを斜体にするタグです。

HTML
<p>ここを<i>斜体</i>にします。</p>

ブラウザ
ここを 斜体 にします。

uタグ

テキストに下線を引けるタグです。

HTML
<p>
<u>テキストに下線を引きます。</u>
</p>

ブラウザ
テキストに下線を引きます

sタグ

テキストに打ち消し線を挿入するタグです。

HTML
<p><s>ここを打ち消し</s></p>

ブラウザ
ここを打ち消し

bigタグ

テキストを大きくするタグです。

HTML
<p>ここを<big>大きく</big>します。</p>

ブラウザ
ここを大きくします。

smallタグ

テキストを小さくするタグです。

HTML
<p>ここを<small>小さく</small>します。</p>

ブラウザ
ここを小さくします。

hrタグ

分割線を引くタグです。

HTML
<p>そして夜はふけていった…</p>
<hr>
<p>翌日の朝ー</p>

ブラウザ
そして夜はふけていった…

翌日の朝ー

subタグ

文字を下付きにできるタグです。

HTML
<p>『ロミオとジュリエット<sub>（1595年）</sub>』</p>

ブラウザ
『ロミオとジュリエット_{（1595年）}』

supタグ

文字を上付きにできるタグです。

HTML
<p>『ロミオとジュリエット<sup>（1595年）</sup>』</p>

ブラウザ
『ロミオとジュリエット^{（1595年）}』

rubyタグ

テキストにルビをふることができるタグです。

HTML
<ruby>
<rb>東京都
<rt>とうきょうと
</ruby>

ブラウザ
東京都とうきょうと

ルビをふりたい箇所を、「ruby」「/ruby」で囲みます。

ルビをふりたい語句を「rb（ruby baseの略）」で記述します。閉じタグは入りません。

ルビになるテキストを「rt（ruby textの略）」で記述します。閉じタグは入りません。

rt先に書いた方がわかりやすいのでは？と思うかもしれませんが、rb→rtでないと上手く表示できませんので、順番には注意しましょう。

dfnタグ

定義語として示す際に使うタグです。

HTML
<p>
これを<dfn>本能寺の変</dfn>と言います。
</p>

ブラウザ
これを本能寺の変と言います。

iframeタグ

ページ内に独立したフレームを表示させるタグです。

HTML
<iframe src="https://www.youtube.com/embed/TCMnrssX1NE"></iframe>

「src」を記述して、YouTubeの動画を引用する際などに使用しますね。

imgタグ

画像を表示するタグです。
閉じタグはいりません。

HTML
<img src="https://〇〇.com/wp-content/uploads/image.png" alt="HTMLのエスケープ処理">

tableタグ

表を挿入するタグです。

HTML
<table>
<tr><th>名称</th><th>地方</th><th>庁所在地</th></tr>
<tr><td>東京都</td><td>関東地方</td><td>新宿区</td></tr>
<tr><td>大阪府</td><td>近畿地方</td><td>大阪市</td></tr>
<tr><td>京都府</td><td>近畿地方</td><td>京都市</td></tr>
</table>

名称	地方	庁所在地
東京都	関東地方	新宿区
大阪府	近畿地方	大阪市
京都府	近畿地方	京都市

blockquoteとciteタグ

引用箇所に使うタグです。

blockquote・・・引用テキストを記述します。
cite・・・引用してきたサイト名を記述します。リンクとして記述するのが良いでしょう。

HTML
<blockquote>
引用（いんよう、英語：citation, quotation）とは、
広義には、自己のオリジナル作品のなかで他人の著作を副次的に紹介する行為、
先人の芸術作品やその要素を副次的に自己の作品に取り入れること。
<cite>Wikipedia</cite>
</blockquote>

引用（いんよう、英語：citation, quotation）とは、
広義には、自己のオリジナル作品のなかで他人の著作を副次的に紹介する行為、
先人の芸術作品やその要素を副次的に自己の作品に取り入れること。Wikipedia

codeタグ

ソースコードであることを示すタグです。

HTML
<p>
<code>段落は&lt;p&gt;&lt;/p&gt;</code>と記述します。
</p>

段落は本文と記述します。

ソースコードを記述するには、エスケープ処理という特殊な書き方が必要になります。

preタグ

スペースや改行をそのまま表示したい時に使うタグです。

HTML
<pre>
<code>
&lt;h2&gt;不思議の国のアリス&lt;/h2&gt;
&lt;p&gt;
不思議の国のアリスの冒険は、
英国の数学者で作家のチャールズ・ルートウィッジ・ドジソン牧師による児童文学の作品で、
ルイス・キャロルという仮名で書かれています。
&lt;/p&gt;
</code>
</pre>

ブラウザ
<h2>不思議の国のアリス</h2>
<p>
不思議の国のアリスの冒険は、
英国の数学者で作家のチャールズ・ルートウィッジ・ドジソン牧師による児童文学の作品で、
ルイス・キャロルという仮名で書かれています。
</p>

主に長いソースコードを記事に含ませる時に使いますね。「pre」と「code」は一緒に使うというイメージでも良いかもしれません。

ulとliタグ

箇条書きのタグです。
リストのタグを使う場合は、「li」を括るタグも記述します。

HTML
<ul>
<li>東京都</li>
<li>大阪府</li>
<li>京都府</li>
</ul>

ブラウザ
・東京都
・大阪府
・京都府

olタグ

数字のついた箇条書きのタグです。

HTML
<ol>
<li>東京都</li>
<li>大阪府</li>
<li>京都府</li>
</ol>

ブラウザ
1.東京都
2.大阪府
3.京都府

dlタグ

用語とその説明をまとめた定義リストを作成するタグです。

HTML
<dl>
<dt>東京都</dt>
<dd>日本の首都。都庁所在地は新宿区。</dd>
<dt>大阪府</dt>
<dd>近畿地方の街。府庁所在地は大阪市。</dd>
<dt>京都府</dt>
<dd>近畿地方の街。府庁所在地は京都市。</dd>
</dl>

ブラウザ
東京都
日本の首都。都庁所在地は新宿区。
大阪府
近畿地方の街。府庁所在地は大阪市。
京都府
近畿地方の街。府庁所在地は京都市。

コメントアウト

ソースコードの中にコメントを残す際に使うタグです。
このコメントは、ブラウザ上でのページに表示されることはありません。

HTML
<!--ホラー映画-->
<h2>本当に怖いホラー映画8選！</h2>
<p>最強に怖い映画を厳選！…</p>

ブラウザ
本当に怖いホラー映画8選！
最強に怖い映画を厳選！…

ランキング系など、項目がたくさんある記事を執筆する際に、「ここからは〇〇」とコメントを残しておくとわかりやすいです。