ライティングのコツ

Webライターが最低限押さえておきたいHTMLの基礎

 

「HTMLタグを入れてください」って依頼があるんだけど、これってどういう意味?
なんだか難しそうだし、応募しない方がいいかな……
山田 ユウキ
山田 ユウキ
WebライターになりたいならHTMLの知識は必須です。
せっかくなので、この機会にサクッと勉強しておきましょう

 

見慣れない言葉を見ると、どうしても不安になりますよね。

依頼を引き受けた後になって「やっぱり分かりませんでした」となるのは絶対に避けたいところです。

 

とはいえ、Webライターに必要なHTMLの知識はそれほど多くありません。

そこで今回は、HTMLの基礎を必要なところだけ分かりやすく解説します。

 

HTMLとは

HTMLはWebサイトを構成するマークアップ言語の一つです。

いきなり難しそうな言葉が出てきましたが、とりあえずは「マークアップ言語=プログラミング言語のようなもの」だと思ってください。

 

HTMLのおかげで、Webサイトではこのように文字を太くしたり斜めに傾けたりできます。

 

↑の文章をHTMLで書くと以下の通り。

 

<p>HTMLのおかげで、Webサイトでは<strong>このように文字を太くしたり</strong>、<em>斜めに傾けたり</em>できます。</p>

 

ただテキストを納品するだけなら、HTMLの設定はクライアントの仕事です。

しかしクライアントの立場になって考えると、自分で設定するよりも最初からライターに設定してもらいたいと思うはずですよね。

 

実際、クライアントの多くはHTMLが分かるWebライターを求めています。

本気でWebライターになりたいなら、HTMLの勉強は避けて通れません。

Webライターに必要なHTMLの知識

HTMLを習得する上で、覚えておくべきルールは一つだけです。

それは、装飾したい場所を開始タグと終了タグで囲うということ。

 

このようにタグで囲うことをマークアップと言います。

 

具体例を見てみましょう。

 

表示させたい文章

ただランニングをするだけでは痩せません。

なぜなら、ダイエットで最も重要なのは食事管理だからです。

HTML

<p>ただランニングをするだけでは痩せません。</p>
<p>なぜなら、<strong>ダイエットで最も重要なのは食事管理だから</strong>です。</p>

 

この文章では、段落を示すpタグと、強調を示すstrongタグを使っています。

山田 ユウキ
山田 ユウキ
タグは入れ子構造になってもOKです

 

HTMLタグは全部で100種類以上ありますが、すべて覚える必要はありません。

Webライターがよく使うタグは限られていますし、忘れた時はその都度調べれば問題ないからです。

 

いくつか代表的なHTMLタグを紹介しておきます。

実際にタグテストで手を動かしながら感覚をつかみましょう。

タグテストの使い方

マークアップ言語には、HTML以外にもデザインを細かく設定できるCSSという言語があります。

タグテストではCSSを設定しないため、この記事の表示とは微妙に違う結果が出力されますが、気にする必要はありません。

※基本的にCSSはクライアントが設定しています。

hタグ

hタグは見出しを設定するタグです。

記事タイトルにはh1、大見出しにはh2を使い、さらに細かい見出しにはh3〜h6を使います。

山田 ユウキ
山田 ユウキ
Webライターにとって最も使用頻度が高いタグです

 

hタグの使用例

記事タイトル

大見出し

小見出し①

小見出し②

HTML

<h1>記事タイトル</h1>
<h2>大見出し</h2>
<h3>小見出し①</h3>
<h3>小見出し②</h3>

 

タグテストでの出力結果

pタグ

pタグは段落部分を囲うタグです。

 

pタグの使用例

記事タイトル

本文

大見出し

小見出し①

本文

小見出し②

本文

HTML

<h1>記事タイトル</h1>
<p>本文</p>
<h2>大見出し</h2>
<h3>小見出し①</h3>
<p>本文</p>
<h3>小見出し②</h3>
<p>本文</p>

 

タグテストでの出力結果

 

