トワイライツ・ノーツ

本とWEBと、デザイン

Webサイトの文章をワンランクアップするためのHTMLの話

f:id:Kuichi:20180201031849j:plain

この記事ではWeb上でブログや記事の執筆など、コーディングには明るくないけれど比較的長文の文章を書く人向けに、押さえておくと良いHTMLタグとその特性をまとめてみました。

HTMLタグをつけることで作られる文書構造についてまとめてある本が意外と見当たらなかったので、それならとエントリーに書き起こしています。

投稿は各種サービスの管理画面からしか行わないという人は、HTMLというものを意識することはあまりないかも知れません。

知らなくても書けるのですが、HTML文書の特性を知っておくと、よりWebというシステムに即した書き方ができます。

実はHTMLには通常の文章とは少しだけ違う書き方のルールがあり、本来は装飾のためだけのものではありません。

HTMLは文章に意味付けを与えるためのものです。

適切な意味付けをして、人と検索エンジン両方に優しい文章を書きましょう、というのがこのエントリーの主題です。

そもそもHTMLとは

最初に少しだけ難しい話をしますが、さらっと読むだけで大丈夫です。

Webで文章や画像を投稿するときというのは、実はHTMLというものに変換されています。
HTMLは『HyperText Markup Language』の略称ですが、直訳はできない種類のものです。という訳で意味を分解してみます。

HyperText
直訳:文書を超えた文書。複数の文書を関連付けたり参照する仕組み。
Markup
文章構造の付加
Language
言語

非常に概念的な言葉なのですが、『複数の文章を関連付けたり、文書構造を付加するためにはある一定のルールがある』、ということだけ頭に入れておけばOKです。

HTMLタグとはなにか

パソコンでブログなどを閲覧しているときにCtrl+Uを押すと、よくわからない文字列がずらずら出てきますが、ソースコードと呼ばれます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>●●●のサイト</title>
</head>
<body>
  <h1>●●●のサイトについて</h1>
  <p>このサイトは●●●について説明しています。</p>
</body>
</html>

このソースコードをIE、Edge、Chrome、Firefox、Safariなどのインターネット閲覧ソフト(ブラウザ)が翻訳して、人間にとって見やすい形にしてくれているのです*1

さて、タグについてですが、

<title>●●●のサイト</title>
<h1>●●●のサイトについて</h1>
 <p>このサイトは●●●について説明しています。</p>

といった部分に注目すると、

<開始タグ>内容</終了タグ>

の形になっています。この<開始タグ>ないし</終了タグ>の部分が『HTMLタグ』です。

そして『内容』のようにテキストなどを挟んで使います。

注意点としては、タグの部分は必ず半角文字を使用してください。全角だとエラーが出てしまって動かないのです。

初心者だと、この部分を全角にしてしまって動かない……ということが結構あります。

HTMLタグのまとめ

あまり難しいことは考えず(タグで囲むのは管理画面の各ボタンで自動でできますから)、これだけぼんやり頭に入れておいてもらえればOKです。

  • 『開始タグ』『終了タグ』の部分にはそれぞれの文書構造を付与するための英字が入る(例:title、h1、p)
  • 『開始タグ』と『終了タグ』の間に内容を挟んで使用する
  • 『開始タグ』と『終了タグ』は概ねセットである*2
  • タグ部分は必ず半角文字を使用すること

基本のタグとその理解

ブログなどの管理画面だと、文章を入力する欄の上にこのようなボタンがついていると思います。
f:id:Kuichi:20170305153710j:plain
文章の見た目を変えたい部分の文章を選択してからこのボタンを押す、というようなことをすると、赤字になったり太字になったり、リストになったりしますよね。

しかしこれは見た目だけ変わっている訳ではなく、htmlのタグも変化しているのです。

それに伴って文章の意味も変化しており、『文章構造の付加』が行われています。

下記では、ブログや記事など、長文を書く際によく使うタグをまとめました。

見出しタグ:h1~h6(heading)

見出しの基本的な使い方

HTML文書には、文章のまとまり毎に『見出し』が必要です。

