【ホームページ制作の基礎】HTMLの基本タグ（１）
前回の【ホームページ制作の基礎】のブログでは、まず『HTML・CSSとは何か』というテーマでご紹介しました。
「HTML」とは『さまざまなデータをコンピューターが読み取れるようにタグ付けする言語』で『Webページの骨組みとなる文字列のこと、Webページの文章構造を定義するもの』でしたね。
そして、HTMLは、『< >（カッコ）でアルファベットなどを囲って、それは「タグ」「HTMLタグ」のように呼ばれている』と前回ご紹介しました！
そこで今回はHTMLのタグについてフォーカスしてHTMLの基本のタグについてご紹介していきたいと思います！基本のタグの前にまず、HTMLの基本構造についても紹介。
HTMLの基本構造とは？
HTMLでは、サイト内の文書にマークアップしていく作業を行います。基礎構造とは、まずはこのマークアップを行うための土台作りと考えるとわかりやすいと思います。マークアップとは、Webサイトを作成するにあたり、文書に「見出し」や「タイトル」などの意味付けをしていく作業のことです。そのためHTMLは、「マークアップ言語」と呼ばれます。
例えば、HTMLを使うためには、以下の要素を必ず使う必要があります。
・HTML文書の宣言
・htmlタグ（ページがHTMLであることを宣言するために使われるタグです。このタグの中に、HTMLのコードを記述していくことになります。HTMLに必要な全ての要素を記述していくことになるため、HTMLファイル内に記述する宣言以外の全てのタグの親要素となります。）
・headタグ（文書のヘッダ情報を表すために用いられるタグです。ヘッダ情報とは、そのWebページがどんな意味を持つのか、どんな言語が使われているのかなど、文書自体が持っている情報のことです。）
・bodyタグ（文書の内容を記述するために用いられます。bodyタグ内に記述した見出しや文章、画像などが実際のWebサイト上に表示されます。）
・文字コードを指定するmetaタグ
上記の要素がHTMLの基本構造と呼ばれるものです。それぞれに書く場所も決まっています。
そして、HTMLの基本構造の中で特に重要なものは細かく説明書きのあるhtmlタグ・headタグ・bodyタグの三要素です。
HTMLは<>カッコで囲まれた「タグ」を組み合わせて書いていきます。タグは、一部例外はありますが、<xxx>～</xxx>のようにセットになっています。
ルールにのっとってタグを組み合わせて記述していくことで、ウェブページを作成することができます。おおまかなHTMLの基本構造はお分かりいただけたでしょうか。
ということで、次はHTMLで使う基本のタグをご紹介していきます！
HTMLで使用する基本のタグ
見出し（Hタグ）<h1>~</h1>
HTMLでは、hタグを使って見出しを表します。見出しとは、文章の章題や節題のことです。
見出しにしたいテキストを、「h」と「数字（1～6）」を合わせた開始タグ・終了タグで挟みます。
h1が一番の大見出し。数字が減るごとに小見出しになります。
h1はページのタイトル、h2は章のタイトル、h3は節のタイトル、h4は項のタイトルといったように、正しい文章構成で見出しを設定する必要があります。
hタグの記述は順序を守ることが大切と言われています。階層を意識して、必ず<h1>から記述をするようにしましょう。
hタグを正しく設置することのメリットは、
・ユーザーが読みやすくなる
テーマの区切りが明確に理解しやすい
コンテンツの階層構造を理解しやすい
目次が設置される（別途CMSなどで設定が必要）
・SEO効果がある
検索エンジンロボットがコンテンツを理解しやすくなり、適切にインデックスされやすくなる
ユーザーの利便性が向上することで、間接的にサイトの評価が高まる
という2点があります。ホームページ制作だけでなく、ブログを書く際にもhタグの正しい使い方を確認してみてください。
段落（Pタグ）<p>~</p>
テキストや画像を<p>と</p>で挟みます。<p>～</p>のひとかたまりが、ひとつの段落を表します。
通常、ブラウザで見ると段落と段落の間にスペースができ、改行されたような見た目になります。
段落を分けるのではなく、文章を改行したいときは<br>タグを使います。<br>タグについては次にご紹介します。
ブログ記事の文章内容で「さて次は…」のような主張やシーンが変わって新しい話題に移るときがありますよね。このときに、基本的に段落を付けます。
段落を付ける為にHTML内の該当箇所に<p>をマークアップします。
このように、pタグとは、文章全体を段落で区切って読みやすくするために使うHTMLタグのことです。
このようにpタグは、改行ではなく段落を付けることが主目的です。
改行（brタグ）<br>
先ほど、pタグの中で少し出てきたbrタグ。
そのbrタグとは、テキスト文章の行を変える（改行する）ときに使うHTMLタグのことで、「改行タグ」とも呼ばれます。
そのため、段落を付けることでなく改行のみが主目的です。
内容が変わらないひとまとまりのテキスト文章で使ったり、項目や順序以外の短めのテキスト文章で使います。
pタグ・brタグを適切に使ってユーザーに見やすいコンテンツを制作していきましょう。
リンク（アンカータグ）<a href="">~</a>
リンクさせたいテキストや画像を<a href="">と</a>で挟みます。href（エイチレフ）という属性には、リンク先の値（URLやファイル名）を入れます。
href属性の値は絶対パスまたは相対パスで記述します。
絶対パスはURL（例：https://～）で指定します。
相対パスはリンク先のファイルの位置を相対的に表したものです。リンク先のファイルがひとつ上の階層にある場合は「../」、さらにその上は「../../」で表します。
画像（IMGタグ）<img scr=”…” alt=”….”>
「img」は「Image」の略。
「src」は「Source（ソース）」の略。
画像はimgタグを使って表示します。imgタグに終了タグ「</img>」は存在しません。
src（エス・アール・シー）という属性に、画像ファイル（GIF、JPEG、PNG、PDFなどのファイルのURLやパス）の場所を示す値を入れます。src属性の値は絶対パスまたは相対パスで記述します。alt 属性は画像のテキストによる説明で、必須ではありませんがアクセシビリティのために非常に有用です。 画面リーダーがこの説明を読み上げることで、画像が何を表すかをユーザーが知ることができます。また、ネットワークエラーやコンテンツのブロック、リンク切れ等の理由で画像が読み込めなかった場合にも代替テキストが表示されます。
（spanタグ)<span>~</span>
基本的に1つ1つのHTMLタグは「意味」や「役割」を持っています。しかし、<span>タグと<div>タグだけは意味を持ちません。<span>は、そのものに意味はなく、文章の途中に入れられる便利なタグです。
<span>～</span>で囲った部分をインライン要素としてグループ化することができるタグです。
グループ化することで、指定した範囲にスタイルシートを適用したりすることができます。例えば文章の中で部分的に色を変えたい時などは、その部分だけspanタグで囲んで使用したりします。
（divタグ）<div>~<div>
divタグとは、特にタグの意味を持たず、「要素を一括りにする」という役割を持っています。
特に意味を持たないという自由さが、WEB制作にとても役立つことになります。
例えば、CSSを使って装飾をする際に、他に最適なタグがない場面で使用することが多いです。
<div>
<img src=”img.jpg” alt=”犬の画像。”>
<p>文章</p>
</div>
上記使用例では、
画像を表示するためのimgタグと、段落という意味のpタグを一括りにするために、
開始タグ<div> と 終了タグ</div>を囲うようにして使っています。
divタグは、CSSを使う際など、範囲を一括りにしたい時に使います。
まとめ
今回はHTMLの基本構造とHTMLの基本タグ６個をご紹介しました。
それぞれのタグにどんな意味があるのか、どのような時に使うのか、など少しでもご理解いただければ幸いです。
hタグは、SEO対策にも重要なので、ホームページ制作だけでなくブログを書く際にも使い方を意識してみてくださいね。
他にもたくさんのタグがあるので、他のHTMLのタグについては、また次の記事でご紹介できればと思います！
