HTML入門（実践編）〜マーケターやWeb担当者がマスターしたいHTMLの基礎

HTMLの入門的な内容は、マーケターがマスターしておくと、業者から納入したWebサイトのHTMLファイルのちょっとした改修やHTMLメールを自分で作成できるようになります。

HTMLの入門的な内容を覚えておくと、コスト削減だけでなく業者とやり取りする時間も短縮できます。

前回は、HTML入門としてHTMLの概要を紹介しました。今回は、マーケティング業務に関わるマーケターが覚えておきたい基本的なHTML入門の実践編をお届けします。

1.HTMLの基礎について

HTMLの基礎については、「マーケターやWeb担当者のためのHTML入門｜カイロスのマーケティングブログ」でまとめました。基本的なHTMLの概念などは、こちらを参考にしてください。

今回は、前回の「マーケターやWeb担当者のためのHTML入門｜カイロスのマーケティングブログ」続きで、HTMLの利用例について説明していきます。

2.HTMLで文章を装飾する

HTMLで文字、段落を装飾する代表的な方法を紹介します。後のHTMLの運用が簡単になるよう、CSSを使って説明していきます。

2-1.改行タグbrと段落タグp

HTMLの入門をおさえる上では、改行と段落について必ず知らなくてはなりません。どんな簡単な文章をHTMLで書いても、改行と段落タグは必要です。

HTMLではテキストエディタなどで改行を入れても無視します。改行には<br>を明記する必要があります。

例えば、

は、

となります。<br>を入れるとこのように文中で改行をいれます。

HTMLで作成するWebの読み物では、長い文章のかたまりは読みにくくなります。そのため、文章を段落で区切って、段落間に少し余白を入れるようにします。

ここで活躍するHTMLタグが改行のための<p>タグです。<br>で囲んだ文章は1つの段落とみなされ、段落の前後に約1行の余白が入ります。

この文章は、

となります。

Webでは、段落に含まれる文章を少なくしたり、文章ごとに段落を区切るなどすると、あなたの文章が読みやすくなるでしょう。これもHTML入門です。

当ブログ「カイロスのマーケティングブログ」でも、段落を多くして読みやすくするための工夫をしています。いかがでしょうか？

2-2.文字の行間の変更

HTML入門で是非覚えておいていただきたい次のテーマは、行間です。行間はHTMLタグではなく、HTMLタグの属性とその値で決定したり、CSSで設定したりします。

と書いたHTML文章は、

と表示します。2つめの段落は、特に行間が詰まった感じがしますね。

ですので、行間を200%に設定します。まずは、HTMLタグと属性＋値で設定します。

これは、

と表示されます。どちらが読みやすいかは、見ての通り明らかですね。

HTML入門として覚えていただきたいことに、CSSがあります。行間200%の文章をCSSを使って書くと、

とします。

もしHTML文章全体（厳密には、<p>タグ）に行間200%を適応したければ、

とすると、HTML文章内の全ての<p>タグに行間200%が適応されます。

2-3.HTML文章で特定の文字を太くする

HTML文章で文字を太くする方法もHTML入門としておさえておきましょう。

HTML文章内で、文字や単語を太くする場合、<b>タグや<strong>タグを利用します。

この結果はいずれも、

となります。

<b>タグと<strong>の違いの2つのタグはHTMLの出力からみると全く同じですが、HTMLタグにおける意味合いが異なります。

<b>タグは単に太字を意味しますが、<strong>は「強調」を意味します。したがって、SEOなどでは両者は分けて使われます。

2-4.見出しのあれこれ

HTML入門でも見出しは特に重要です。文章を意味のあるかたまりに区切って見出しをつければ
読者にとって読みやすくなるだけでなく、SEOにも効果があります。

見出しは<h1>から<h6>まで定義されています。小さい番号ほど大きな文字で表示されます。

見出しはあくまでも、意味のある文章のかたまりに対して見出しをつけるためのHTMLタグであり、ブロック要素です。

ブログなどでは、見出しの最上位の<h1>タグは、記事のタイトルなどに使います。SEOの観点からすると、<h1>タグはWebページに1回のみ使うことが望ましいでしょう。

したがって、ブログなどの文章中の見出しには<h2>タグ以下の見出し用のHTMLタグを活用します。

見出しタグの文字の大きさや色などの変更にはCSSが便利です。

と設定すると、

のようになります。

2-5. 引用をHTMLタグで明確にする

ブログでは、他のブログ記事やWebサイトからの引用もよく利用します。

引用時に最もよく使うHTMLタグは、<blockquote>タグです。<blockquote>タグはブラウザ上で左右にインデント（余白の挿入）は入ります。
<blockquote>タグは、

このように利用します。他の文献やWebサイトのコンテンツや文章を<blockquote>タグで囲みます。

