[初心者向け]ブログ記事の作成でよく使用するHTMLタグまとめ[具体例つき]

2024.02.24
ブログ記事作成時によく使用するHTMLタグまとめ[具体例つき]

ブログ記事の作成時に使用するHTMLタグをまとめました。

よく使用するものから、少しマニアックなものまで使い方の具体例付きで解説していきます。

また、HTMLタグの語源も記載しています（例えばpタグの語源はParagraph（段落））。
これを知ることで、HTMLタグをただの記号ではなく意味を持ったものとして捉えることができることでしょう。

※使い所がイメージしづらいタグは使用例のコードの表示結果を載せています

それでは、よく使用するHTMLタグを順に解説していきます。

h1~h6：見出しのタグ

語源
英語：HTML Section Heading
日本語：HTMLの見出し
概要
見出しを定義するタグです。h1 が最上位で、h6 が最下位です。
h1 タグは1つのページにつき1つのみ使用しましょう。また見出しレベルを飛ばさないようにしましょう。
使用例
使用例1：正しい使用例
<h1>ホームページ作成</h1>
    <h2>HTML</h2>
        <h3>タグ</h3>
        <h3>属性</h3>
    <h2>CSS</h2>
        <h3>セレクタ</h3>
        <h3>プロパティ</h3>
使用例2：悪い使用例（見出しレベルを飛ばしている）
<h1>ホームページ作成</h1>
    <h3>タグ</h3>
        <h4>見出しタグ</h4>

p：段落のタグ

語源
英語：Paragraph
日本語：段落
概要
囲った部分を段落として扱うタグです。
使用例
<p>ブログ記事を書いていると書くネタが尽きます。だから毎日インプットが必要です。</p>

<p>しかし、最近はあまり読書できていません。ここ二週間は仕事が忙しく時間が作れないでいます。</p>

ul / ol / li：箇条書きのタグ

ul

語源
英語：Unordered List
日本語：順序なしリスト
概要
順序なしの箇条書きを表示する時に使用するタグです。
行頭はCSS の list-style-type プロパティを用いて変更することが可能で、四角や画像にすることができます。

ol

語源
英語：Ordered List
日本語：順序付きリスト
概要
順序付きの箇条書きを表示する時に使用するタグです。
行頭はCSSのlist-style-type プロパティを用いて変更することが可能で、英字やローマ数字に変更できます。
以下の属性を使用できます。
start
リストの開始番号を指定できます

li

語源
英語：List Item
日本語：リスト項目
概要
リストの項目を表すために用います。
順序付きリスト (ol)、順序なしリスト (ul)、メニュー (menu) のいずれかの子要素として配置する必要があります。
使用例
使用例1：ul（行頭の指定なし）
<ul>
    <li>Twitter</li>
    <li>Youtube</li>
    <li>Tiktok</li>
</ul>
使用例2：ul（行頭が黒四角）
<ul style="list-style-type: square">
    <li>高い耐久性</li>
    <li>防水機能</li>
    <li>エコフレンドリー</li>
</ul>
使用例3：ul（行頭が画像）
<ul style="list-style: url(../img/***.png);">
    <li>アートブック</li>
    <li>スチールポスター</li>
    <li>DLCコード</li>
</ul>
使用例4：ol（行頭の指定なし）
<ol>
    <li>沸騰したお湯を入れます</li>
    <li>3分待ちます</li>
    <li>湯切りします</li>
</ol>
使用例5：ol（行頭が3から始まる）
<ol start=3>
    <li>バース</li>
    <li>掛布</li>
    <li>岡田</li>
</ol>
使用例6：ol（行頭が小文字のローマ数字）
<ol style="list-style:lower-roman">
    <li>序論</li>
    <li>研究方法</li>
    <li>結果と議論</li>
</ol>
使用例7：ol（行頭が英大文字）
<ol style="list-style:upper-alpha">
    <li>ゼニガメ</li>
    <li>フシギダネ</li>
    <li>ヒトカゲ</li>
</ol>

a：リンクのタグ

語源
英語：Anchor
日本語：アンカー（錨）
概要
リンクを作成するタグです。リンク先には別のウェブページ、ファイル、メールアドレス、同一ページ内の場所、または他の URL を指定できます。
使用例
<ul>
    <li><a href="https://example.com">Webページ</a></li>
    <li><a href="mailto:example@example.com">Eメール</a></li>
    <li><a href="tel:+123456789">電話番号</a></li>