pタグはHTMLを学ぶ上で基本中の基本といえるタグですが、実はWebライターがこのタグを使うことはあまりありません。

というのも、pタグは記事を入稿するシステムの方で自動挿入されるケースがほとんどだからです。

 

pタグを使わない場合のHTML

<h1>記事タイトル</h1>
本文
<h2>大見出し</h2>
<h3>小見出し①</h3>
本文
<h3>小見出し②</h3>
本文

ul、ol、liタグ

ul、ol、liは箇条書きで使うタグです。

リスト全体をulタグ、もしくはolタグで囲い、項目はそれぞれliタグで囲います。

 

ulタグ、liタグの使用例
  • りんご
  • バナナ
  • みかん
HTML

<ul>
<li>りんご</li>
<li>バナナ</li>
<li>みかん</li>
</ul>

 

タグテストでの出力結果

 

olタグは数字付きの箇条書きで使います。

 

olタグ、liタグの使用例
  1. りんご
  2. バナナ
  3. みかん
HTML

<ol>
<li>りんご</li>
<li>バナナ</li>
<li>みかん</li>
</ol>

 

タグテストでの出力結果

blockquoteタグ

blockquoteは引用をする時に使うタグです。

 

blockquoteの使用例

恥の多い生涯を送って来ました。

自分には、人間の生活というものが、見当つかないのです。

引用元:人間失格/太宰治

 

HTML

<blockquote>
<p>恥の多い生涯を送って来ました。</p>
<p>自分には、人間の生活というものが、見当つかないのです。</p>
<p>引用元:人間失格/太宰治</p>
</blockquote>

 

タグテストでの出力結果
段落が少し右にズレていれば正解です。

aタグ

aタグはリンクを作成するタグです。

少し複雑な構文ですが、覚えておいて損はありません。

 

aタグの使用例

Google

HTML

<a href=”http://google.com”>Google</a>

 

タグテストでの出力結果

 

リンク先を別タブで開かせたい場合は、開始タグ内に

「target=”_blank” rel=”noopener”」

を指定します。

 

別タブで開く例

Google

HTML

<a href=”http://google.com” target=”_blank” rel=”noopener”>Google</a>

 

一般的に、通常のリンクと別タブで開くリンクは以下のように使い分けます。

  • 通常のリンク→同じサイト内へのリンク(内部リンク)
  • 別タブで開くリンク→他のサイトへのリンク(外部リンク)
山田 ユウキ
山田 ユウキ
あくまで一般論です。
実際にどう設定するかはクライアントに確認しましょう

table、tr、th、tdタグ

table、tr、th、tdタグは表を作成するタグです。

それぞれの役割は以下の通り。

 

  • tableタグ→表全体を囲うタグ
  • trタグ→行を囲うタグ
  • thタグ→表の見出しを囲うタグ
  • tdタグ→表の要素を囲うタグ

 

少し難しいので、画像を交えて例を示します。

 

tableタグの使用例
商品名 価格
りんご 90円
バナナ 250円
みかん 380円

 

HTML

<table>
<tr><th>商品名</th><th>価格</th></tr>
<tr><td>りんご</td><td>90円</td></tr>
<tr><td>バナナ</td><td>250円</td></tr>
<tr><td>みかん</td><td>380円</td></tr>
</table>

まずはtableタグで全体を囲い、trタグでそれぞれの行を囲います。
見出しの要素にはthタグを、表の要素にはtdタグを使います。

 

タグテストでの出力結果

あとは実践あるのみ

今回の内容を押さえておけば、WebライターがHTMLで困ることはありません。

他にどんなタグがあるか知りたい方はこちらのサイトを参考にしてください。

ABOUT ME
山田 ユウキ
2017年6月からWebライターとして活動しています。このブログでは初心者Webライター向けの情報を発信中。【詳しいプロフィールはこちら】
\質問・相談はこちら/


メールマガジンでは読者さんからの質問や相談に直接答えます。

私に答えられることであれば何でも回答しますので、未経験や初心者の方はぜひ登録してみてください。