Web編集者なら常識?まず知っておきたいHTMLタグ8個

とんちんです。肌寒く感じられる日が増えて、ラーメンをすする箸が止まりません。

さて、先日ブログエディタMarsEditの記事を公開してHTMLタグの話にすこし触れました。そう。Web編集をするうえでHTMLからは逃げられないのです。そこで今回は編集者が覚えておきたい「基本のき」タグを解説します。HTMLってナニ?ってかたも歓迎です。

ウェブ編集に必須のことば、HTML

 私たちの住む地球では、国や地域によってさまざまな言語が話されています。話す相手によって言語を選ぶこともあるでしょう。コンピュータも同じです。コンピュータが文字を正しく認識してネットワーク上に表示できるように、わたしたちがととのえて発信する必要があります。ウェブページの情報を表現する言語はHTML、CSS、Javascriptの3つ。そのうちHTMLはウェブページの文書を記述する言葉。ウェブ編集に大きく関わる言語といえます。

 HTMLの「タグ」とは、囲んでいる文字に対する命令を表します。たとえば

<strong>強調</strong>

のように、入れ子構造で使うタグが多いです。

Web編集者の必修タグはこの8つ!!

ちなみにこの記事は以下の8タグだけで作ったもの。以下でひとつずつ解説していきます。

タグ 効果
h 見出し
strong 文字を強調する
blockquote 引用
p 段落
a リンクを入れる
img 画像を入れる
li リスト
table 表を作成

1. 見出し

 hタグは「見出し」を示し、数字が若いほど順位が上がります。セクションの始めにつけられるため、自動的に情報の区切りを示す役割をもちます。本ブログもh2とh3を中心に記述しています。

 どうやって使えばいいの?と迷うあなたはHTMLハイライターを使ってみましょう。いろいろなサイトの見出しが一目でわかります。

ソース開く必要ナシ。Hタグをハイライトするブックマークレット「html-highlighter」を公開しました | 株式会社ZINE

2. 強調

 文字を強調するときはstrongタグを使います。もつ意味は「重要な情報」。単純に文字を太くするだけならemタグも使えますので覚えておきましょう。

コラム・文字の色を変えるには?

文字色はCSSで変更しましょう。空要素<span style>の出番です。

<span style="color:#文字の色名を挿入します">色を変えたい文字</span>

 カラーコードや色名を調べるときはWEB色見本 原色大辞典 – HTMLカラーコードを使うとベンリです。外部CSSを利用する方法もありますが今回は割愛。

3. 引用

 blockquoteタグは、他サイトからの転載・引用を示すときに使用。本文と分けたい情報を書くときにお世話になることもあります。

4. 段落

 pタグは段落の範囲を示し「いくつかの文をカタマリとして認識してください」というメッセージを送ります。

pタグでかこむとこんな感じになりますpタグでかこむとこんな感じになりますpタグでかこむとこんな感じになりますpタグでかこむとこんな感じになりますpタグでかこむとこんな感じになります

 pタグの開始地点(文頭)の前に自動的に改行がはいり、終了地点の次の文字は自動的に改行されます。

pタグは改行にも使えます。

これまでは改行のbrタグを使うことも多かったのですが

サイトでの見栄えを整えるためにbrタグを使うのは減り、体裁はスタイルシートで調整しようという考えが一般的になりつつあります。

※上の文は意図的にpタグを多用しています

5. リンクを挿入

 ハイパーリンクの挿入はaタグです。基本的な構造はこちら。

<a href="#URLを挿入します#">#この部分に入力した文字からリンク先に飛べます#</a>

リンク先を新しいページ(タブ)で開くときには、URLのあとに target=”_blank”をつけたします。

<a href="#URLを挿入します#" target="_blank">#この部分に入力した文字からリンク先に飛べます#</a>

このようにタグにプラスアルファの機能をもたせる記述を属性といいます。

6. 画像を挿入

imgタグを使うと画像を挿入できます。基本構造は

<img src="#画像が置いてある場所(URL)を挿入します#">

imgタグは多くのタグのように入れ子構造にはならないので注意。</img>タグはありません。

またaタグと同じくimgタグにも属性があります。2つ以上の属性をつけるときには半角スペースを入れましょう。

  • width :画像の横幅を指定する
  • height :画像の高さを指定する
  • list :画像が表示できない場合の、テキスト表示を指定

画像にリンクを貼るときにはimgタグをaタグで囲みます。

<a href="#URLを挿入します#" target="_blank">
<img src="#画像が置いてある場所(URL)を挿入します#">
</a>

7. リスト

 いわゆる箇条書きです。

番号をつけたいときはolタグ、番号をつけないときはulタグを使用。要素はliタグで囲みます。

<ul>
<li>width :画像の横幅を指定する</li>
<li>height :画像の高さを指定する</li>
<li>list :画像が表示できない場合の、テキスト表示を指定</li>
</ul>

↓ブログエディタやCMSに入力すると

  • width :画像の横幅を指定する
  • height :画像の高さを指定する
  • list :画像が表示できない場合の、テキスト表示を指定

のように表示されます。

8. 表を作成

tableタグは表を作成します。
表(テーブル)の横一行をtrタグで定義し、見出しをthタグで、データをtdタグで囲みます。必修タグはこの8つ!の表も、タグ名をthタグ、タグのもつ意味をtdタグで記述しています。

<table>
<thead>
<tr><th>タグ</th><th>効果</th></tr>
</thead>
<tbody>
<tr><th>h</th><td>見出し</td></tr>
<tr><th>strong</th><td>文字を強調する</td></tr>
<tr><th>blockquote</th><td>引用</td></tr>
<tr><th>p</th><td>段落</td></tr>
<tr><th>a</th><td>リンクを入れる</td></tr>
<tr><th>img</th><td>画像を入れる</td></tr>
<tr><th>li</th><td>リスト</td></tr>
<tr><th>table</th><td>表を作成</td></tr>
</tbody>
</table>

おわりに

 以上、8つの必修タグをざざっと紹介しました。タグは使えば使うほど持つ意味がわかってきます。適切にタグを使い、読者に正しく&分かりやすいコンテンツを作るのは編集者のウデの見せどころ。タグを駆使して正しい内容を伝えていきましょう!

2015/11/15 20:55 文字色変更の方法を修正いたしました。