Webマーケティング2021.03.31
ツイート目次
Webサイトを運用する場合、HTMLの基本的なタグを理解していることで、制作の担当者や制作会社とのコミュニケーションがスムーズになります。
また、CMSやブログを使って情報の発信を行う場合、ツールの機能のみでなく、HTMLタグを理解していれば、より柔軟な形式で情報発信を行うことが可能になります。
今回は、そんなときにWeb担当者なら知っておきたい基本的なHTMLタグと、そのタグの意味、使い方を紹介します。
HTMLタグの使い方と意味
HTMLタグの使い方
> <XX>この部分がこのタグで指定する範囲</XX>
HTMLタグは、開始タグと終了タグを用いて、表記します。（タグによっては終了タグが不要なものがあります。）さらに、タグに属性を追加することで、細かな指定を行えます。
HTMLタグの意味
HTMLのバージョンが5になって以降、HTMLはその文章の意味（セマンティック）を示すもの、見た目についてはCSSで指示するという流れになっています。
意味を示す目的でHTMLタグを使うことで、検索エンジンにページの情報をより正確に認識させることが可能となり、SEOの側面からタグをしっかりと使い分けることが重要です。
見た目を制御するためのタグは、HTML5では非推奨となっているため、使う場合には注意しましょう。
段落や見出しなど意味を示すタグ
1. 段落を示す「pタグ」
文章中に段落を設ける場合に使用するタグです。
サンプル
> <p>ここが第一段落です。</p><br>
> <p>ここが第二段落です。</p>
表示例
<p>ここが第一段落です。</p>
<p>ここが第二段落です。</p>
2. 見出しを示す 「h1〜h6タグ」
見出しを付ける場合に使うタグです。
「h1」はタイトル、「h2」 はサブタイトル、「h3」さらにその中でのサブサブタイトルを表します。
サンプル
> <h1>タイトル</h1><br>
> <h2>サブタイトル</h2><br>
> <h3>サブサブタイトル</h3><br>
表示例
記事中のタイトルと混ざって、見づらくなるためスクリーンショットにて、表示例を紹介します。
3.「段落レベルのテーマの区切り、セクション内での話題の区切りを表す場合に」区切り線を入れる「hrタグ」
段落レベルの文章内に意味上の区切りをつけたい場合に使うタグです。終了タグは不要です。
サンプル
> <p>お昼休み。</p><br>
> <hr><br>
> <p>同僚とランチに出かける。</p><br>
表示例
<p>お昼休み。<p>
<hr style="display:block">
<p>同僚とランチに出かける。</p>
4. 定義、説明文を切り分ける「dl、dt、dd」タグ
定義と説明文を分けて表示させる場合に使うタグです。
サンプル
> <dl>
> <dt>定義する言葉</dt>
> <dd>説明文</dd>
> </dl>
表示例
<dl>
<dt>定義する言葉</dt>
<dd>説明文</dd>
</dl>
5.箇条書き（リスト）を示す 「ul、ol、liタグ」
「ul」は配置順に意味を持たないアイテムを含むリストを指し、「ol」は配置順に意味を持たせるアイテムを含むリストを指します。
「li」はリストアイテムを意味します。なお、「ul」タグ「ol」タグは、一つ以上の「li」要素を含みます。
サンプル
> <ul><br>
> <li>リストアイテム</li><br>
> <li>リストアイテム</li><br>
> <li>リストアイテム</li><br>
> </ul><br>
> <ol><br>
> <li>リストアイテム①</li><br>
> <li>リストアイテム②</li><br>
> <li>リストアイテム③</li><br>
> </ol><br>
表示例
<ul>
<li>リストアイテム</li>
<li>リストアイテム</li>
<li>リストアイテム</li>
</ul>
<ol>
<li>リストアイテム①</li>
<li>リストアイテム②</li>
<li>リストアイテム③</li>
</ol>
6. 引用文を示す 「blockquoteタグ」
他のWebサイトなどから文章を引用・転載するときに使用します。
サンプル
> <p>例えば次のような文があります。</p><br>
> <blockquote>吾輩は猫である。名前はまだ無い。</blockquote><br>
> <p>この文について考えてみましょう。</p>
表示例
<p>例えば次のような文があります。</p>
> 吾輩は猫である。名前はまだ無い。
<p>この文について考えてみましょう。</p>
7. プログラミング・コードを示す「codeタグ」
プログラムのソースコードを文章内に記載する場合に使うタグです。
「code」で括ることで、文字のレイアウトが変わり、見やすくなります。
サンプル
> <code>.mb_title{text-align: center; }</code>
表示例
<code>.mb_widget-title{text-align: center; }</code>
リンクや画像を表示するタグ
8. リンクを示す「aタグ」
テキストや画像をa（アンカー）タグで囲むと、Web上の関連する情報を結びつけるハイパーリンクを指定できます。
href属性を使ってURLを指定したり、target属性を使ってリンク先の情報を開くウィンドウを指定したりできます。
サンプル
> <a href="/">Marketing Bank トップページへ</a>
表示例
<a href="/">Marketing Bank トップページへ</a>
9. 画像表示に使う「imgタグ」
画像を表示する場合に使用します.
基本的には<img src="（場所＋画像ファイル名）" alt="画像代替文字" width="横幅" height="高さ" 各種属性 >という構成で使われます。
src属性は画像のパス（ファイルの場所）を指定する役割を果たします。
サンプル
> <img src=" https://www.marketingbank.jp/common/images/logo2.png" alt="挿入したい画像代替文字" >
表示例
<img src=" https://www.marketingbank.jp/common/images/logo2.png" alt="挿入したい画像代替文字" >
文字レイアウト関連の属性、タグ
10. 改行を入れる「brタグ」
改行する場合に使うタグです。終了タグは不要です。
サンプル
> 東京都<br>港区<br>東新橋<br>1-9-2<br>汐留住友ビル
表示例
東京都<br>港区<br>東新橋<br>1-9-2<br>汐留住友ビル<br>
11. 表示スタイルを決める「style属性」
各タグに対して、表示スタイルを指定できます。基本的にはCSSで調整を行うべきですが、CMSやブログなどでCSSを変更できない場合には、この属性を用いて、文字の色・背景色・サイズなどを調整できます。
サンプル
> <span style="background-color: grey; color: white; font-size: 25px;">文字の色を調整する </span>
表示例
<span style="background-color: grey; color: white; font-size: 25px;">文字の色を調整する </span>
12. テキストに下線を引く「uタグ」
文章中に下線を引く場合に使うタグです。
意味を示すタグではなく、HTML5では非推奨のタグです。
サンプル
> ここに<u>下線を引く</u>場合に使います。
表示例
ここに<u>下線を引く</u>場合に使います。
13. 「過去の情報で正確では無くなった、関係なくなった場合に」テキストに取り消し線を引く「sタグ」
テキストに取り消し線を引く場合に使うタグです。
「削除された」あるいは「訂正をした」という意味のみでなく、「（過去は正確だったが）すでに正確ではなくなった・関係なくなった」という意味で使うタグです。
サンプル
> <s>通常価格：4,800円</s>
> <p>特別特価：2.800円</p>
表示例
<s>通常価格：4,800円</s>
<p>特別特価：2.800円</p>
14.「削除された部分であることを表す場合に」テキストに取り消し線を引く「delタグ」
テキストに取り消し線を引く場合に使うタグです。
「sタグ」とは異なり、「削除された」「訂正した」という意味で使うタグです。
サンプル
> <del>お申し込みはこちら</del>
> <p>受付は終了しました</p>
表示例
> <del>お申し込みはこちら</del>
> <p>受付は終了しました</p>
15. 区別、強調のために太字にする「strong、bタグ」
文章中の文字を区別、強調するために、太文字にするタグです。
bタグは、キーワードや製品名など、他と区別したいテキストを示し、強調という意味は持ちません。
strongタグは、強い重要性を示す場合に使います。
サンプル
> 今日は<b>花を買う</b>予定です。
表示例
今日は<b>花を買う</b>予定です。
16. 区別、強調のために斜め文字に「em、iタグ」
文章中の文字を区別、強調するために斜め文字（イタリック体）にするタグです。
iタグは、思ったことや感想など、他と区別したいテキストを示し、強調という意味はもちません。
emタグは、重要性を示す場合に使います。
サンプル
> 今日は<i>電車で通勤</i>する。
表示例
<p style="font-family:sans-serif">今日は<i>電車で通勤</i>する。</p>
※「メイリオ」ではイタリック体が適用されないためフォントの指定を「sans-serif」に変更しています。
17. 注釈を表示するために、文字を小さくする「smallタグ」
文章中の文字を小さくするタグです。
免責事項・規約文書・法的制約・警告・著作権保護などの注釈といった意味を示します。
サンプル
> <small>© 2015 株式会社サンプルテキスト</small>
表示例
<small>© 2015 株式会社サンプルテキスト</small>
まとめ
今回は、HTMLタグについて、使い方や意味を紹介しました。
Webサイトの運用を担当している場合に、タグを知っていれば、制作の打ち合わせがスムーズになります。
CMSやブログで、HTMLを編集できる場合は、実際に操作してみてはいかがでしょうか。
