HTMLに慣れる上で欠かせないタグをまとめて紹介しています。
どれも頻出のタグで、最低限覚えておきたいものを選んでいるので、これからHTMLを覚えようと思っている方は最初に覚えておきましょう。
実際に書きながら進めていくと理解しやすいです。
本記事は、TechAcademyのWebデザインオンラインブートキャンプのHTMLのカリキュラムをもとに執筆しています。
HTMLとは
HTMLは、Webサイトの構造を形成するために使用される言語です。HTMLではタグと呼ばれるマークアップのための目印を使用し、<●●>(開始タグ)～</●●>(終了タグ)という形を作りその間に命令を書き実行します。
(終了タグは省略できるものや、書かないものも存在します)ここではサイト作成において必ず使用するタグや、よく使われるタグについて紹介します。
HTMLのタグ
まず、サイトの基本的な構造に関係するタグです。
<html>
HTML文書であることを示すタグで、(DOCTYPE宣言のあとの)最初に<html>、最後に</html>と記述します。内部には<head></head>と<body></body>がひとつずつ入ります。
<head>
文書全体の基本的な情報(ヘッダ情報)を定義するタグです。以下の<title>・<meta>・<link>のタグはこの中に入ります。
<title>
ブラウザのタブ内表記や、ブックマークされた際に表示されるサイトのタイトルを入力します。
<title>●●通販の△△</title>
<meta>
サイトのメタ情報を設定するタグです。文字コードを指定したり、検索エンジン用のキーワードを入れたりすることができます。終了タグが存在しません。(入れるとエラーとなります)
例：文字コードを”UTF-8”にする
<meta charset="utf-8"><link>
指定した文書を参照するタグです。外部スタイルシートを適用する場合などはこれを使用します。終了タグが存在しません。(入れるとエラーとなります)
例：”style.css”という外部CSSファイルを参照する
<link rel="stylesheet" href="style.css" type="text/css"><body>
コンテンツの中身を書く部分になります。
以前は、サイト全体の文字の大きさや色・背景などをこのタグ内で指定していましたが、HTML5ではそれらの属性は廃止されスタイルシートを使用することになっています。
<header>
HTML5から追加されたタグで、ヘッダー(Webサイトの先頭)部分に使用します。(ヘッダ情報を扱う<head>タグとは別のものです)主にサイトのタイトルやメインの説明文、ナビゲーションなどが入ります。
<footer>
HTML5から追加されたタグで、フッター(Webサイトの一番下)部分に使用します。サイトに関する情報、著作権に関する注記、連絡先などが入ります。
次に、コンテンツ内でよく使用されるタグです。
<p>
段落を作成する際に使うタグです。例えば以下の画像の場合、2つの<p>～</p>によって2つの段落に分けられています。
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<p>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<h1～h6>
見出し作成の際に使用するタグです。
<h1>が一番大きな文字であり、サイトのメインとなる見出しに使用されます。<h2>～<h6>になるにつれてどんどん小さな文字の見出しになります。
<h1>h1の見出し</h1>
<h2>h2の見出し</h2>
<h3>h3の見出し</h3>
<h4>h4の見出し</h4>
<h5>h5の見出し</h5>
<h6>h6の見出し</h6>
<img>
画像を貼り付ける際に使用するタグです。
配置や大きさの設定はCSSで行うことができます。終了タグが存在しません。(入れるとエラーとなります)
<img src="img_1.png"><a>
他のページへのリンクを貼ったり、指定したメールアドレスへの送信を行う際に使用します。開始タグでリンクしたい内容を属性によって指定し、タグ内にはリンクを貼りたいテキストや画像を入れます。
<a href="http://example.com/">リンク</a>リスト・テーブル・フォームを作成する際に使用するタグです。リストとテーブルは複数のタグをセットとして取り扱います。
<ol>・<ul>・<li>
リストを作成するタグです。
<ol>
ordered listの略で、「1,2,3～」「a,b,c～」など順番のあるリストを作成する際に使用します。先頭に付く記号や数字の種類はtype属性で指定することができます。
例：大文字のアルファベット順リスト(type属性：”A”)
<ol type="A">
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ol>
<ul>
unordered listの略で、順番のないリストを作成する際に使用します。先頭に付く記号の種類はtype属性で指定することができます。
例：四角マークによる順序なしリスト(type属性：”square”)
<ul type="square">
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
<li>
list itemの略で<ol>〜</ol>あるいは<ul>〜</ul>内に記述します。それらのリストの各項目を作成するときに使用します。
<table>・<tr>・<td>・<th>
テーブル(表)を作成する際に使用するタグです。
<table>
表の開始を示すタグです。内部に<tr>・<td>・<th>が入ります。デフォルトでは枠線は表示されず、border属性に”1″を指定することで表示されるようになります。色や大きさなどの設定はCSSで行います。
<tr>
table rowの略で、テーブルの行に使用します。このタグを使用した分だけ行が追加されます。画像では全部で3つの行が作成されています。
<td>
table dataの略で、テーブルのセルに使用します。画像内の「内容」の部分にあたります。
<th>
table headerの略で、テーブルの見出しのセルに使用します。画像内の「見出し1～3」の部分にあたります。
<table border="1">
<tr>
<th>見出し1</th>
<th>見出し2</th>
<th>見出し3</th>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
</table>
<form>
フォームの作成に使用します。データの受け取りはPHPなどで行います。
例：複数行のテキストが入力可能な<textarea>を使用したフォーム
<form action="result.php" method="post">
<p>
<textarea name="text" cols="60" rows="4">
テキストを入力してください。
</textarea>
</p>
<p>
<input type="submit" value="送信">
</p>
</form>
以上、Webページの作成において必ず一回以上は使うような重要なタグを紹介しました。
書き慣れておくと今後HTMLファイルを作る上でもスムーズに作業が進むと思うので、ぜひ覚えておきましょう。
また、TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。