猫について
猫はとても癒される生き物だ。自由で気まぐれで、しかし甘える姿がたまらなく可愛い。我が家のミケもその例に漏れず、気分が乗らなかったら玩具には見向きもしてくれないし、機嫌が悪ければ撫でさせてもくれない。

という文章があった場合、見出しは『猫について』の部分になります。タグで囲うとこうです。

<h1>猫について</h1>
<p>猫はとても癒される生き物だ。自由で気まぐれで、しかし甘える姿がたまらなく可愛い。我が家のミケもその例に漏れず、気分が乗らなかったら玩具には見向きもしてくれないし、機嫌が悪ければ撫でさせてもくれない。</p>

しかし気を付けるべき点は、『見出し』は次に続くコンテンツがなければ『見出し』ではない、ということです。

たとえばwikipediaを見たとき『猫の概要』という見出しがあって、次になんの説明もなく真っ白だったら「えっ、なんで内容がないの?」って思いますよね。

必ず次に続く内容があってこその『見出し』なのです。
文章の強調とは区別すべきものなので、その点は注意が必要です。

見出しタグは階層構造を作る

見出しタグには、下記6つの種類があります。

  • h1
  • h2
  • h3
  • h4
  • h5
  • h6

上から順に上部階層、下に行けば行くほど下部の階層になります。

ここで重要なことは、見出しタグを付与するということは、文章の階層構造をつけるということ、という点。

以下のようなHTMLタグを付与したとします。

<h1>日本の花</h1>
<p>日本の花についての説明です。</p>

<h2>季節の花</h2>
<p>それぞれの季節の花についての説明です。</p>

<h3>春の花</h3>
<p>春の花についての説明です。</p>

<h4>4月の花</h4>
<p>4月の花についての説明です。</p>

<h5>4月上旬の花</h5>
<p>4月上旬に見られる花です。</p>

<h6>桜</h6>
<p>日本でよく好まれる花で、開花時期にはお花見が各所で催されます。</p>

その場合、下記のような階層構造が作られます。
f:id:Kuichi:20170305223420j:plain
見出しタグの数字が大きくなるほど、入れ子の階層が深くなっているのがわかると思います。

この入れ子構造が、HTML文書の基本です。

では、これに秋の花のキンモクセイを追加するとしたら、どうすべきでしょうか?

正解はこちらです。

<h1>日本の花</h1>
<p>日本の花についての説明です。</p>

<h2>季節の花</h2>
<p>それぞれの季節の花についての説明です。</p>

<h3>春の花</h3>
<p>春の花についての説明です。</p>

<h4>4月の花</h4>
<p>4月の花についての説明です。</p>

<h5>4月上旬の花</h5>
<p>4月上旬に見られる花です。</p>

<h6>桜</h6>
<p>日本でよく好まれる花で、開花時期にはお花見が各所で催されます。</p>

<h3>秋の花</h3>
<p>秋の花についての説明です。</p>

<h4>9月の花</h4>
<p>9月の花についての説明です。</p>

<h5>9月下旬の花</h5>
<p>9月下旬に見られる花です。</p>

<h6>キンモクセイ</h6>
<p>とても甘い香りがする、オレンジの小さな花です。</p>

f:id:Kuichi:20170305224635j:plain
なぜこの位置に入るかというと、『春の花』と『秋の花』は入れ子構造にならないからです。

『春の花』の中にコンテンツとして『秋の花』は入れません。
見出しのレベル的には同じと判断できます。

そういう理由でこの位置に、かつ『春の花』と同じ見出しレベルで『秋の花』が追加されることになります。
これは仮に『夏の花』『冬の花』を追加する場合でも同様です。

さて、ではもう一問。

上の文章に、下記のような文章を追加する場合はどうすべきでしょうか?

……以上のように少し目を向けるだけでも、日本にはたくさんの花が咲いています。
春夏秋冬、可愛らしい花から大きく艶やかな花まで、各季節の花を楽しむお役に立てば幸いです。

この文章を、単純に一番下、キンモクセイの文章の下に追加してしまうとこうなってしまいます。

<h1>日本の花</h1>
<p>日本の花についての説明です。</p>

<h2>季節の花</h2>
<p>それぞれの季節の花についての説明です。</p>

<h3>春の花</h3>
<p>春の花についての説明です。</p>

