前回のHTMLを学んで得られるスキルと学習の意義を読んだ上でこちらを覗かれた方は、これから頑張って学習していきましょう。もし前回の記事を読んでいない方で、HTMLがよくわかっていない方がいれば前回の記事を見てくることをおすすめします。今回は主要タグの使い方です。
HTMLでは、コンピュータに情報を識別させるために、タグとよばれるものに要素を入れ、人間が識別する情報がどのような目的で使われているかという情報を読み取るようになっています。
また、タグの種類は数十種類あり、見せる部分の文章によってタグを使い分けなければなりません。今回はその中でも主要なタグを例にし、いままで私たちが見てきたウェブサイトが、どのような要素で構成されていたのかということを皆さんに知ってもらい、HTMLの面白さというのを知ってもらいたいと思います。
要素とタグの違い
まずは要素とタグの違いを説明します。
よく知らないうちは「同じじゃん」と思ってしまいますが、実は異なるものなんです。
タグというのは <html></html>のように<>で区切られた開始点と終点のことを指します。
それに対し、要素というのは開始点<html>から終点である</html>で挟まれた全ての範囲のことを指します。
図説すると次のようになります。
これで皆さんもタグと要素の言葉の使い分けができるようになりましたね。
主要なタグ
<!DOCTYPE html>
まずはどのプログラミング言語でも重要となる宣言についてです。HTMLは現在HTML5というバージョンが定められており、主流となっています。
HTMLは、バージョンごとに宣言方法が異なっており、宣言を元にバージョンを参照します。そのバージョンで使用できるタグや属性などの要素などが変化し、記述方法も異なってきます。
HTML5の宣言は<!DOCTYPE html>という形で宣言をしますが、その特性からこれは必ず最上部に配置しなければならない要素なので、必ず最上部に配置してください。
htmlタグ
HyperText Markup Languageの頭文字をとってHTMLと言います。HTMLタグはコードがHTMLであるということを宣言するためにあります。<!DOCTYPE html>を除いた全ての要素（タグ）は<html>タグに入れてあげることで「この中身はhtmlの文章で成り立っているよ」ということを宣言します。これは文章の最初と最後の部分にある必要があります。
また、htmlタグでは、lang属性を用いて文書内で使用している言語を指定しておくことが推奨されています。
指定の方法は開始タグ内にlang=”ja”というように書き込むことで指定が可能です。具体的には <html lang=”ja”> というようになります。
headタグ
headタグはメタデータの集まりを示す要素です。
headタグはhtmlの中に入れる主要なタグの一つです。ここに書かれた情報は基本的に訪問者からは見えない情報（メタデータ）を含みます。htmlタグに入れるtitleやサムネ画像などは例外として訪問者に見える情報になりますが、基本的には見えない情報を格納する場所です。
ここに格納するデータの例としては以下のようなものがあります。
- 文字コードを示す要素
基本的にはUTF-8を使用します。UTF-8は多言語に対応したUnicordの一種です。
ほかにもShift_JISやISO-2022-JPなどがありますが、こちらは日本語のみを想定しているものなのでUTF-8以外を扱うことはほとんどありません。
<meta charset=”utf-8″> - CSSファイルを読み込む
<link rel=”stylesheet” href=”CSSファイルのURL” /> - JavaScriptファイルを読み込む
<script src=”JavaScriptファイルのURL”></script> - メタディスクリプション
メタディスクリプションは検索結果の画面でタイトルの下に表示されるページの説明です。
<meta name=”description” content=”ページの内容を表す文章”> - 文書タイトル
タイトルタグを使って編集したタイトルはブラウザのタブなどの名称になります。
<title>これはタイトルです</title> - SNSシェア時のタイトル・サムネイル
<meta property=”og:title” content=”ページのタイトル” />
<meta property=”og:image” content=”サムネイル画像のURL” />
このような情報はbodyタグには書くことができませんのでheadタグを用意して書いてあげる必要があります。特にCSSやJavaScriptなどの外部ファイルの読み込みができるかどうかによってデザインの幅が大きく変化しますのでしっかりと覚えておくようにしましょう。
bodyタグ
これまでに紹介してきたhtmlタグ・headタグ・bodyタグがHTML文書を作る３大構成分子です。
bodyタグは実際に訪問者が目に触れる部分を構成する要素です。皆さんが読んでいるこの文章もbodyタグ内に書かれた文章になります。
通例として、headタグの後にbodyタグを置いて使うこととされています。また、bodyタグは１つのhtml文書において１つだけ使用することができます。
Bodyタグ内で使用することができるタグは数多くありますが、それらについては数が多いため初学者に一度で覚えろと言ってもすぐに覚えられる量ではないため、本記事では取り扱いません。本HTML連載記事の学習の進行に合わせて知識として得られるようにしていきます。
hタグ
hタグは見出しを示すタグです。
例えば本記事の「HTML学習②：主要タグの使い方 見出しや段落タグの使い方も解説」というタイトルは”h1″というタグが使われています。
タグはh1-h6まで定義されており、数字１が最も大きい見出しで、h6が最も小さい見出しとなります。
一般的にはh1が大見出し、h2が中見出し、h3からは小見出しと呼ばれることが多いですね。基本的なブログの場合にはサイトの最上部にあるタイトルがh1で、それ以外はh2-h6の見出しで対応する場合が多いですね。
SEOを気にするならば、h2の次にh3ではなくh4を置くというように、番号を飛ばして使用するというようなことは推奨されません。このことについて、特に気にするなという方もおられますが、サイトデザインがぐちゃぐちゃになり、読み手も構成が分かりづらくなってしまいます。
細かい部分についてのSEO対策は不明瞭な点が多いので、SEO的に不利になってしまうことが考えられる記事の書き方は避けておいた方がよいでしょう。
pタグ・blockquateタグ
pタグは開始点から終点までのひとつのまとまりを、ひとつの段落として認識させる役割を持ちます。pタグのpはParagraphのpなので覚えやすいですね。通常、pタグと次のpタグの間は段落が一つ分空けられます。
blockquateタグは引用についてを示すタグで、一般的にpタグを中に入れて使用します。引用元のサイトURLはciteを使って指定します。具体的な書き方は以下のようになっています。
上記のコードは「ほほえみIT保育園」のトップページからの引用分です。
blockquate属性を使うことで、ここは引用分ですよということを検索ブラウザにアピールして、評価の下がりやすい”パクリ”ではないということをアピールします。
brタグ
brタグは改行を扱う要素です。テキスト・画像・リンクなど、改行をしたいときに使います。
ただし、ユーザーごとにフォントサイズ・ウィンドウのサイズが異なるため、デザイン目的で使うことは推奨されていません。
aタグ
aタグはリンクについてを扱う要素です。
タグ内にhrefという属性を使うことで指定したリンクへのアクセスを可能にします。
<a href=”https://webells.net/”>私たちのホームページへのリンクです。</a>
と入力すれば 私たちのホームページへのリンクです。 というように文字部分がリンクになります。
aタグで使用することのできるグローバル属性は以下の通りです。
- href…リンク先のURLを指定
- rel…リンク先のリソースの位置付けを指定
- type…リンク先のMINEタイプを指定
- target…タブを新規で開くか、現在のタブで開くかの指定
- download…リンク先のコンテンツのダウンロードを指定
- hreflang…リンク先の記述言語の指定
- ping…POSTリクエストを送信
- referrerpolicy…リファラーを送信するかどうかを指定
今回紹介したタグの使用例
これまでに紹介したタグの使用例を紹介します。
今回は学習の初回なので、目に触れるだけでokでしょう。「へー」という感じで眺めておいてください。
これをブラウザで表示すると次のようになります。
実際に自分でも確かめてみよう
先程、見るだけでもokと述べましたが、実際に手を動かしてみたほうが良いという方はちょっと作業をしてみましょう。
当サイトでは基本エディタとしてVisual Studio Codeを採用しています。
VisualStudioCodeは前回の記事で紹介し、フォルダの作り方も解説したのですが、ここから学習に入った方は以下の記事を参考に学習用フォルダを作成してきてください。
親フォルダに「VSCode」を作成し、その中に子フォルダとして「Practice」や「HTML-CSS_practice」というように、HTMLとCSSの学習のために作ったんだなということがわかるようなフォルダ名を指定してフォルダを作成しておくことをおすすめします。
いよいよ自分でコード書く練習をしていくのですが、その前に開発環境を用意しましょう。当サイトではVisual Studio Code（VSCode）というエディタを推奨しています。各プログラミング講座でもVisual Studio Cod[…]
実際に自分で確かめる方法は、VSCode上でHTML-CSS_practiceのフォルダを開き、新しいファイルを作成します。HTMLは拡張子が.htmlでCSSは.cssという拡張子をつけてあげればエディタが認識してくれます。
画像で言うVSCODEのすぐ右にあるファイルアイコンをクリックすると新しいファイルの作成ができます。
今回はHTMLファイルを「Example-1.html」、CSSファイルを「Example-1.css」という名前で作成しました。
HTMLの方には先程のコードを貼り付けます。
CSSの方には以下のコードを貼り付けてください。
貼り付けたら、サイドバーの方のHTMLファイルの上で右クリックをし、「パスのコピー」を選択します。
パスのコピーをしたら、VSCode上のファイルが保存されていることを確認（Ctl + S or command +s）
保存を確認した後、ブラウザのアドレスバーの上でペーストをし、Enterを押すと先程の画像と同じことが書かれたページが出てきます。
