HTMLのタグ種類と具体例
初めの記事でHTMLとCSSの基礎について書きましたが、今回はHTMLのタグにつてご紹介します。
まだHTMLとCSSの基礎を見てないという方はこちらの投稿からご覧ください！
HTMLタグとは？
HTMLの基礎1の記事でHTMLタグについて簡単に説明しましたが、この記事でも少し振り返ってからHTMLタグの種類と具体例をご紹介します。
HTMLを記載していく上で[タグ]を用いて記載していきます。では、[タグ]とは具体的にどのようなものなのかみていきましょう。
[タグ]とは「文字（テキスト）に意味を与えてあげる印のようなもの」です。
また、文字列などをタグで囲みタグの中に書かれた情報の単位のことを「要素」と言います。HTMLを記載していく上では必ず使用していく言葉になりますので意味を理解しておくと良いでしょう。
例のように文字をタグで囲うと、記載された文字がh1やh2といった意味を持つようになります。
このようにHTMLタグは様々な用途に使用されることがあります。次にまず初めに覚えておくべきタグを10選ご紹介します！
初めに覚えておくHTMLタグ！
<html>
HTMLタグはここからHTMLコードが記述します。と指示するタグになります。DOCTYPE宣言の次に<html>、文書の最後に</html>と記述します。<html></html>の間にその他のタグを記載していく流れになります。
<head>
文書全体の基本的な情報(ヘッダ情報)を定義するタグです。以下の<title>・<meta>・<link>のタグはこの中に入ります。
<title>
ブラウザのタブ内表記や、ブックマークされた際に表示されるサイトのタイトルを入力します。
<title>nestsのポートフォリオサイト</title>
このように記載することで、記述していくページのタイトルを指定することができます。
<meta>
サイトのメタ情報を設定するタグです。文字コードを指定したり、検索エンジン用のキーワードを入れたりすることができます。終了タグが存在しません。(入れるとエラーとなります)
<link>
指定した文書を参照するタグです。外部スタイルシートを適用する場合などはこれを使用します。終了タグが存在しません。(入れるとエラーとなります)
例)「style.css」という外部CSSを読み込む
<link rel="stylesheet" href="style.css" type="text/css">
このように記載することでHTMLとCSSをリンクさせることができます。
<body>
bodyはコンテンツの中身を書く部分になります。
body内にwebサイト上で表現したいテキストや画像などを記載していきます。
サイト全体の文字の大きさや色・背景などをこのタグ内で指定していましたが、HTML5ではそれらの属性は廃止されスタイルシートを使用することになっています。
<header>
HTML5から追加されたタグで、ヘッダー(Webサイトの先頭)部分に使用します。(ヘッダー情報を扱う<head>タグとは別のものです)主にサイトのタイトルやメインの説明文、ナビゲーションなどが入ります。
<footer>
フッター(Webサイトの一番下)部分に使用します。サイトに関する情報、著作権に関する注記、連絡先などが入ります。
初めに覚えておきたいタグ10選！
divタグ<div>
divタグとは、各コンテンツをひとまとめする（グループ化する）際に使う汎用的なHTMLタグで、PタグやMETAタグといった良く活用される代表的なHTMLタグの一つといえます。このdivタグは、コンテンツの幅や余白など柔軟に指定できるブロック要素です。また、インライン要素であるSPANタグと似通った部分があり、共にタグ自体には意味を持ちません。
h1~h6タグ(見出し)<h1~h6>
見出し作成の際に使用するタグです。
<h1>が一番大きな文字であり、サイトのメインとなる見出しに使用されます。<h2><h3>・・・→<h6>と、数字が大きくなるにつれてどんどん小さな文字の見出しになります。基本的にh1は1ページにつき1回しか使ってはいけない決まりになっているので注意しましょう。
pタグ(段落) <p>
pタグは段落を表わすためのタグです。
pタグで囲むと、その文章が1つの段落となり、段落ごとに文章が区切られるために改行を伴います。段落の途中で改行させたい時は<br>タグを使用しましょう。改行のために段落内の文章途中で無理やりpタグを閉じては不自然な文章になってしまいます。
aタグ <a>
他のページへのリンクを貼ったり、指定したメールアドレスへの送信を行う際に使用します。開始タグでリンクしたい内容を属性によって指定し、タグ内にはリンクを貼りたいテキストや画像を入れます。
<a href="nests.jp">ネストの公式ホームページ</a>
リンクをつけたい場合はaタグで囲います。href=の後に""(ダブルクォーテーション)でリンクしたいURLを記載することでリンク付することができます。
imgタグ<img>
画像を貼り付ける際に使用するタグで、終了タグが存在しません。(入れるとエラーとなります)
alt属性で入力したテキストは、視覚障害を持つ方が使用するブラウザ（スクリーンリーダー）で使用されますので、読み上げ不要な画像（デザインの為の画像）の場合は空白にしておきましょう。
<img src="img_01.png" alt="パンの画像">
tableタグ<table>/<tr>/<tb>/<th>
<table>
表の開始を示すタグです。内部に<tr>・<td>・<th>が入ります。デフォルトでは枠線は表示されず、border属性に”1″を指定することで表示されるようになります。色や大きさなどの設定はCSS（Cascading Style Sheets）で行います。
<tr>
table rowの略で、テーブルの行に使用します。このタグを使用した分だけ行が追加されます。下記のサンプルでは全部で3つの行が作成されています。
<td>
table dataの略で、テーブルのセルに使用します。サンプル内の「内容」の部分にあたります。
<th>
table headerの略で、テーブルの見出しのセルに使用します。サンプル内の「見出し1～3」の部分にあたります。
改行タグ<br>
文章の途中で改行したいときに使用します。段落内で強制的に改行させる際に使用しますが、連続で使用して空白行を作成するために使用するのは避けましょう。
また、パソコンのブラウザ上で表示させるとちょうど良い位置で改行されていても、スマホで表示させると妙な位置での改行になってしまうことがありますので、注意が必要です。
段落と段落の間に空白行を入れたい時はスタイルシートで調整しましょう。<p>nestsは制作会社が支援する<br>Creative Academyです。</p>
pタグで書いた記述をbrタグで改行することができます。
このようにHTMLのタグにはそれぞれの種類で全く別の役割をしていることがわかります。記載したい内容によってタグの種類が変わってくるため、用途に合わせて使い分けていきましょう。
次回はHTMLタグの応用編の記事になりますので、そちらもご参考にしてください！これからも頑張りましょう！✨