<h4>4月の花</h4>
<p>4月の花についての説明です。</p>

<h5>4月上旬の花</h5>
<p>4月上旬に見られる花です。</p>

<h6>桜</h6>
<p>日本でよく好まれる花で、開花時期にはお花見が各所で催されます。</p>

<h3>秋の花</h3>
<p>秋の花についての説明です。</p>

<h4>9月の花</h4>
<p>9月の花についての説明です。</p>

<h5>9月下旬の花</h5>
<p>9月下旬に見られる花です。</p>

<h6>キンモクセイ</h6>
<p>とても甘い香りがする、オレンジの小さな花です。</p>
<p>……以上のように少し目を向けるだけでも、日本にはたくさんの花が咲いています。
春夏秋冬、可愛らしい花から大きく艶やかな花まで、各季節の花を楽しむお役に立てば幸いです。</p>

f:id:Kuichi:20170310235417j:plain

階層的には文章がキンモクセイの下に入ってしまって、少しおかしい感じがしないでしょうか?

それは文章の内容が『h2季節の花』全体にかかるようなものだからです。よくこうやって文章の最後で総括することがあります。

この場合はどうしたら良いのかというと、一例としてはこうです。

<h1>日本の花</h1>
<p>日本の花についての説明です。</p>

<h2>季節の花</h2>
<p>それぞれの季節の花についての説明です。</p>

<h3>春の花</h3>
<p>春の花についての説明です。</p>

<h4>4月の花</h4>
<p>4月の花についての説明です。</p>

<h5>4月上旬の花</h5>
<p>4月上旬に見られる花です。</p>

<h6>桜</h6>
<p>日本でよく好まれる花で、開花時期にはお花見が各所で催されます。</p>

<h3>秋の花</h3>
<p>秋の花についての説明です。</p>

<h4>9月の花</h4>
<p>9月の花についての説明です。</p>

<h5>9月下旬の花</h5>
<p>9月下旬に見られる花です。</p>

<h6>キンモクセイ</h6>
<p>とても甘い香りがする、オレンジの小さな花です。</p>

<h2>季節の日本の花を愛でてみよう</h2>
<p>……以上のように少し目を向けるだけでも、日本にはたくさんの花が咲いています。
春夏秋冬、可愛らしい花から大きく艶やかな花まで、各季節の花を楽しむお役に立てば幸いです。</p>

f:id:Kuichi:20170311000446j:plain

見出しとして『h2季節の日本の花を愛でてみよう』を追加し、見出しレベルを引き上げて文章を入れました。

こうするとh2季節の花と同階層になり、そこにかかる文章として不自然でない階層構造になったかと思います。

見出しタグのまとめ
  • 見出しタグをつけると階層構造になる
  • 階層構造は入れ子になる
  • 構造を考えながら、文章を入れる場所を考える必要がある

長くなりましたが、以上がhtmlの中でも特に重要な見出しタグについてでした*3

このように見出しとその階層レベルで考えると、特に日記のような文章と比べた場合少し癖があるように感じるかも知れません。

けれど見出しタグによって階層構造ができることを理解すると、文章のアウトラインを考えながら書く癖がつきます。

それを意識するだけでもだいぶ論理的な文章が書きやすくなるので、ブログを書いているうちによくわからなくなってくる……という方はよろしければお試しください。

段落タグ:p(paragraph)

段落というのは意味のまとまり、という意味です。概ね見出しのあとにきて文章が入る(今まさにこの部分など)タグです。

本来の英語のparagraphは『1段落にひとつの考え(one paragraph, one idea)』と言われますが、日本語のブログなどの場合これはなかなかそぐわない考え方です。

というのは日本語の文章の場合、『間』のためにたくさん行間を取ったり、意味のまとまりだけではなく、単に区切りのいいところで改行し、行間を取るということもよくあるから。

実態としては改行ごとにpタグを用いているケースが非常に多いです。

元々htmlは英語圏の方が考案したものなので、見出しや段落の考え方などはそちらの文章の書き方になります。
しかし上述したように、日本語の文章にはあまり合わない考え方でもあります。

という訳で、本来の段落(paragraph)の意味は頭の片隅に置いておくとして、とらわれすぎなくても良いと思います。

