ホームページの計画立案が終了し、ローカルディレクトリにホームページと同じ構造のファイルやディレクトリを作ったら、実際にウェブページを書いてみましょう。
そのウェブページは、「表」と「裏」でできています。ブラウザに表示されるウェブページが「表」ならば、テキストエディタで作成するHTML文書は「裏」です。
見た目が美しいウェブページも、その裏側は単なる文字と「タグ」だけでできているHTML文書です。
ホームページの作成は、「表」のウェブページを「裏」で作成していくこと、つまり「タグ」を使って文字や画像などを「表」に表示させていきます。
ところが、中にはウェブページに表示する役割がないタグもあります。
検索エンジン（機械）のためのタグ
ウェブページを構成するタグには、２種類あります。
「ゼロからのホームページ作成＃1｜誰でも無料でホームページが作れます」で概略を書きましたが、HTML文書は上から順に、
- ドキュメントタイプ＜!doctype html＞
- htmlタグ
- headタグ
- bodyタグ
の４つで構成されています。head、bodyは２のhtmlタグで囲まれた中に書かれるので、htmlタグの終了タグは、HTML文書の文末になります。
そして、このうちブラウザに表示されるのは、4のbodyタグで囲まれたところだけです。
ホームページは、そのページを訪れるユーザー（人）だけが見ているわけではありません。Googleなどの検索エンジン（機械）もそのページを読んでいて、ユーザーが訪れやすいように検索エンジンに情報を伝達しています。
上記4つのタグのうち1〜3は、主に検索エンジン（機械）が読むための情報を記入するタグです。そして、ここに書かれた情報はほとんどがブラウザに表示されません。
これらの情報のためのタグについては、「ゼロからのホームページ作成＃1｜誰でも無料でホームページが作れます」で軽く触れたので、ここでは割愛します。
一方、ユーザー（人）が閲覧するためにウェブページに文字や画像を表示させるタグには、どんなものがあるでしょうか？
ブラウザに表示させるためのタグ
ここでは、ウェブページを作成するための最低限のタグを紹介します。
タグの種類は非常にたくさんあり、ここで全てを紹介することはできないので、必要に応じネットで検索する癖をつけておくと良いでしょう。
見出しのhタグ
どのウェブページにも入っている必須のタグはhタグ、すなわち見出しタグです。英語のheading（見出し）を省略しています。
Wordで文章を作成するとき、表題や見出しを設定すると思いますが、それと同じ役割をするのがhタグです。
hタグは、
<h1>文書タイトル</h1>のように、開始タグ＜h1＞と終了タグ＜/h1＞で挟むようにして書きます。
hタグは、その役割からh1〜h6まであり、h1タグはフォントサイズが最も大きく、h6は最も小さいフォントになります。
- h1タグ：ウェブページのタイトル（表題、または大見出し）
- h2タグ：中見出し、記事の各章の見出し
- h3タグ：小見出し、各章の要点を示す見出し
- h4〜h6タグ：超小見出し、h3タグ内を補足する見出し
hタグは、そのフォントサイズに応じた上下余白として、１行分が自動で設定されます。h1タグのフォントサイズが20ピクセルだったとしたら、上にも下にも20ピクセル分の余白ができます。
段落のpタグ
Wordなどでも文章を書く場合、見出しごとに段落を設定すると思いますが、それと同様Webページ上での段落を分けていくのがpタグ、paragraph（段落）のことです。具体的には、以下のような感じになります。
See the Pen
no1_030122 by Kazy (@uraflt)
on CodePen.
上図の「吾輩は猫である。名前はまだ無い。」という文章で一つの段落、その下の文章は、また別の段落となっています。
それぞれをpタグで囲むことにより、段落を２つに分けています。そして、hタグ同様、pタグ同士の間は、１行分の余白が自動で設定されます。
改行のbrタグ
brタグは改行するためのタグで、「Break」の略。単独で使用できるVOID要素で、終了タグ＜/＞は不要です。
WordなどでReturnキーを押すと改行できるように、pタグで囲まれた一つの段落内で改行したい時に使用することができます。
pタグによる段落変更は約1行分の余白があきますが、brタグによる改行は、余白は開かずに次の行頭へ移動します。
HTMLでの改行については、ネット上で様々議論されていますが、現時点ではpタグとbrタグによる改行の意味を把握しておけば良いでしょう。
画像のimgタグ
文字以外に画像をウェブページに表示させたい時に使うタグが、imgタグです。imgタグも、終了タグがないVOID要素です。
imgタグは、
<img src=”images/sample.jpg” alt=”サンプル画像”>のように、タグ内に画像のある場所をsrc=””内に、その画像が何を表しているかをalt=””に書きます。srcやaltのように、タグ内に記入するものを「属性」といいます。
imgタグにおいて、alt属性は必須の属性です。その役割は、
- 万が一、HTML要素となるイメージがブラウザに表示されない場合に、文字で表示する
- ウェブページを読み上げる際、イメージ表示の代わりにalt属性の文字を読み上げることで、視覚に障害がある方でもウェブページを読むことができる
- 検索エンジン（機械）が、イメージの内容を的確に把握する
特に、視覚に障害がある方でもWebページが読めるようにすることは、ウェブ・アクセシビリティにおいて、重要なことです。
内部・外部リンクのaタグ
通常、ホームページは複数のページからできています。
ユーザーが自由にホームページ内を行き来できるように、それぞれのページをリンクさせるためのタグが、aタグ（「Anchor（錨）」の略）です。
また、外部サイトを引用するためにリンクを貼ることもあり、この場合もaタグを使用します。
aタグは、
<a href=”https://www.myshop.com/shirts/mens.html”>Men’sシャツのページ</a>のように書きます。
aタグには、必ず「href」というリンク先のアドレスを記入する属性を使用し、リンクさせたい文字（ここでは「Men’sシャツのページ」）の後に、＜/a＞で閉じます。
ブラウザ上では、リンクさせたい文字（ここでは「Men’sシャツのページ」）に自動でアンダーラインが引かれるので、
「ここは、別ページへリンクしているな」
ということがわかります。
また、target属性は、リンク先の文書を開く先を指定するもの。上記のように、特にtarget属性がない場合、そのまま同じウィンドウ上でリンク先ページに変わりますが、
<a href=”https://www.myshop.com/shirts/mens.html” target=”_blank”>Men’sシャツのページ</a>と「target=”_blank”」という属性値を追加すると、別ウィンドウでリンク先文書を開きます。
target属性の属性値には、その他にも
- _self
- _parent
- _top
がありますが、使用するのはほぼ「target=”_blank”」のみくらいです。
リンクについては、あらためて内部リンクに関することで詳しく説明します。
divタグとspanタグは範囲のタグ
次は、最も多用すると思われるdivとspanタグについて。
どちらも範囲を設定するタグですが、範囲の大きさで使い分けます。簡単にいうと、
- divはブロックレベルの範囲（「division（仕切り、境界）の略」）
- spanはより狭い、文章の中の一部分（「範囲、長さ、期間」を意味する英語）
を設定するもの、と覚えれば良いでしょう。
具体的に、CodePenを使って説明します。
See the Pen
div_span_tag by Kazy (@uraflt)
on CodePen.
上記の「HTML」「CSS」「Result」タブをクリックしながら、見比べて下さい。
前回引用した、夏目漱石の「吾輩は猫である」の冒頭部分のHTMLで、h1に色を指定し、文章をpタグで段落に分けたものです。
今回は、divとspanの違いがわかるように、上記CodePenに追加してみました。
ブロックレベルのdivタグ
この中で、h1より下の文章全体をdivで囲み、ブロックレベルで、
- 囲んだ部分に枠線を追加
- 枠線内の上下左右に一文字分の余白を追加
するよう、CSSで指示してあります。CSSとHTMLをリンクさせるため、クラス名を「block-1」として特定しました。
divで囲んだブロック前後（ブラウザ上では上下）には、必ず改行されます。
文章の一部分のspanタグ
一方、HTML内文書冒頭、pタグで囲まれた「吾輩は猫である。名前はまだ無い。」のうち、「吾輩は猫である。」のみspanで囲み、「soushoku」というクラス名をつけ、文字色「青」を指定しています。
そして、ブラウザ上ではpタグ内の「吾輩は猫である。」だけ、文字が青色になっているのがお分かりになると思います。
もし、pタグ内全ての文字色を青にしたいのなら、pタグにスタイルを追加すれば良いのですが、このように「一部分だけ」装飾するときに使うのが、spanタグです。
spanはインライン要素のため、タグの前後で改行されることはありません。
divタグとpタグはどう違う？
では、段落を区切るpタグとの違いは、どう捉えれば良いでしょうか？
それは、それぞれの名前の由来を考えると、わかりやすいかもしれません。
- div：deivision（仕切り）
- p：paragragh（段落）
のように、ページ内にブロックを作りたいときに使用するのがdiv、あくまで文章の段落を分けるのがpタグということです。
箇条書きにはulとolの2種類のタグがある
次に紹介するのは、ul・olタグです。2つの違いは、
- ul：順序のない箇条書き（「Unordered List」の略）
- ol：順序ありの箇条書き（「Ordered List」の略）
ということ。
具体的には、olタグを使用した場合は、上から順に番号が振られ、ulタグは順序は関係ないので、黒丸（・）でリスティングされます。
箇条書きの各項目は、ul・olタグ内に、liタグ（「List item」の略）で書きます。
この違いをCodePenで表示してみます。
See the Pen
ul_ol_tag by Kazy (@uraflt)
on CodePen.
色の箇条書きは、特に順序は関係ないのでul、一方野球のオーダーのような箇条書きは、順序が変わると意味まで変わってしまいそうなので、olとしておきました。
ul・olの使い分けは、その意味を検索エンジンが読み取るので、SEO的にも重要です。そのため、きちんと使い分けることが大切です。
ナビゲーションでも使用されるul
実は、ナビゲーション（メニュー）にも、箇条書きのulを使用します。これも、メニュー欄に記載された各項目は、順序なしの箇条書きであることを示します。
これも検索エンジンに、「ナビゲーションですよ〜」と認識してもらうためのものです。
ナビゲーションは、通常ホームページの上部にメニューとして表示されるものです。そのため、箇条書きの黒丸を削除したり、横一列に並ぶよう指示するなど、スタイルシートで装飾することが必要になります。
ここまでのまとめ
- HTML文書では、文字や画像を表示させるタグと検索エンジンに情報を伝えるタグがあります
- 最低限必要なタグは見出しのhタグ、段落のpタグ、改行のbrタグ、画像のimgタグ、リンクのaタグです
- divはブロックレベルの範囲、spanはより狭い文章の中の一部分を示すタグです
- 箇条書きのul、olタグはSEOにも影響するため使い分けを正しくします
- 箇条書きのタグはナビゲーションでも使用します
次回は、この記事でも出てきたスタイルシート（CSS）についてです。
コメント