目次
HTMLのタグとは
HTMLでは、コンピュータに文書の意味やつくりを理解してもらうために、文書の意味を示すものを< >（大なり小なり）の記号で囲っています。この記号で囲ったものを"タグ"と呼んでいます。
文字で説明すると難しく感じるかもしれませんが、実際に試すと意外と簡単ですよ。
何故、このタグ付けが必要なのですか？
コンピュータは人間のように、Webページに表示されている文章をそのまま読んで、理解することができません。なので「ここが見出しだよ」「ここが本文だよ」とコンピュータに分かってもらう必要があるからなんです。
文章の意味を理解してもらえると、あなたの作ったページを正確に認識し、”SEO”と呼ばれる検索エンジン最適化にもにつながります。
SEOに効果があると、検索結果に表示されやすくなったり、多くの人に見てもらえるチャンスが広がるということにつながります。
基本的なHTMLタグの種類
ここからは、タグにどのような種類があるのか一緒に見ていきましょう。
HTMLファイルの始まりと終わり<html>
<html>はHTMLの始まりと終わりを記述するためのタグです。
これ事態がなにか処理をしているわけではありませんが、HTMLを記述する際は必ず必要です。
<html> <!-- ここがhtmlの始まり -->
<head>
</head>
<body>
</body>
</html> <!-- ここがhtmlの終わり -->
文書の基本的な情報を書く場所<head>
<head>は文書全体の基本的な情報(ヘッダ情報)を記述するためのタグです。
この中に記述したことは基本的にウェブページには表示されません。
あくまでも様々な設定や情報を書くためのスペースなのです。
このタグは<html>タグ内に書きます。
<html>
<head>
<!-- ここに文書全体の基本情報を記述 -->
</head>
<body>
</body>
</html>Webページの情報を伝える<meta>
Webページの情報を検索エンジンやブラウザなどに伝えるためのタグです。
<meta>タグ自体は外部と内部の調整を主に担当しており、例えば、外部的にはGoogleなどの検索エンジンに情報を渡したり、内部的には文字コードをどうするか、スマホ版でも見やすく表示する方法を指定したりします。
<meta>タグは<head>タグ内に書きます。
<html>
<head>
<meta charset="utf-8"/> <!-- ここでは文字コードを指定しています -->
</head>
<body>
</body>
</html>別のファイルやページを関連付ける<link>
<link>タグは、「このページ」と「別のファイルやページ」を関連付けるためのタグです。このタグは<head>タグ内に書きます。
このタグは実際に使い方を見たほうがわかりやすいので、使用例を一つ見ていきましょう
CSSファイル(外部CSSファイル)を読み込む例
<html> <head> <!-- ここで[link]を使いCSSファイルを読み込みます --><link rel = "stylesheet" href = "style.css"> </head> <body> </body> </html>
4行目が実際に<link>タグを使用した例です。
<link>タグの中にある"rel"や"href"というのは何ですか？
それぞれ説明しますね♪
"rel"というのは、ファイルとの関係性を示しています。
今回は「stylesheet」と記述して、
「今から読み込むのはスタイルシートですよ！」と宣言しています。
次に"href"ですが、これはそのファイルがある場所(URL)を示しています。
この1行で<link>タグを使ったファイルの読み込みができましたね♪
文書のタイトル<title>
<title>タグに記述するのは、文字通りウェブページの題名です。
これを記述することにより、ブラウザのでWebページを表示したときのウィンドウやタブに表示されます。
このタグは<head>タグ内に書きます。
<html>
<head>
<!-- ここで[title]を使い題名を記述します -->
<title>FUNA BLOG</title>
</head>
<body>
</body>
</html>
文書の本文<body>
<body>タグはWebページの本文となる部分の記述をします。
この中に記述したものが実際にWebページに反映されて表示されます。
<html>
<head>
</head>
<body>
<!-- ここに本文を記述します -->
</body>
</html>タグ内のものをグループ化できる<div>
<div>タグで囲った要素は一つのグループとして指定することができます。
例えば、
<html> <head> </head> <body> <!-- ここに<div>要素を記述します --> <div id="ocntent"></div></body> </html>
このように<div>タグに"id"を指定してそのグループに自分で管理しやすい名前を付けることができます。
この"id"を指定してデザインを変更するスタイルシートを記述することができます。
自分でつけた名前で管理できるのは覚えやすくていいですね♪
1つの段落<p>
<p>タグは文書そのものを表すためのものです。
このタグで囲った文書は1つの段落として認識されるため終了タグ(</p>)で段落が終了し、次の行に移動します。
<html>
<head>
</head>
<body>
<!-- ここに<p>要素を記述します -->
<p>これが1つの段落です。</p>
</body>
</html>ここで一つ注意してほしいのが、<p>タグはあくまで段落なので改行として使用するのはやめてください。
改行する方法は次のタグで説明しますね。
改行<br>
<br>タグは改行するためのものです。
この改行タグですが、行頭につけると余分に2行改行されてしまう事があるため、行末に書いてください。
<html>
<head>
</head>
<body>
<!-- ここで<br>要素を記述します -->
<p>これが1つの段落です。その段落の中でも改行したいときは<br>を使います。</p>
</body>
</html>これで表示されるのが、
を使います。」
のように表示されます。
またWebページに空白のスペースを開けたいときに<br><br>のように２つ以上続けて使うのはあまりよくありません。
では、2行以上空白行を入れたいときはどうすればいいのですか？
そのことについては、タグの話から少しずれてしまうので詳しくは別の記事で特集しますね！
https://itthestudy.com/%E3%81%AF%E3%81%98%E3%82%81%E3%81%A6%E3%81%AEhtml%E3%82%92%E9%80%A3%E7%B6%9A%E3%81%97%E3%81%A6%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%AF%E3%81%84%E3%81%91%E3%81%AA%E3%81%84%EF%BC%81/
画像を挿入<img>
<img>タグは文書内に画像を挿入するときに使います。
<html>
<head>
</head>
<body>
<!-- ここで<img>要素を記述します -->
<img src="sample.png">
</body>
</html>このように<img>タグ内の"src"で表示したい画像ファイルを指定します。
まとめ
基本的なタグを一覧でまとめてみました。
他にも多くのタグがありますが、また紹介していきますね！
HTMLのリンク<a>タグを超簡単に解説！
[HTML] divとspanタグの違いは？誰にでもわかりやすく解説
似たようなタグがありますが微妙に使い分けが違うので、間違えないように基本をしっかり覚えていきましょう♪