段落タグのまとめ
  • 文章を入れるためのタグ
  • 本来的には『意味のまとまり』毎に使う

改行タグ:br(break)

これはそのままです。改行を入れたい箇所に使います。たとえばこういう感じです。

<h1>猫について</h1>
<p>猫はとても癒される生き物だ。<br>
自由で気まぐれで、しかし甘える姿がたまらなく可愛い。我が家のミケもその例に漏れず、気分が乗らなかったら玩具には見向きもしてくれないし、機嫌が悪ければ撫でさせてもくれない。</p>

こういう風に表示されます。
f:id:Kuichi:20170313002458j:plain
pタグの中で使ったり、上述したように行間を取るために改行を入れたりします。

見出しタグの中でも使用できます。

とはいうものの、昨今スマホサイトでページを閲覧することが多いので、使用しすぎには注意が必要です。

たとえばメールなどでよくやるような

<h1>猫について</h1>
<p>猫はとても癒される生き物だ。<br>
自由で気まぐれで、<br>
しかし甘える姿がたまらなく可愛い。<br>
我が家のミケもその例に漏れず、<br>
気分が乗らなかったら玩具には見向きもしてくれないし、<br>
機嫌が悪ければ撫でさせてもくれない。</p>

……というような頻繁な改行の仕方をすると、スマホでもその箇所で改行されてしまうので、文章が読みづらくなることも多いです。

また、行間を広く取るために

<h1>猫について</h1>
<p>猫はとても癒される生き物だ。<br>
自由で気まぐれで、しかし甘える姿がたまらなく可愛い。
<br>
<br>
<br>
<br>
我が家のミケもその例に漏れず、気分が乗らなかったら玩具には見向きもしてくれないし、機嫌が悪ければ撫でさせてもくれない。</p>

こういう風に連続して使うのも本来のhtml文法上はNGです(本当はそういうタグではないので)。

とは言ったものの、改行で間を取ることは普通によくあることです。

htmlにこだわっていて、かつできる人はCSS*4のmarginで間を取ったりするのが本来的には良い、と思っておくくらいで充分ではないでしょうか。

brタグのまとめ
  • 改行を入れるために用いる
  • 使用しすぎるとスマホなどで読みづらくなることがある

リンクタグ:a(anchor)

上記で『htmlとは複数の文書を関連付けたり参照する仕組み』と言いましたが、html文書を参照するためのタグです。

よく『リンクを貼る』などと言いますし、仕組み自体は馴染みがあるのではないでしょうか。

Twitterやline、facebookなどでサイトのアドレスを共有されることがあると思いますが、その際に用いられます。
タグの書き方はこうです。

<h1>猫について</h1>
<p>猫はとても癒される生き物だ。<br>
自由で気まぐれで、しかし甘える姿がたまらなく可愛い。我が家のミケもその例に漏れず、気分が乗らなかったら玩具には見向きもしてくれないし、機嫌が悪ければ撫でさせてもくれない。</p>
<p><a href="sample.html">我が家の猫日記一覧</a></p>

f:id:Kuichi:20170313004647j:plain
『href="sample.html"』とありますが、『sample.html』の部分を好きなアドレスに置き換えると、aタグで挟んだテキストにリンクが貼られます。

また、リンクタグはテキストの他、画像なども挟むことができるので(画像タグは後述)、画像にリンクを貼るということもできます*5

また、これだけだとこのリンクをクリックすると『我が家の猫日記一覧』ページに飛んでしまいますが、別のタブとして開きたい場合もあると思います。

その場合はこのように書きます。

<p><a href="sample.html" target="_blank">我が家の猫日記一覧</a></p>

これで現在開いている『猫について』ページの他に『我が家の猫日記一覧』というページが別のタブで開くことになります。

『href="sample.html"』と『target="_blank"』は半角空白でないと動かないのでご注意ください。

よくある使い分けとしては、

  • 自身のブログなどの同サイトにリンクを貼る場合は『target="_blank"』を使用しない。
  • 外部サイトには『target="_blank"』を使って、用が済んだら自サイトに戻ってきてくれることを期待する

というものです。