<blockquote>タグを自分なりに装飾したい場合には、CSSを利用します。例えば全ての<blockquote>タグを同様に装飾したい場合はCSSに、

のようにします。ここでは、引用部分を薄いグレーの線で囲み、文字と線のスペースを10pxほど取っています。

3.箇条書き

文章で箇条書きをうまく使うと、文章の内容のポイントを読者にうまく伝えることができます。

HTMLでは箇条書き用のHTMLタグがあります。箇条書き用のHTMLタグを活用して、HTML文章で箇条書きをします。

3-1. 基本的な箇条書き

箇条書き用のHTMLタグでは、3つだけ覚えておきましょう。

箇条書き用のHTMLタグで覚えておきたいもの

<ul>タグ：番号なしのリストを作成します。

<ol>タグ：番号付きのリストを作成します。

<li>タグ：箇条書したいリストの内容です。

これらの箇条書きのHTMLタグを活用すると、

と表現できます。これは、

となります。

3-2. HTMLタグとCSSで箇条書きを装飾する

では、先ほどの箇条書きに画像を使って装飾してみましょう。画像の挿入にはCSSを使います。番号なしの箇条書きの<li>タグにCSSを適用します。

この出力結果は、

のように画像で置き換わります。

今回利用した画像は、「ブログが作りたい！」さんからダウンロードさせていただきました。

4.リンクを挿入する

次にリンクを設定するHTMLタグについて説明します。マーケティング目的で運営するブログやWebサイトでは、リンクは欠かせません。

4-1.リンクの基本

リンクを設定するHTMLタグは、<a>タグです。ある文字や単語に外部リンクを設定する場合、HTMLの<a>タグを以下のように使います。

hrefにリンク先のURLを設定します。titleは無くても<a>タグには問題ありません。ただしSEOとしてある程度の効果が期待できるようですので、自社のWebページへのリンクの場合は、title属性も記述しておきましょう。

先ほどの例は、

と表示されます。ここまでがおさえておきたいHTML入門です。

4-2.別ウインドウでリンク先のコンテンツを開く

時には、別のウインドウやタブでリンク先を開いてもらいたいことがあります。その場合には、<a>タグのtarget属性に「_blank」を設定します。

これは、

のようになります。

5.HTMLにおける画像

画像はたとえHTML入門のレベルでも、Webサイトには欠かせません。画像をHTMLに埋め込むためには、<img>タグを使います。

5-1. 画像に関係する基本的なHTML

<img>タグでは、必須のsrc属性で画像ファイルのURLを指定し、alt属性で画像を表示できない場合の環境向けのテキスト、width属性・height属性でそれぞれ画像の幅と高さを指定します。

具体的には、

のように表示されます。

この画像の例は、このブログの右上のバナーになります。

5-3. 画像にリンクを設定する

ブログでもWebサイトでも、バナーやナビゲーションのボタンなど、画像にリンクを設定することはよくあります。

画像にリンクを設定するためには、<a>タグと<img>タグを同時に使います。具体的には、<img>タグを<a>タグで囲みます。

6.テーブルを作成する

HTMLの表は、<table>タグで作成します。Webで表を作成する機会は比較的少ないかもしれませんが、HTMLメールでは<table>タグを使う機会が多いので、マーケターにとってはHTML入門でありながら必須の項目です。

6-1. 基本的なテーブルタグ

<table>タグの基本的な構成は、<table>〜</table>で表全体を囲み、<tr>〜</tr>で表の行を囲みます。それぞれのセルは、<th>〜</th>でヘッダを、各セルは<td<〜</td>で囲みます。

これは、以下のように表示されます。

6-2. HTMLのテーブルを装飾する（入門編）

上の表は、属性も何も設定していないシンプルなテーブルです。せめて罫線だけでもつけたいでしょう。

HTMLのテーブルの罫線は<table>タグのborder属性かCSSのどちらかで設定できます。ここでは簡単な、border属性からみていきましょう。

これは、以下のように表示されます。

この表も少し文字が詰まりすぎていて、表を読みにくいと思います。それぞれのセルにスペースを入れてみましょう。CSSのpaddingによってセルにスペースを作ります。

この結果は以下のように表示されます。ここで、paddingの5px、10pxは、それぞれ上下、左右のスペースを示しています。

先ほどよりも、文字と罫線の間にスペースができました。

これ以上のHTMLテーブルの装飾方法は別途紹介したいと思います。まずはHTML入門の<table>タグの使い方として身につけてください。

7.まとめ

今回はHTML入門の実践編として、代表的なHTMLの使い方について説明しました。ちょっとした入門的なHTMLを覚えておくと、納入してもらったHTMLファイルの修正や、HTMLメールの作成ができるようになります。

マーケティング業務に関わる方々もぜひ、このHTML入門編で触れた内容をマスターすることをおすすめします。