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つずつ小さくしていくのがルールになります。

2.段落タグ（Paragraph）

記事の段落を表示するタグです。

<P></P>で囲まれた文章が1つの段落になります。

3.改行タグ（BReak）

記事に改行を入れるタグです。

改行タグは2つのタグで囲う必要がなく、改行したい部分に<br>を入力します。

4.引用タグ（blockquote）

他サイトなどから抜粋した部分を示すタグです。

<blockquote>で囲った部分が引用部分となります。

5.強調タグ（strong）

文中の文字を太字にするタグです。

<strong>で囲った部分が強調部分となり、太字で表示されます。

6.画像タグ（image）

記事に画像を表示させるタグです。

画像タグには属性指定が必要で、src、alt、width、heightと一緒に使用します。

• <img>・・・画像タグ
• <src>・・・画像ファイル
• <alt>・・・画像を表示できないときの代替表示
• <width>・・・画像の横サイズ
• <height>・・・画像の縦サイズ

7.リストタグ（Unordered List・Ordered List）

記事に箇条書き表示やリストを表示させるタグです。

一般的なリストの場合は<ul>、番号付きリストの場合は<ol>を使用します。

8.テーブルタグ（table）

記事内に表を表示させるタグです。

ほかのタグに比べてやや複雑ですが、ルールを理解すればセルを統合したり、色を付けたりと、表作成のバリエーションが広がります。

9.リンクタグ（Anchor）

記事内に他のページのリンクを埋め込むタグです。

リンクタグには属性指定が必要で、 hrefなどと一緒に使用します。

• <href>・・・リンク先

10.ページ内リンクタグ（Anchor）

同じページ内にリンクの到達地点がある場合に使用するタグです。

もう少しわかりやすくいうと、テキストや画像をクリックするとページ内の好きな位置にジャンプできるというもの。

リンクタグと同じ<a href>を使用しますが、ページ内リンクの場合はクリック地点とジャンプ先を記載する必要があります。

• <a href=”#id名”>・・・クリック地点
• <id=”id名”>・・・ジャンプ先

Webライターが知っておくべきHTMLタグ　まとめ

今回は、Webライターが知っておくべきHTMLタグをご紹介しました。

今回ご紹介した10種類のタグを覚えておくと、CMS入稿がかなりスムーズに行えるようになります。

また、これだけ知っているだけでもWebライターとしてかなり重宝されるので、早い段階で身につけるのがおすすめです。

HTMLタグはコピペで使い回しができるので、ぜひ今回ご紹介したタグを活用してみてくださいね！

Webライター必見！高単価案件を受注できる場所と受注する5つの方法

この記事では、Webライターが高単価案件を受注する方法と、高単価ライターの条件について解説しています。高単価案件は限られた場所にしか出回っていないため、受注方法を見直すことが大切です。また、単価に見合ったスキルも求められます。

the-webwritter.net

2021.03.27