個人的には文中で別のサイトなどを参照する必要がある場合以外は『target="_blank"』は指定しなくても良いのではないかなあと思うのですが、意識して使い分けると良いと思います。

リンクタグのまとめ
  • テキストや画像などにリンクを貼ることができる
  • 新しいタブを開きたい場合は『target="_blank"』を使う

画像タグ:img(image)

画像を貼るためのタグです。

html上での書き方はこうなります。

<img src="sample.jpg" alt="サンプル画像です">

『src="sample.jpg"』で画像のアドレス、『alt="サンプル画像です"』で画像の説明を入れます。

特に理由がない限り、altで説明文を指定しておくと良いです*6

すると電波が途切れたなどの事情で画像が表示されない状況でも、閲覧者はそこになんの画像があったか知ることができます。
こういう感じです。

<h1>猫について</h1>
<img src="sample.jpg" alt="我が家のミケの写真">
<p>猫はとても癒される生き物だ。<br>
自由で気まぐれで、しかし甘える姿がたまらなく可愛い。我が家のミケもその例に漏れず、気分が乗らなかったら玩具には見向きもしてくれないし、機嫌が悪ければ撫でさせてもくれない。</p>
<p><a href="sample.html">我が家の猫日記一覧</p>

f:id:Kuichi:20170313012558j:plain

こうしておくと、画像が表示されなくても『猫の写真なんだな』と理解することができます。

また、画像内に文字が含まれる場合はそれもaltに記載しましょう。
特に見出しに画像を用いる場合は、altを設定しないとgoogleなどの検索エンジンに見出しのテキストを認識してもらえない、ということも起こってしまいますので、注意が必要です*7

ちなみに目の見えない方はサイトを閲覧する際音声読み上げ機能を使っています。
これはaltも読み上げるので、適切なaltを入れておくとそういった方たちへの配慮にもなります。

以上のように、地味なのですがaltはかなり重要な要素。できれば入れておいた方が無難です。

ただし、単純な装飾のための画像(アイコンやワンポイント画像など)の場合は特にこれといった説明はないかも知れません。その場合は『alt=""』で構わないようです*8

画像タグのまとめ
  • 画像を貼るために使う
  • 適切なalt属性を指定することは、画像が読み込めない・見られない状況下の配慮となる

強調タグ:strong(strong)

文章中で特に重要な部分に用いるタグです。ブラウザ上では太字で表示されます*9
使い方としてはこんな感じです。

<h1>猫について</h1>
<p><strong>猫はとても癒される生き物だ。</strong><br>
自由で気まぐれで、しかし甘える姿がたまらなく可愛い。我が家のミケもその例に漏れず、気分が乗らなかったら玩具には見向きもしてくれないし、機嫌が悪ければ撫でさせてもくれない。</p>
<p><a href="sample.html">我が家の猫日記一覧</p>

f:id:Kuichi:20170313041157j:plain
このようにstrongタグを使った部分が太字になっています。

ここで上述の『特に重要な部分』というところを思い出してください。
『猫はとても癒される生き物だ』という部分を強調したということは、それが特に重要だという意味付けがされたということです。

よって、文章の意味付けとして『猫はとても癒される生き物』というのが特に言いたいことである、と判断されるということになります。
実際続く文章としては甘える姿の良さ、気まぐれさと猫の癒しポイントと思しきことを書いています。

以上のことからわかるように、strongタグは無暗やたらに使うタグではありませんし、まして、単にそこを太字にして目立たせたいからという理由で使うものでもありません

また、見出しタグの中でも使用できないので(見出しタグを更に強調するという意味になってしまい、過剰です)、その点は注意が必要です。

補助的なタグではあるものの、あまり多用し過ぎるとスパム扱いになる可能性もあるので、使う場所はよく考えた方が良いと思います。

強調タグのまとめ
  • 見た目としては太字になる
  • 文章中で特に重要な部分に使う
  • 見出しタグの中では使えない
  • 無暗に多用するとスパム扱いになる可能性もある

順序なしリスト:ul(unordered list)

特に順序関係なく項目を並べただけのリストです。

書き方としては下記のように、『<ul></ul>』の間に『<li>リスト項目</li>』を入れて使います。