</ul>

br：改行のタグ

語源
英語：Line Break
日本語：改行
概要
文中で改行する時に使用するタグです。
補足
文章中の改行ではbrタグを使用すること。（pタグを連続で使用することでも改行できますが、pタグは1文章を囲むためのタグなので、改行の用途として使用するのは不適切です。）
段落間の間隔を広げるために連続したbrタグがは使用しないこと。代わりにmarginのようなCSSプロパティを使用する。
使用例
<p>名前：映画太郎<br>
趣味：映画鑑賞<br>
年齢：３０歳</p>

img：画像表示のタグ

語源
英語：Image Embed
日本語：画像埋め込み
概要
画像を表示する時に使用するタグです。
src 属性には画像へのパスを入れます。
alt 属性には画像の説明文を入れます。
使用例
<p>
    <img src="sample.png" alt="サンプルの画像" />
</p>

b / strong：テキスト強調のタグ

b

語源
英語：Bring Attention To
日本語：注目付け
概要
特に重要なテキストではないが、読み手の注意を引きたい時に使用するタグです。
補足
テキストを太字にしたいからという理由でbタグを使用することは推奨されていません。太字の文字列を作成するには、 CSS の font-weight プロパティを使用することが推奨されています。

strong

語源
英語：Strong Importance
日本語：強い重要性
概要
内容が重要なテキストに使用するタグです。
使用例
使用例1：内容が重要なテキストにはstrongタグを使用する
<p>重大発表：<strong>大谷がメジャーリーグに挑戦</strong>。</p>
使用例2：内容が重要ではないが注目してほしいテキストにはbタグを使用する
<p>チケット残り<b>3枚</b></p>

blockquote / q / cite：引用のタグ

blockquote

語源
英語：Block Quotation
日本語：ブロック引用
概要
引用文を囲むタグです。引用元の URL は cite 属性により与えることができます。

q

語源
英語：Inline Quotation
日本語：インライン引用
概要
1行程度の短文の引用文を囲むタグです。引用文が長い時は、blockquoteタグを使用してください。

cite

語源
英語：Citation
日本語：引用元
概要
引用された創作物の引用元に使用するタグです。
使用例
使用例1：引用文が長い時はblockquoteタグを使用する
<blockquote cite="https://developer.mozilla.org/ja/docs/Web/HTML/Element" >
    このページでは、すべての HTML要素を一覧表示しています。これらはタグを使用して作成されます。
    この一覧は、考えているものを見つけやすいように、機能別にグループ化しています。アルファベット順のすべての要素の一覧は、このページと同様に各要素ページのサイドバーにあります。 
</blockquote>

表示結果↓

このページでは、すべての HTML要素を一覧表示しています。これらはタグを使用して作成されます。 この一覧は、考えているものを見つけやすいように、機能別にグループ化しています。アルファベット順のすべての要素の一覧は、このページと同様に各要素ページのサイドバーにあります。
使用例2：引用文が1行程度の時はqタグを使用する
<q cite="https://developer.mozilla.org/ja/docs/Web/HTML/Element/q" >中に含まれるテキストが短いインラインの引用であることを示します。</q>

表示結果↓

中に含まれるテキストが短いインラインの引用であることを示します。
使用例3:引用元と引用文でblockquoteタグとciteタグを使用する
<blockquote>
    cite は HTML の要素で、引用された創作物のタイトルをマークアップするために使用します。

    この参照は、引用メタデータに関する利用場面に合わせた慣習に応じて省略形が用いられることがあります。
</blockquote>
<cite>引用元：MDN Web Docs</cite>

表示結果↓

cite は HTML の要素で、引用された創作物のタイトルをマークアップするために使用します。
この参照は、引用メタデータに関する利用場面に合わせた慣習に応じて省略形が用いられることがあります。
引用元：MDN Web Docs

details / summary：開閉式ウィジェットのタグ

details

語源
英語：Details disclosure
日本語：詳細折りたたみ
概要
ユーザーが開閉可能なウィジェットを作成するタグです。概要やラベルは summary タグで囲む必要があります。

summary

語源
英語：Disclosure Summary
日本語：概要明示
概要
details 要素の概要を表すタグです。 summary 要素をクリックすると、親の details 要素の開閉状態を切り替えれます。
使用例
<details>
    <summary>detailsタグの詳細について</summary>
    summryタグを省くと、概要に「詳細」とのみ表示される。
</details>

表示結果↓

