Webライター・ブロガーが最低限知っておきたいHTMLタグ10個

2018.07.05

Webメディアにおいてライター業をやっていくうえで、「これぐらいは知っておきたいHTML」を一通りご紹介します。

まずは一覧です。

  1. メタディスクリプション<meta name=”description” content=”概要文”>
  2. タイトル<title>ページタイトル</title>
  3. 段落<p></p>、改行<br>もしくは<br />
  4. 見出し<h1></h1>、<h2></h2>、<h3></h3>
  5. 強調<strong></strong>
  6. リスト<ul><li></li></ul>、数字付きリスト<ol><li></li></ol>
  7. 画像（URL、サイズ、タイトル、代替テキスト）<img src=”画像URL” width=”横幅px” height=”縦幅px” title=”画像タイトル” alt=”画像の代替テキスト” />
  8. アンカーリンク<a href=”URL” target=””>ページタイトル</a>
  9. 引用<blockquote>引用文</blockquote>
  10. コメント<!–  –>

それでは各項目について説明していきます。

1.メタディスクリプション

メタディスクリプションは、<meta name=”description” content=”概要文”>というもので、記事の概要をまとめた一文です。

検索エンジンの結果画面にも表示される文章なので、ページクリック率、アクセス数にも如実に影響が出ます。
アクセスに関わる部分なので、「端的に」「わかりやすく」「キャッチーに」まとめましょう。

検索エンジンや閲覧環境にもよりますが、PCなら120文字程度、スマホなら50文字程度を目安に考えましょう。

2.タイトル

<title>記事のタイトル | サイト名</title>といったものです。これも検索エンジンに表示されるものなので、SEOを考慮し、「クリックしたくなる」キャッチーな文面が求められます。

目安として40文字以内が適しています。

3.段落、改行

文章の段落は<p>文章</p>で囲み、改行は<br>もしくは<br />などを入れます。

なお、brには閉じタグ（</br>）が存在しません。

4.見出し

<h1>見出し１</h1>

<h2>見出し２</h2>

<h3>見出し３</h3>

などで表現します。

「h1」は1ページにつき1つしか存在せず、タイトルをそのまま当てはめて処理する場合が多いので、使用機会はあまりないと思います。よって文中見出しは「h2」から始めるのが基本です。

しかし、サイトデザイン上「h2」がどこかほかの場所で使用されており、しかたなく文中見出しを「h3」から始める構造になっているサイトも存在します。

また、見出しのスタイル（CSS）が用意されていないサイトも存在するので、思ったような文字の大きさや見た目にならない場合もあります。
スタイルが存在しないタグの記載については、サイトのデザイナーや管理者などに相談しましょう。

5.強調

文中で<strong>強調したい文章</strong>を囲います。

bタグ（boldの略。<b>太字</b>）も太字になりますが、SEOで言う「強調」「重み付け」の意味はなく、単純に見栄えを変えるためのタグです。

6.リスト、数字付きリスト

<ul>
<li>リスト</li>
<li>リスト</li>
</ul>

↓

  • リスト
  • リスト

<ol>
<li>数字付きリスト</li>
<li>数字付きリスト</li>
</ol>

↓

  1. 数字付きリスト
  2. 数字付きリスト

 

このような見栄えになるタグで、要素を羅列するときに便利です。

こちらもサイトデザイナーがCSSを用意していない場合、表示が思ったようにいかないことも多数あります。
デザイン追加を容易に頼めない場合は、プレビュー画面などで確認のうえ、使用しましょう。

7.画像・サイズ・タイトル・代替テキスト

<img src=”画像URL” width=”横幅px” height=”縦幅px” title=”画像のタイトル” alt=”画像の代替テキスト” />

このように画像URLと横幅、縦幅、タイトル、代替テキストを記述します。br同様、閉じダグは存在しません。

画像URLには絶対パス（http://〜〜）と相対パス（/../〜〜）がありますが、ブログの編集画面などでは自動的にURLを入れくれるので、あまり考えなくても大丈夫です。

サイズについては、大きい画像を縮小して表示したい場合は横幅のみ縮小サイズを明記し、縦幅には「auto」などと入れると縦横比が正しいものが表示されるので、覚えておきましょう。

title、altはSEOにも関係するので、その画像を指し示した最適なテキストを記入しましょう。原則併用でかまいません。

8.アンカーリンク

<a href=”URL” target=””>ページタイトル</a>といったものです。サイト内リンクの場合はtargetには何も入れませんが、外部リンクの場合、ユーザーをサイト内にとどめておく意図から「target=”_blank”」（別ウィンドウで開く）などが用いられます。

9.引用

<blockquote>引用文</blockquote>などと、別サイトや文献などの文言を引用する際に使用するものです。

引用サイトや記事が存在する場合は、blockquoteタグの中にアンカーリンクタグ（<a href=”URL” target=””>ページタイトル</a>）も記載します。

10.コメント

<!–  –>（使用しているフォントのせいで見えづらいですが、「–」は半角マイナス「-」が2つ連なっています）は、ブラウザ上では非表示にして、HMTLソース上でコメントを残しておくときに便利です。

<!– ここに書かれているコメントは、ブラウザ上では見られず、HTMLソース上でのみ見られます –>

このようにコメントを残しておくことを「コメントアウト」とも呼びます。

  • あとで公開したい文面を保存しておくとき
  • デザイナー・コーダーに対する伝達事項
  • 記録として残しておきたいコードや文面

これらを管理するのに便利です。

 

以上、「Webライター・ブロガーが最低限知っておきたいHTMLタグ10個」でした。

紙媒体よりWeb媒体の方が増加傾向にある昨今、ライターとして受注を増やすためにも、これらのHTML知識を身につけておくことをおすすめします。

The following two tabs change content below.

立見

Webコンサルタント／Webマーケティング／広報／新規サービス企画／一部制作物の執筆・校閲・校正
2016年にフリーランスライターとしてSSCへ営業訪問。翌年4月に正式入社し、Webライター、コンテンツディレクターを経て、現在は受託案件のSEOディレクター、自社Webマーケティング、サービス企画、広告運用、自社SNS運用等に従事。入社以前はWeb系広告代理店にて各種Webメディア、企業のオウンドメディア等のコンテンツ制作や広告運用に携わっていた。
このエントリーをはてなブックマークに追加