<h1>果物</h1>
<ul>
  <li>リンゴ</li>
  <li>バナナ</li>
  <li>ミカン</li>
</ul>

ブラウザ上ではこのように先頭に『・』が自動でつきます。
f:id:Kuichi:20170313043712j:plain
よく文字として「・(中黒)」を先頭に書いてリストとして並べている文章を見かけますが、htmlの文法としては誤りです。

また、『<ul></ul>』の直下には『<li>リスト項目</li>』しか書くことができません。
よってこのような書き方はしてはいけません。

<h1>果物</h1>
<ul>
  <p>ぶどう</p>
  <li>リンゴ</li>
  <li>バナナ</li>
  <li>ミカン</li>
</ul>

しかし、『<li>リスト項目</li>』の中にはなにを入れても大丈夫なのです。
だから次で書くようにbrタグを入れたり、ulを更に入れ子にしたりということもできます(この記事の目次もそうです)。

<h1>果物</h1>
<ul>
  <li>リンゴ<br>
  (木になる果物)</li>
  <li>バナナ
    <ul>
      <li>台湾バナナ</li>
      <li>モンキーバナナ</li>
      </ul>
  </li>
  <li>ミカン</li>
</ul>

f:id:Kuichi:20170313045403j:plain
上記では書きませんでしたが、pタグも入れられます。
『<ul></ul>』の直下に『<li>リスト項目</li>』しか書くことができない、という点にさえ気を付ければ結構使い勝手の良いタグです。

順序なしリストタグのまとめ
  • 項目に特に順序がない場合に使う
  • 『<ul></ul>』の直下には『<li>リスト項目</li>』しか書くことができない
  • 『<li>リスト項目</li>』の中には基本的になんでも入れられる

順序付きリストタグ:ol(ordered list)

ulが順序なしリストタグなのに対し、こちらは順序つきのリストタグです。

たとえばこんな風に使います。

<h1>人気のお菓子トップ3</h1>
<ol>
  <li>マカロン</li>
  <li>チョコレート</li>
  <li>飴</li>
</ol>

f:id:Kuichi:20170314021943j:plain
先頭に数字がつきましたが、このように項目の順序が重要なリストに使います。

この例だとマカロン1位、チョコレート2位、飴3位といった意味合になります。

もうひとつの例として、下記のように手順を書く場合もあります。

<h1>神社等の柄杓の使い方</h1>
<ol>
  <li>柄杓で水をすくい、まずは左手を洗う</li>
  <li>柄杓を左手に持ち替え、右手を洗う</li>
  <li>柄杓を再び右手に持ち替え、左手に水をためて口をすすぐ</li>
  <li>柄杓を縦にし、持ち手を洗う</li>
</ol>

f:id:Kuichi:20170314022954j:plain

『項目の順番』が重要で、序列リストはこのような使い方をするタグです。

序列なしタグと同様、olの直下にはliのみしか入れられませんし、他のタグを入れ子にすることもできます。

逆に順不同な項目については、上記の序列なしリストタグ(ul)を使いましょう。

序列リストタグのまとめ
  • 項目の順序が重要な場合に使う
  • 『<ol></ol>』の直下には『<li>リスト項目</li>』しか書くことができない
  • 『<li>リスト項目</li>』の中には基本的になんでも入れられる

定義リスト:dl(definition list)

項目と説明をセットにしたリストです。
項目はdt、説明はddタグで囲います。

このような感じです。

<h1>果物について</h1>
<dl>
  <dt>リンゴ</dt>
  <dd>赤くて丸くて甘酸っぱい。</dd>
  <dt>バナナ</dt>
  <dd>黄色くて長くて甘い。</dd>
  <dt>ミカン</dt>
  <dd>オレンジ色で丸くて甘酸っぱい。</dd>
</dl>

f:id:Kuichi:20170316000610j:plain
dlタグの直下にはdtタグとddタグしか入れることはできません。ulタグやolタグのliタグと同じです。

dtタグの中には基本的に文字だけですが、ddタグの中にはリストなども入れらます。

要するに項目+説明でセットになっていれば良いので、結構自由に使えます。

たとえば、

