【HTML】さまざまなタグ | Part 3
公開日: 2023/12/6
今回は、HTMLのさまざまなタグについてまとめました。
HTMLは、Web開発をするにあたって欠かせない知識となっています。
ぜひ最後までお読みください！
1. HTMLとは
HTMLとは、マークアップ言語の1つです。
正式名称を「HyperText Markup Language(ハイパーテキスト・マークアップ・ランゲージ)」といいます。
1-1. HTMLでマークアップする理由
HTMLでマークアップする理由には、以下のようなものがあります。
・コンピュータに意味を伝えるため
・Webアクセシビリティため
・検索エンジンに正確な情報を提示する(SEO対策の)ため
HTMLは、装飾や見た目を整えるために使用するのではなく、文章の意味に基づいてマークアップするようにしましょう。
2. タグとは
タグとは、テキストに意味を与える目印のことです。タグの種類を示す文字や記号を、< と >で括った部分を指します。
タグは基本的に、以下のように書きます。
タグ名>テキスト<タグ名>先頭のタグを「開始タグ」といい、末尾のタグを「終了タグ」といいます。
開始タグから終了タグまでのひとかたまりを「要素」といいます。
基本的には開始タグと終了タグはセットで記述されますが、例外もあります。
2-1. 属性とは
属性とは、HTMLの要素に追加する情報のことです。
すべてのタグに属性があるわけではありません。
属性は基本的に、以下のように書きます。
すべてのタグに属性があるわけではありません。
属性は基本的に、以下のように書きます。
<タグ名 追加の情報=”内容”>テキスト<タグ名>3. セクションを定義するタグ
セクションを定義するタグには、以下のようなものがあります。
3-1. headerタグ
headerタグは、導入的なコンテンツをあらわすタグです。
導入的なコンテンツとは、以下のような情報を指します。
・見出し
・ロゴ
・検索フォーム
・ナビゲーション
記述例は以下のとおりです。
導入的なコンテンツとは、以下のような情報を指します。
・見出し
・ロゴ
・検索フォーム
・ナビゲーション
記述例は以下のとおりです。
<header>
<h1>テストサンプル株式会社</h1>
<nav>
<ul>
<li><a href="about.html">about</a></li>
<li><a href="news.html">news</a></li>
<li><a href="contact.html">contact</a></li>
</ul>
</nav>
</header>3-2. footerタグ
footerタグとは、セクションのフッターをあらわすタグです。
フッターとは、以下のような情報を指します。
・著者の情報(誰がこの記事を書いたのか)
・関連リンク(関連する記事へのリンク)
・コピーライトやライセンス情報(著作権)
記述例は以下のとおりです。
フッターとは、以下のような情報を指します。
・著者の情報(誰がこの記事を書いたのか)
・関連リンク(関連する記事へのリンク)
・コピーライトやライセンス情報(著作権)
記述例は以下のとおりです。
<footer>
<p>この記事を書いた人：山田花子</p>
<address>hanaco.yamada@example.com</address>
</footer>3-3. mainタグ
mainタグとは、その内容がページ内の最も主要なコンテンツであることをあらわすタグです。
主要なコンテンツとは、以下のようなものを指します。
・HTML文書の中心的なトピック(ブログの記事部分など)
・アプリケーションの中心的な機能に直接関連するコンテンツ
mainタグは基本的に、1ページで1つしか使用できません。
記述例は以下のとおりです。
主要なコンテンツとは、以下のようなものを指します。
・HTML文書の中心的なトピック(ブログの記事部分など)
・アプリケーションの中心的な機能に直接関連するコンテンツ
mainタグは基本的に、1ページで1つしか使用できません。
記述例は以下のとおりです。
<body>
<header>
・・・省略
</header>
<main>
<article>
<h1>タイトル</h1>
<p>サンプル文章サンプル文章サンプル文章サンプル文章</p>
</article>
</main>
<footer>
・・・省略
</footer>
</body>4. 入力フォームに使用するタグ
入力フォームに使用するタグには、以下のようなものがあります。
4-1. formタグ
formタグは、入力・送信フォームを作成するために使用するタグです。
form要素の間には、 以下のようなタグを記述します。
・label
・input
・textarea
・select
・option
・button
フォームに入力されたデータは、送信ボタンを押すことでWebサーバーへ送信されます。
記述例は以下のとおりです。
form要素の間には、 以下のようなタグを記述します。
・label
・input
・textarea
・select
・option
・button
フォームに入力されたデータは、送信ボタンを押すことでWebサーバーへ送信されます。
記述例は以下のとおりです。
<form action="送信先のURL">
<label>お名前<input type="text" name="name"></label>
<label>生年月日<input type="date" name="dob"></label>
<button type="submit">送信する</button>
</form>
4-2. labelタグ
labelタグは、inputやtextareaなどのフォーム部品と項目名(ラベル)を関連付けるために使用するタグです。
labelタグを記述しておくと、labelタグ内のテキストをクリックするだけで入力欄がアクティブになります。
記述例は以下のとおりです。
labelタグを記述しておくと、labelタグ内のテキストをクリックするだけで入力欄がアクティブになります。
記述例は以下のとおりです。
<form action="フォームの送信先のURL">
<label>
名前を入力する
<input type="text" name="name">
</label>
</form>4-3. inputタグ
inputタグは、さまざまな種類の入力欄を作成するために使用するタグです。
文字列の入力欄だけでなく、チェックボックス、ラジオボタンなどもinputタグで作ることができます。
inputタグの種類には以下のようなものがあります。
・text：1行テキストの入力
・number：数値の入力
・email：メールアドレスの入力
・tel：電話番号の入力
・password：パスワードの入力
・checkbox：チェックボックス
・radio：ラジオボタン
・date：日付の入力
・time：時刻の入力
・file：ファイルのアップロード
記述例は以下のとおりです。
文字列の入力欄だけでなく、チェックボックス、ラジオボタンなどもinputタグで作ることができます。
inputタグの種類には以下のようなものがあります。
・text：1行テキストの入力
・number：数値の入力
・email：メールアドレスの入力
・tel：電話番号の入力
・password：パスワードの入力
・checkbox：チェックボックス
・radio：ラジオボタン
・date：日付の入力
・time：時刻の入力
・file：ファイルのアップロード
記述例は以下のとおりです。
<form action="フォームの送信先のURL">
<label>お名前<input type="text" name="name"></label>
<label>生年月日<input type="date" name="dob"></label>
<label><input type="checkbox" name="terms" value="accept">規約に同意する</label>
<button type="submit">送信する</button>
</form>
4-4. textareaタグ
textareaタグは、複数行のテキスト入力欄を作成するために使用するタグです。
記述例は以下のとおりです。
記述例は以下のとおりです。
<form action="フォームの送信先のURL">
<label>お名前<input type="text" name="name"></label>
<label>生年月日<input type="date" name="dob"></label>
<label>備考<textarea name="remarks" rows="6" cols="40"></textarea></label>
<button type="submit">送信する</button>
</form>
4-5. buttonタグ
buttonタグは、ボタンを作成するために使用するタグです。
type属性の値には、以下の３種類のいずれかを指定できます。
・type="submit"：フォームの入力内容を「送信する」ボタン
・type="reset"：フォームの入力内容を「リセットする」ボタン
・type="button"：「何もしない(自分で操作を加える)」ボタン
記述例は以下のとおりです。
type属性の値には、以下の３種類のいずれかを指定できます。
・type="submit"：フォームの入力内容を「送信する」ボタン
・type="reset"：フォームの入力内容を「リセットする」ボタン
・type="button"：「何もしない(自分で操作を加える)」ボタン
記述例は以下のとおりです。
<form action="フォームの送信先のURL">
<label>お名前<input type="text" name="name"></label>
<label>生年月日<input type="date" name="dob"></label>
<button type="reset">入力内容をリセットする</button>
<button type="submit">送信する</button>
</form>
5. おわりに
今回は、HTMLのさまざまなタグについて解説しました。
「もっとHTMLについて知りたい！」という方は、ぜひ参考記事を読んだり、ご自身で調べてみたりしてください。
また、HTMLと同じくWeb開発に重要なCSSやJavaScriptについても学んでみてください。
参考記事
https://developer.mozilla.org/ja/docs/Web/HTML/Element