もじゃもじゃラボ/HTML超入門！押さえておきたいマークアップの基本/タグの種類
HTMLCSSJavaScriptJava
HTMLCSSJavaScriptJava

タグの種類

HTML超入門！押さえておきたいマークアップの基本
JavaScriptでプログラミングの基本的概念を学ぼう！
Webページに動きをつけるプログラミングを学ぼう！
ライン公式アカウント
オンラインレッスンのお得なクーポン配信しています！
このチャプターの目次

タグの種類

100種類以上あるHTMLタグを、全部で11の分類に分けてみました。
種類意味例
ルートHTML文書の基点となるタグhtmlタグ
メタデータHTML文書の付加的な情報を記述する
スクリプトスクリプト（JavaScriptのこと）に関連するタグscriptタグ noscriptタグ
グループコンテンツをグループングするための分類
セクション本文を区分けした意味のあるまとまり
テキスト単語、行または任意の文字に意味付けするタグ
編集（挿入と削除）テキストの特定の範囲が編集されたことを示すinsタグ delタグ
埋め込み画像や動画などのマルチメディアコンテンツを埋め込む
テーブル表形式のデータを表示する
フォーム入力したデータを送信する入力フォーム
インタラクティブ操作に対して何らかの応答をする要素detailsタグ summaryタグ
スクリプトはJavaScriptに関連するタグのことです。scriptとnoscriptの2つのタグが存在します。noscriptは、ブラウザでJavaScriptの実行が無効にされている場合、つまりJavaScriptが動作しないときに表示される文章を記述します。これはフォールバックコンテンツと呼ばれます。noscriptタグは、ブラウザがscriptタグをサポートしていない場合に表示されるテキストや代替コンテンツを指しますが、scriptタグがサポートされている場合には表示されません。
noscriptタグは、開発者が予期せぬ状況や古い技術に対応するためのタグであり、ユーザーにより良い体験を提供する手段の一つです。ただし、現実的にはnoscriptタグが機能することはほとんどありません。なぜなら、ほぼ全てのサイトでJavaScriptを使用することが前提となっているからです。scriptタグについては、JavaScriptのレクチャーの後半で詳しく説明します。
編集は、テキストの特定の範囲が編集されたことを示します。具体的には、挿入を表すinsタグと削除を表すdelがあります。これらのタグは、追記したり削除した部分を表すために使用されます。Web上で誤った情報を公開してしまった場合、その内容を急に訂正し、存在しなかったことにすると炎上してしまうことがあります。この部分は修正したことを示すために使用され、修正前の内容を残しておきたい場合に便利です。
インタラクティブは、インタラクティブなユーザーインターフェースを作成するための要素です。「対話的な」または「双方向の」という意味で、ユーザーの操作に対して応答する対話型のコンテンツを指します。例えば、折りたたみ式の表示／非表示を切り替えるような動きがあります。

メタデータ

head

用途文書の付加的な情報を示す
書式
文書に関する付加的な情報を記述する場所です。head要素の中には、titleタグやmetaタグを使います。 これらのタグは、ブラウザには表示されませんが、検索エンジンやSNSなどで重要な役割を果たします。例えば、検索結果やSNSでシェアされた際のタイトルや説明文として使用されます。適切に設定することで、ウェブサイトの可視性や魅力を高めることができます。

title

用途文書のタイトル
書式
ウェブページのタイトルを指定するためのタグです。ブラウザのタブやブックマークに表示されるテキストとなります。検索エンジンの結果にも表示されるため、ページの内容を適切に表現する簡潔なタイトルを設定することが重要です。

meta

用途文書の付加情報
書式
文書の付加情報の記述にはmetaタグを使用します。属性を使用して、どのような情報かを指定します。文字コードはcharset属性で指定します。文書の概要や筆者を記述するためには、name属性を使用します。name属性にdescriptionを指定すると概要となり、authorを指定すると筆者となります。これらの属性はcontent属性とセットで使用されます。概要や筆者を示す値はcontent属性に指定します。
metaタグは、検索エンジン最適化（SEO）にも重要な役割を果たします。例えば、descriptionに設定した内容は、検索結果のスニペット（ページの説明文）として表示されることがあります。また、viewport属性を使用してモバイルデバイスでの表示を最適化したり、robots属性でクローラーの動作を制御したりすることもできます。適切に設定されたmetaタグは、ウェブサイトの可視性と性能を大幅に向上させる可能性があります。