<h1>遠足についてのQ&A</h1>
<dl>
  <dt>Q.おやつは何円までですか?</dt>
  <dd>A.300円以内です。消費税はおまけして300円に入れなくて良いです。</dd>
  <dt>Q.バナナはおやつに入りますか?</dt>
  <dd>A.入ります。お母さんに聞いて、ちゃんとひと房分でお金の計算をしましょう。</dd>
  <dt>Q.おやつにおすすめのものはなんですか?</dt>
  <dd>A.暑い時期なので溶けたり暑くて駄目にならないものがおすすめです。</dd>
</dl>

f:id:Kuichi:20170316001638j:plain
こういうQ&Aリストにも使うことができます。

見出しというほどではないけれど、項目+説明で並べたい、ということは少なからずありますから、覚えておくとかなり活躍するタグだと思います。

引用タグ:quote(blockquote、q)

近年、著作権を守るために正しい引用をしましょうという流れが出てきました。

自分の権利を守るためにも、一度引用の仕方が正しいか振り返ってみると良いと思います。

引用の基本的なやり方

引用の仕方というのは流儀が細々とあるのですが、Web上で行うのであれば最低限、下記4点は留意すべきでしょう。

  • 引用の必然性がある
  • 引用部分が主とならない
  • 出典を明らかにする(サイトなら引用元へのリンクをつける)
  • 第三者から見て本文と引用部分を明確に区別できる

HTMLでの引用タグというのは、特に「出典を明らかにする」「本文と引用部分を明確に区別する」という2点を検索エンジンに伝えるためにあります。

引用タグの使い方

引用タグにはいくつか種類があります。

  • 短い文を引用する:q <quote></quote>
  • 長文を引用する:blockquote <blockquote></blockquote>
  • 出典を書く:cite

短文を引用する場合は下記のようになります。

<q cite="http://www.aozora.gr.jp/cards/000148/files/789_14547.html">吾輩は猫である。名前はまだ無い。</q>という書き出しは非常に有名です。Twitterでもこの書き出しをもじって遊んでいる呟きが多く見られますし、中には思わずクスリと笑ってしまうものも。

f:id:Kuichi:20180201013044j:plain

サイトの表示上はこんな風になります。
特にCSS等のが設定されていない場合は、画像のようにquoteタグで囲んだ部分に見た目上自動で「」でくくられた以外に変化はありません。
けれど、引用部分にquoteタグにcite属性と出典元のURLを記載設定することで、検索エンジンにはその部分が引用であること、どこから引用されているかが伝わっています。

長文を引用する場合はこのようになります。

<blockquote>
吾輩は猫である。名前はまだ無い。<br>
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕つかまえて煮[f:id:Kuichi:20180201014544j:plain]て食うという話である。<br>
<cite>引用:<a href="http://www.aozora.gr.jp/cards/000148/files/789_14547.html">吾輩は猫である</a></cite>
</blockquote>

f:id:Kuichi:20180201014555p:plain

quoteタグと違い、特にCSS設定をしない場合でも、他の文章よりインデントが取られます。
この場合のciteの使い方はタグとして用い、出典元のURLとタイトルを示しています。

citeの使い方はquoteのように属性として、blockquoteのようにタグとして、と使い分けができるようになっています。

いずれにせよ、出典元を示すという性質は変わりません。

仮にciteが使えなくても、引用をする場合は必ず出典を付記するようにしましょう。

引用タグのまとめ
  • 長文を引用する場合と、短文を引用する場合で出典元の書き方などが少し異なる
  • 必ず出典元を記載する
  • 引用する場合は、引用した文章が主にならないように十分に留意する。

HTMLのまとめ

という訳で、文章を書く上で必要になる主なタグについて解説しました。

特に見出しと文書構造の部分については、日本語の書き方と比べて少し癖があるように思いますが、根幹となる考え方は下記です。

  • 文章の主題(主語)を常に明確にする
  • 適切な見出しを付ける
  • 文書構造を意識する
  • 文章を常に分類(見出し、本文、リスト、引用、リンク等)する
  • 引用など出典元の記載には留意する
  • 極力、文書構造などから適切なタグをあてる

要するに論文――それも英語のものに近いものです。