detailsタグの詳細について summryタグを省くと、概要に「詳細」とのみ表示される。

pre：スペース、改行をそのまま表示するタグ

語源
英語：Preformatted Text
日本語：整形済みテキスト
概要
スペースや改行を含むテキストをそのまま表示する時に使用するタグです。
使用例
<pre>
    v   v
     v v
      v
</pre>

表示結果↓

    v   v
     v v
      v

code：プログラムコードを表すタグ

語源
英語：Inline Code
日本語：インラインコード
概要
プログラムのコードを示すためのタグです。単一のフレーズや1行のみを表す時に使用します。
複数行のコードを表す時は、 code 要素を pre 要素の中に入れてください。
使用例：複数行のCSSコードをHTML文書にマークアップするためにpreタグとcodeタグを使用する
<pre>
    <code>
        #main {
            margin-bottom: 10px;
            text-align: left;
        }
    </code>
</pre>

表示結果↓

    
        #main {
            margin-bottom: 10px;
            text-align: left;
        }

s / del / ins：文書の修正や削除のタグ

s

語源
英語：Strikethrough
日本語：取り消し
概要
すでに適切または正確ではなくなった内容や、無関係な内容に対して使用するタグです。

del

語源
英語：Deleted Text
日本語：削除済みテキスト
概要
削除された文字列を表す時に使用するタグです。

ins

語源
英語：Inserted Text
日本語：挿入文字列(MDNに載っていないなかったので本記事の筆者が和訳しました)
概要
追加した文書を表す時に使用するタグです。
補足
s タグと del タグの違い
sタグはすでに適切・正確ではなくなった内容や、もはや関連しない内容を表します。
対してdelタグは文書の編集で使います。
文書を削除して追記することを表したい時は、del タグと ins タグを使用します。
（僕の理解では、s タグは内容の更新に使い、del タグと ins タグは内容の修正・削除に使用するという理解です。。理解できているか自信ない）
使用例
使用例1：値段変更の時に s タグを使用する
<p><s>￥100,000</s>→<br />
    ￥90,000</p>

表示結果↓

￥100,000→
￥90,000

使用例2：開催日の変更に s タグを使用する
<p><s>開催日：9月9日</s><br />
    開催日：10月10日</p>

表示結果↓

開催日：9月9日
開催日：10月10日

使用例3：TODOリストの削除にdelタグを使用する
<ul>
    <li>タスクA</li>
    <li><del>タスクB</del></li>
</ul>

表示結果↓

  • タスクA
  • タスクB
使用例4：文書の修正にはdel タグと ins タグを使用する
<p>当社の2023年度の売上予測は、初期の見積もりでは<del>350万ドル</del><ins>400万ドル</ins>に達すると予測されています。</p>

表示結果↓

当社の2023年度の売上予測は、初期の見積もりでは350万ドル400万ドルに達すると予測されています。

参考記事

初心者ブロガーが知っておくと便利なHTMLタグ20 選
ブログって誰でも簡単に始められるイメージがありますが、その操作感やレイアウトにストレスを感じている方もいらっしゃるのではないでしょうか？ ブログに動画をアップしたけど表示画面が小さいここの文字は普通でいいのに上段の文字レイアウトが引き継がれ...
blog.codecamp.jp
ブログ記事作成におけるタグとは？HTMLタグについても解説 | 株式会社UP SPICE
ブログにおける「タグ」は2種類ある ブログ記事を作成する際に使用する「タグ」とは2種類あります。 1つが各記事
www.grooo.co.jp
HTML 要素リファレンス - HTML: ハイパーテキストマークアップ言語 | MDN
このページでは、すべての HTML 要素を一覧表示しています。これらはタグを使用して作成されます。
developer.mozilla.org
HTMLタグの正式名称 - Qiita
なぜ書こうと思ったかHTMLのタグって語源は何だろうとふと思い調べたのですが、すでに色々な方が調べていました。なのでやめようかと思ったのですが、せっかくなので調べる事にしました。まず、HTML…
qiita.com
sタグ：既に適切ではなくなった文字列を表す | HTMLリファレンス
HTMLのsタグは、すでに適切・正確ではなくなった内容や、もはや関連しない内容を表します。
catnose.me
delタグ：削除されたテキストを表す | HTMLリファレンス
HTMLのdelタグは、文書から削除されたテキストを表します。insタグと合わせて使うことで変更や修正を表現できます。
catnose.me

コメント