ホームページ制作の際に必ず使用するのがHTMLです。
今回は頻出のタグの役割と種類をわかりやすく解説します！
意味を理解するために最後まで見ていってください！
HTMLタグの役割・種類とは
HTMLはWebブラウザにテキストや画像を表示するための言語です。
「HTMLタグ」とは文字に意味を与えてあげて、管理を効率化することを目的とした目印のようなものです。
要素名を「<」と「>」で囲った部分になります。
例えば
- リンクを挿入する場合…
<a href=””> ~ </a> - 見出しを表示する場合…
<h1> ~ </h1> - 画像を表示する場合…
<img>(閉じタグは不要です)
などそれぞれに使用用途があります。
今回はよく使うタグをピックアップして紹介します。
head要素に記載するタグについて
head要素には、文章の属性、CSSやJavascriptファイルの読み込みなど、そのWebページの基本情報を記述します。
ここでは、head要素内に記載するタグについて解説します。
HTMLの基本構成についてはこちらの記事で紹介しています！
metaタグについて
metaタグとはWebサイトの情報をブラウザや検索エンジンに伝えるための説明書きのタグになります。
<head>タグ内に記載し、ブラウザ上には表示されません。
ここでは代表的な二つのmetaタグについて解説します。
メタディスクリプションとは
メタディスクリプションとはWebページの概要を記載するためのmetaタグです。
100文字程度の文章で検索エンジンで表示される検索結果のタイトルの下に表示されます。
簡潔に伝わる文章を書くことでクリック率の向上に繋がります！
以下のように<head>タグ内に記載します。
<head>
<meta name="description" content="Webページの概要をここに記載する" >
</head>ビューポートとは
モバイル端末での文字や画像の表示を最適化するためのmetaタグです。
表示が最適化されていないとスマートフォンやタブレットで「このサイト見づらいな」とユーザーが感じ、離脱してしまうかもしれません。
モバイル端末でのインターネット利用者が急増しているため、忘れずに設定しましょう！
以下のように<head>タグ内に記載します。
<head>
<meta name=”viewport” content=”width=device-width,initial-scale=1″>
</head>titleタグ
title要素はhead要素内に記述し、HTMLのタイトルを指定するものです。
Webブラウザのタブや検索結果に表示され、SEOにも重要な要素のため、必ず記述しましょう。
人間にもコンピューターにもわかりやすく簡潔な内容にしましょう！
以下のように<head>タグ内に記載します。
<head>
<title>Webサイトのタイトル</title>
</head>linkタグ
link要素はHTMLと他の外部ファイルを関連付ける時に使用します。
ここではCSSファイルを例に解説します。
link要素には「rel属性」と「href属性」が必須です。
「rel属性」でファイルとの関係を表し、この場合はCSSが読み込むファイルであることを示しています。
「href属性」で実際に読み込むファイルのURLを記述します。
以下のように<head>タグ内に記述します。
<head>
<link rel="外部ファイルとの関係を示すキーワード" href="外部ファイルのURL">
</head>styleタグ
styleタグはcssを直接HTMLファイルに記述する際に使用するタグです。
cssファイルを作成する手間が省けるというメリットがありますが、コードが長くなってしまうため、メンテナンスが複雑になるというデメリットもあります。
body要素内に記載することも可能です。
※基本はCSSファイルに記述します。
<style>
p{
font-size: 12px;
color: #535353;
}
</style>body要素内に記載するタグについて
body要素に記述した見出しや文章、画像などが実際のWebサイトに表示され、CSSによって装飾やレイアウトすることができます。
ここではbody要素内に記載するタグについて解説します。
hタグ
見出しを設定する際に使用するタグです。
<h1>から<h6>まであり、<h6>になるにつれて見出しが小さくなります。
<h1>見出しが入ります</h1>
<h2>見出しが入ります</h2>
<h3>見出しが入ります</h3>
<h4>見出しが入ります</h4>
<h5>見出しが入ります</h5>
<h6>見出しが入ります</h6>pタグ
段落 (文章のまとまり)を表現する際に使用するタグです。
pタグを使用すると、前後の文章が自動的に改行されます。
<p>段落内のテキストが入ります</p>imgタグ
imgタグは画像を挿入する際に使用するタグで、閉じタグは不要です。
imgタグの中に「src属性」と「alt属性」が入ります。
「src属性」は必須で、ファイル名を記載します。
「alt属性」は必須ではありませんが、代替テキストを記入することができます。
※SEO対策する場合は必ず入れます
代替テキストは画像が表示されなかった場合に表示されるもの、または視覚障害者がテキストリーダーを使用する際に読み上げられるものになります。
<img src="画像のファイル名が入ります" alt="代替テキストが入ります">aタグ
aタグはリンクを埋め込む際に使用するタグです。
「href属性」にリンクのURLを挿入し、タグ内にはテキストや画像を入れることでリンクを適用させることができます。
<a href="リンクのURLが入ります">テキストや画像が入ります</a>ulタグ、olタグ + liタグ
ulタグ、olタグ、liタグはリストを作成する際に使用するタグです。
<ul>タグは順序のないリストに使用し、「type属性」でテキストの先頭の記号「・」を変更することができます。
<ol>タグは順序のあるリストに使用し、「type属性」でテキストの先頭の数字や記号を変更することができます。
例: 1, 2, 3～ や a, b, c～など
<li>タグはリストの各項目を作成する際に使用します。
<ul> ~ </ul>または<ol> ~ </ol>内に記載します。
<ul>
<li>項目が入ります</li>
</ul>
<ol>
<li>項目が入ります</li>
</ol>tableタグ
tableタグは表を作成する際に使用するタグです。
<table>タグを最初に配置し、その中に<tr>タグ、<th>タグ、<td>タグを入れます。
デフォルトでは表の外枠は表示されませんが、cssで設定することは可能です。
<tr>タグで表に行を追加することができます。
<th>タグで表の中の見出しのセルを作成できます。
<td>タグで表の中の見出しのセルに対するデータのセルを挿入します。
<table>
<tr>
<th>見出し1</th>
<th>見出し2</th>
</tr>
<tr>
<td>データ1</td>
<td>データ2</td>
</tr>
<tr>
<td>データ3</td>
<td>データ4</td>
</tr>
</table>上記のコードから以下のような表が作成できます。
| 見出し1 | 見出し2 |
|---|---|
| データ1 | データ2 |
| データ3 | データ4 |
inputタグ
inputタグはWebフォームを作成する際にフォームの部品として使用するタグです。
<form> ~ </form>タグで括られたフォーム要素内に配置し、名前入力欄やチェックボックスを挿入することができます。
「type属性」を必ず指定する必要があり、見た目や機能を大きく変化させることができます。
ここではよく使用されるinput要素の「type属性」を紹介します。
- text…1行のテキスト入力欄
- email…メールアドレスの入力欄
- checkbox…チェックボックス
- submit…送信ボタン
「name属性」は項目を識別するために使用されます。
通常、項目名を英訳したものを記入します。
<form>
<input type="属性" name="項目名">
</form>selectタグ + optionタグ
selectタグとoptionタグはセレクトボックスを配置する際に使用するタグです。
セレクトボックスとは複数の選択肢から選ぶためのボックスです。
プルダウンメニューとも呼ばれます。
<select> ~ </select>タグで<option> ~ </option>タグを囲み、optionタグに選択肢を入れます。
<select>
<option>選択肢1</option>
<option>選択肢2</option>
<option>選択肢3</option>
</select>textareaタグ
textareaタグはフォームを作成する際に複数行のテキスト入力欄を挿入するために使用されるタグです。
こちらも<form> ~ </form>タグで括られたフォーム要素内に配置します。
「name属性」で項目名を指定し「cols属性」と「rows属性」で横方向と縦方向のサイズを設定します。
<form>
<textarea name="項目名" cols="横幅のサイズ" rows="縦幅のサイズ"></textarea>
</form>labelタグ
labelタグはinputタグやtextareaタグなどの入力欄に説明を付けるために使用されるタグです。
例えばチェックボックスの横に説明文を配置したり、テキスト入力欄にキャプションを付けることで何を入力するための欄なのかを明確にすることができます。
<label>
<input type="checkbox" name="checkbox">
利用規約に同意する
</label>☐利用規約に同意する
smallタグ
smallタグとはフォントを小さくする際に使用するタグです。
脚注や補足情報、コピーライトや著作権情報など本文とは別の付随するものに使うのがおすすめです。
本文の文字を小さくする場合には使用しないようにしましょう。
<small>©コピーライト</small>brタグ
brタグは段落内の文章の途中で改行する際に使用するタグです。
閉じタグは不要です。
<p>
ここで<br>
改行します
</p>scriptタグ
scriptタグは外部のJavaScriptファイルを呼び出す際に使用するタグです。
<head>タグ内と<body>タグ内のどちらにも配置することが可能です。
「src属性」にファイル名を記載します。
<script src="script.js"></script>headerタグ
headerタグはWebサイトのヘッダー部分を表現する際に使用するタグです。
ナビゲーションメニューやWebサイトのタイトル、ロゴなどが入ります。
<header>
<!-- ヘッダーコンテンツが入ります -->
</header>navタグ
navタグはナビゲーションメニューを作成する際に使用するタグです。
基本は<ul>タグや<li>タグを組み合わせて、メニューを作ります。
<nav>
<ul>
<li>ホーム</li>
<li>お店について</li>
<li>商品情報</li>
<li>お問い合わせ</li>
</ul>
</nav>divタグ
divタグは特別な意味はありませんが、要素をグループ化する際に使用するタグです。
divタグで囲まれたものはブロック要素として認識されます。
<div>
<!-- 要素が入ります -->
</div>spanタグ
spanタグもdivタグと同様、特別な意味はありませんが、囲った部分をインライン要素としてグループ化するものです。
インライン要素なので文の一部と見なされ、divタグのように前後に改行は入りません。
一部だけ文字の色を変えたり、文字のサイズを変えたりする際に使用します。
<p>テキストが<span>この部分</span>に入ります</p>
span{
color: red;
}テキストがこの部分に入ります
articleタグ
articleタグは独立して自己完結するコンテンツを表現する際に使用するタグです。
ブログやニュースの個別記事やその記事のコメントなどによく利用されます。
<article>
<!-- コンテンツが入ります -->
</article>sectionタグ
sectionタグはWebページのセクションをグループ化する際に使用するタグです。
<section>
<!-- セクションのコンテンツが入ります -->
</section>mainタグ
mainタグはWebページのメインコンテンツを作成する際に使用するタグです。
<div>タグや<article>タグなどを使って構造化します。
<main>
<!-- メインコンテンツが入ります -->
</main>footerタグ
footerタグはWebサイトのフッター(末尾)部分を表現する際に使用するタグです。
著作権情報や、連絡先情報などを構造化します。
<footer>
<!-- フッター情報が入ります -->
</footer>まとめ
今回はタグの役割と種類について解説しました。
いかがでしたでしょうか？
タグを理解することで見やすく読みやすいWebサイトが作成できるようになります。
よく使うタグを覚えて作業を効率化させましょう！
別投稿では、HTML/CSSについての基本知識や、コーディングに役立つ知識についてご紹介していきますのでそちらもぜひチェックしてみてください！
コメント