もちろん、正しいタグ付けをすれば即座にSEOに効くという訳でもなく、むしろ文書構造的にはめちゃくちゃなのに、検索順位は高いというようなこともあります。

ただ、きちんと文書構造を意識しながら書く癖をつけることで、人間だけではなく検索エンジンにも文章の構造を正しく伝えることに繋がります。
また、タグを理解していると、文章を書いた人がどの程度HTMLやWeb制作の知識があるか測るものさしにもなるでしょう。

冒頭でも述べた通り、意外にもHTMLタグと文書構造の関連をまとめている本というのはどうも見つかりませんでした。

よくあるのはいわゆるインパクトのある見出しの付け方とか……つまりHTMLというよりはコピーライティング的な要素を解説した本ばかりです。
それではちょっと不十分だな、と考えたのがきっかけでした。

上記のタグを知っていれば、少なくともブログや論文といった文章を書くのには十分だと思います。
もしよければ活用してみてください。

関連書籍

タグについては、以下のような本を教科書にサンプル通りに作ると、なんとなくタグ付けの仕方がわかります。
ソースコードはこんな風になっていると知っておくと、ブログやサイトの記事でタグ付けが変になっても直しやすいので、興味が出てきたら一冊やってみるのをおすすめします。

いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)

いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)

HTML&CSSとWebデザインが 1冊できちんと身につく本

HTML&CSSとWebデザインが 1冊できちんと身につく本

*1:もっと細かく言うとXHTMLという類似言語があったりCSSで各種装飾をしているが、このエントリーではあくまでHTML文書の構造について述べるので触れない。

*2:html5では終了タグは省略して良いことになっているが、混乱を招くのでここではセットとする

*3:本当は文法として見出しレベルを飛ばさない(たとえばh1の次にh3やh5を書かない。必ず見出しレベルはh1→h2→h3…と順につけていく)という決まりもある。しかしブログサービスやテンプレートによっては嫌でも飛んでしまうこともあり(現にはてながそう。記事タイトルがh1で、大見出しがh3と設定されてしまっている)、意図せず順番を飛ばしてしまうことは起こり得る。また、どうしても番号を飛ばしたいというケースも頻度が高い(主にデザイン上の理由だが)。そのため厳密に守ることは難しい場面も多いだろうし、このエントリーはガチガチにコーディングする人向けにはしていない。そのため本文中ではそのことについては扱わない。

*4:CSS(Cascading Style Sheets)と言って、html文書を装飾するために用いる言語。世の中のサイトはほぼすべてこれで装飾されていると思って良い。このページでは特に取り扱わない。

*5:html5からはブロック要素と呼ばれるものもaタグで囲うことができるようになったが、このエントリーの本旨ではないので省略。

*6:本当はaltだけではなくtitleというものもあるのだが、altとの使い分けが微妙な上に、ツールチップ(マウスホバーした際に表示されるもの)でしか閲覧者が見ることができないため、マウスホバーという概念がないスマホやタブレットではアクセシビリティとして良くはない。ただし今後そういったデバイスの多様化に応じたなんらかの特殊属性として機能追加されるかも知れない。

*7:こういったことはSEO(検索エンジン最適化:Search Engine Optimization)で調べるとたくさん情報が出てくるので、興味があれば調べると良いと思う。画像よりはテキストの方がSEO的には良いと言われるが、altがきちんと設定されていればそれほど影響はないとの説もあり、情報は錯綜中。

*8:個人的には最近流行っている文中のイメージ画像やアイキャッチ画像にはaltは特に必要ないのではと思う。というのは単なる文章としてみた場合、『alt="アイキャッチ:頭を抱えている男性"』とか『alt="アイキャッチ:楽しそうにしている子供たち"』などとという表示はどちらかと言えばいらないのではという気がしている。しかし画像が読み込めない状況を考えると、『なんか画像があるみたいだけどなんの画像かわからない』というのはストレスには違いないだろうし、少なくとも『アイキャッチ』程度はaltに設定しておく方が親切なのかも知れない。

*9:太字にするタグとしてはbタグ(bold)もあるが、googleはどちらでも同じ意味という旨の発表をしているので、使い分けはさほど重要ではない模様。よって本文ではstrongのみ紹介する。