HTMLなどのマークアップ言語において、文書の構造を示すために使用される要素です。タグは尖括弧で囲まれ、開始タグと終了タグのペアで構成されます。
目次
[ HTMLタグの種類 ]
- <html>: HTMLドキュメントの開始を示す。
- <head>: ドキュメントのヘッダー情報を含むセクションを示す。
- <title>: ドキュメントのタイトルを定義する。
- <body>: ドキュメントの本文を含むセクションを示す。
- <h1>〜<h6>: 見出しを示す。h1が最も重要で、h6が最も軽い見出しを示す。
- <p>: 段落を示す。
- <a>: ハイパーリンクを示す。
- <img>: 画像を示す。
- <ul>: 順不同リストを示す。
- <ol>: 順序付きリストを示す。
- <li>: リスト内のアイテムを示す。
- <table>: テーブルを示す。
- <tr>: 表の行を示す。
- <td>: 表のセルを示す。
- <form>: フォームを示す。
- <input>: フォームの入力欄を示す。
- <textarea>: フォームの複数行のテキスト入力欄を示す。
- <select>: フォームのドロップダウンリストを示す。
HTMLの記述例
例えば、次のようなHTMLタグがあります。
<h1>見出し</h1>表示させるとこのようになります。
H1の見出し
このタグは、「見出し」というテキストを含む見出しの要素を示しています。<h1>は開始タグ、</h1>は終了タグです。タグには、他にも様々な種類があります。リンクを示す<a>タグ、画像を表示する<img>タグ、段落を示す<p>タグなどがあります。
タグの種類は１００種類以上あり、全てを暗記する必要はありませんが、意味を調べる必要に迫られるときがあります。ひと昔前は「HTML辞書」のような名称の書籍を購入するのが一般的でしたが、現在は、インターネットで調べられます。
その中の一例を紹介します。
これらのタグを大まかにジャンル分けした場合、以下のように分けられます。
<p>：段落を表すタグ
<h1>〜<h6>：見出しを表すタグ
<strong>：強調するテキストを表すタグ
<em>：強調するテキストを表すタグ
<a>：リンクを表すタグ
<form>：フォームを表すタグ
<input>：フォームの入力欄を表すタグ
<select>：選択肢を表すタグ
<option>：選択肢の候補を表すタグ
<button>：ボタンを表すタグ
<ul>：順不同リストを表すタグ
<ol>：順序付きリストを表すタグ
<li>：リストの項目を表すタグ
<table>：表を表すタグ
<tr>：表の行を表すタグ
<th>：表の見出しを表すタグ
<td>：表のデータを表すタグ
<img>：画像を表すタグ
<div>：ブロック要素を表すタグ
<span>：インライン要素を表すタグ
<header>：ヘッダーを表すタグ
<footer>：フッターを表すタグ
<nav>：ナビゲーションを表すタグ
<section>：セクションを表すタグ
<article>：記事を表すタグ
これらのタグは、Webページの構造を定義し、コンテンツを意味的に分類するために使用されます。HTMLは継続的に進化しており、新しいタグが追加されることがあります。
それでは実際に使用例を見ていきましょう。
<html>タグ
HTML文書の開始と終了を表します。
全体を囲んで書きます。
<head>
<title>ページのタイトル</title>
</head>
<body>
<!-- ページの内容をここに書く -->
</body>
</html><head>タグ
ページのヘッダー情報を記述するためのタグです。
<head>
<title>ページのタイトル</title>
<meta charset="UTF-8">
</head><title>タグ
ページのタイトルを定義するためのタグです。
<title>ページのタイトル</title><body>タグ
ページの本文を記述するためのタグです。
<body>
<h1>見出し1</h1>
<p>段落1</p>
<h2>見出し2</h2>
<p>段落2</p>
</body><h1>～<h6>タグ
見出しを表すタグで、数字が大きくなるほど小さな見出しになります。
<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3><p>タグ
段落を表すタグです。
<p>これは段落です。</p><ul>タグと<li>タグ
箇条書きを表すタグです。ulタグでリストを囲み、liタグで各項目を表します。
<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul><a>タグ
リンクを作成するためのタグです。
<a href="https://www.example.com/">リンクテキスト</a>以上が、HTMLの基本的なタグの一部です。他にも、画像を表示するための<img>タグや、表を作成するための<table>タグなどがあります。
また、これをまとめたものが以下になります。
<html>
<head>
<title>ページのタイトル</title>
</head>
<body>
<h1>見出し1</h1>
<p>段落1</p>
<h2>見出し2</h2>
<p>段落2</p>
<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
<a href="https://www.example.com/">リンクテキスト</a>
</body>
</html>表示させるとこのようになります。
その他、よく使われるタグの1つとして、
リストタグがあげられます。
リストを作成するためには、以下のようにタグを用います。
<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>【サンプル】
<ul>
<li>りんご</li>
<li>バナナ</li>
<li>みかん</li>
</ul>
表示させるとこのようになります。
- りんご
- バナナ
- みかん
<ol>
<li>りんご</li>
<li>バナナ</li>
<li>みかん</li>
</ol>表示させるとこのようになります。
- りんご
- バナナ
- みかん
●リンクを作成する
リンクを作成するためには、以下のタグを用います。
<a href="リンク先のURL">リンクテキスト</a>●画像を表示する
画像を表示するためには、以下のタグを用います。
<img src="画像ファイルのURL" alt="代替テキスト">などもあります。
このように、HTMLタグを用いることで、文書の構造を明確に示すことができます。また、CSSを使用することで、タグにスタイルを適用することができます。
コメント