WebライターがHTMLを覚える必要ってあるの？
HTMLって聞いたことはあるけど、よくわからないのよね…。
こんにちは、バスタニです。
WebライティングではWordPress（ワードプレス）を使うのが一般的ですよね。
案件によってはWordやテキストで納品する場合もありますが、書いた記事をWeb上に公開するにはWordPressのようなCMS（コンテンツマネジメントシステム）を使う必要があります。
そして、CMSへの入力で使用するのがHTMLです。
なのでWebライターは、遅かれ早かれHTMLを覚える必要が出てきます。
とはいえ、エンジニアばりにガッツリ覚える必要はなく、ライティングでよく使うものだけ覚えれば上出来です！
そこで今回は、Webライターが知っておくべきHTMLについてご紹介します。
この記事を読めば、どんなCMSにも対応できる高単価ライターになれちゃいますよ！
そもそもHTMLとは
HTMLとは「Hyper Text Markup Language」の略称で、コンピュータに文章構成を指示するための言語です。
超わかりやすくいうとこんな感じ↓
<ここから見出し>ティラミスの作り方<ここまで見出し>
<ここから段落>スポンジを粉々にして、インスタントコーヒーに浸す。<ここまで段落>
この<>の部分がHTMLです。
このページはもちろん、インターネット上のすべてのページにHTMLが使用されています。
CMSでは、日本語を入力すればHTMLに自動で変換してくれるため、HTMLを使っている感覚はまったくありませんよね。
ですが、CMS上の細かな設定までは自動変換されないので、思い通りのページをつくるには自分でHTMLを入力する必要があります。
なので、記事作成をするWebライターにもHTMLのスキルが求められるのです。
Webライターが知っておくべき10種類のHTMLタグ
冒頭でもお伝えしたように、WebライターであればHTMLをガッツリ覚える必要はありません。
ただ、本格的に勉強すればクライアントの要望通りにWebページをつくれるようになりますし、Webライティングとは別でコーディングの仕事も受注できます。
なので、個人的には覚えて損はないかと。
とはいえ、本格的に勉強したい！という人は少数派だと思うので、ここでは最低限知っておくべきHTMLをご紹介します。
1.見出しタグ（Heading）
記事の見出しを表示するタグです。
見出しタグはh1～h6まであって、h1はタイトル、h2～h6が見出しとして使われます。
使い方は h2 → h3 → h4 … という順序で、見出しを1つずつ小さくしていくのがルールになります。
<h1>1番大きい見出し（タイトル）</h1>
<h2>2番目に大きい見出し</h2>
<h3>3番目に大きい見出し</h3>
<h4>4番目に大きい見出し</h4>
<h5>5番目に大きい見出し</h5>
<h6>6番目に大きい見出し</h6>
1番大きい見出し（タイトル）
2番目に大きい見出し
3番目に大きい見出し
4番目に大きい見出し
5番目に大きい見出し
6番目に大きい見出し
2.段落タグ（Paragraph）
記事の段落を表示するタグです。
<P></P>で囲まれた文章が1つの段落になります。
<P>なぜなら、文章よりも挿絵が多く使われているからだ。</P>
この本はとてもわかりやすい。
なぜなら、文章よりも挿絵が多く使われているからだ。
3.改行タグ（BReak）
記事に改行を入れるタグです。
改行タグは2つのタグで囲う必要がなく、改行したい部分に<br>を入力します。
<br>
<p>なぜなら、文章よりも挿絵が多く使われているからだ。</p>
この本はとてもわかりやすい。
なぜなら、文章よりも挿絵が多く使われているからだ。
4.引用タグ（blockquote）
他サイトなどから抜粋した部分を示すタグです。
<blockquote>で囲った部分が引用部分となります。
SEOとは「Search Engine Optimization」の略称で、日本語では検索エンジン最適化といいます。
5.強調タグ（strong）
文中の文字を太字にするタグです。
<strong>で囲った部分が強調部分となり、太字で表示されます。
SEOとはSearch Engine Optimizationの略称で、日本語では検索エンジン最適化といいます。
6.画像タグ（image）
記事に画像を表示させるタグです。
画像タグには属性指定が必要で、src、alt、width、heightと一緒に使用します。
- <img>・・・画像タグ
- <src>・・・画像ファイル
- <alt>・・・画像を表示できないときの代替表示
- <width>・・・画像の横サイズ
- <height>・・・画像の縦サイズ
7.リストタグ（Unordered List・Ordered List）
記事に箇条書き表示やリストを表示させるタグです。
一般的なリストの場合は<ul>、番号付きリストの場合は<ol>を使用します。
<ul>
<li>いち</li>
<li>に</li>
<li>さん</li>
<li>よん</li>
<li>ご</li>
</ul>
<ol>
<li>いち</li>
<li>に</li>
<li>さん</li>
<li>よん</li>
<li>ご</li>
</ol>
- いち
- に
- さん
- し
- ご
- いち
- に
- さん
- し
- ご
8.テーブルタグ（table）
記事内に表を表示させるタグです。
ほかのタグに比べてやや複雑ですが、ルールを理解すればセルを統合したり、色を付けたりと、表作成のバリエーションが広がります。
<table>
<tbody>
<tr>
<td>商品A</td>
<td>300円</td>
<td>在庫あり</td>
</tr>
<tr>
<td>商品B</td>
<td>150円</td>
<td>在庫あり</td>
</tr>
<tr>
<td>商品C</td>
<td>600円</td>
<td>在庫なし</td>
</tr>
<tr>
<td>商品E</td>
<td>700円</td>
<td>在庫なし</td>
</tr>
</tbody>
</table>
| 商品A | 300円 | 在庫あり |
| 商品B | 150円 | 在庫あり |
| 商品C | 600円 | 在庫なし |
| 商品E | 700円 | 在庫なし |
9.リンクタグ（Anchor）
記事内に他のページのリンクを埋め込むタグです。
リンクタグには属性指定が必要で、 hrefなどと一緒に使用します。
- <href>・・・リンク先
10.ページ内リンクタグ（Anchor）
同じページ内にリンクの到達地点がある場合に使用するタグです。
もう少しわかりやすくいうと、テキストや画像をクリックするとページ内の好きな位置にジャンプできるというもの。
リンクタグと同じ<a href>を使用しますが、ページ内リンクの場合はクリック地点とジャンプ先を記載する必要があります。
- <a href=”#id名”>・・・クリック地点
- <id=”id名”>・・・ジャンプ先
↓
↓
↓
<p id=”1″>ここ</p>
Webライターが知っておくべきHTMLタグ まとめ
今回は、Webライターが知っておくべきHTMLタグをご紹介しました。
今回ご紹介した10種類のタグを覚えておくと、CMS入稿がかなりスムーズに行えるようになります。
また、これだけ知っているだけでもWebライターとしてかなり重宝されるので、早い段階で身につけるのがおすすめです。
HTMLタグはコピペで使い回しができるので、ぜひ今回ご紹介したタグを活用してみてくださいね！
こちらの「現役プロライターが教えるWebライティング講座（初級編）: 〜文章で月5万円を稼ぐ方法〜」では、クライアントが依頼したくなるプロフィールの作り方や提案文の書き方などを、より実践的に解説しています。
文章で月5万円稼ぐための知識がすべて詰まっているので、未経験もしくは初心者Webライターはこちらもぜひ参考にしてみてくださいね！
コメント