HTMLの要素（element）とは？それぞれの用途と使い方を解説
HTMLの要素（element）について、きちんと理解したいと思っていませんか？
ただ、HTMLの要素は数が多く、適切な使い方ができているのか気になりますよね？
今回は、HTMLの要素について確認しておきたい、という方のために、それぞれの要素の機能を説明しています。
組み合わせて使う要素は、なるべくまとめて紹介しました。
辞書的な使い方もできますので、ぜひ学習に活用してみてくださいね。
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 3ヶ月〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
そもそもHTMLの要素って何？
HTMLは要素を使用して構成されています。
<p>HTMLへようこそ</p><>で囲まれた部分をタグと言い、左右のタグをそれぞれ「開始タグ」「終了タグ」と呼びます。
これらタグと中のコンテンツを含んだ全体が要素になります。
タグをつけて要素にすることで、コンテンツの意味付けをしたり、機能を付加させたりすることができます。
HTMLの要素についてそれぞれ見ていきましょう。
未経験でも確実にプログラミングスキルを身につけられる！
【DMM WEBCAMP】では、専属コーチが卒業まで伴走します！
✔短期間で効率的にプログラミングスキルを身につけたい
✔プログラミングを独学で進めていくのが不安
✔家での時間を有効に使ってスキルアップがしたい
といった方におすすめです！
＼実践的なスキルが身に付くカリキュラム／
ルート要素<html>とその子要素
まずは<html>とその子要素について紹介します。一番基本的な要素なので必ず覚えるようにしましょう
<html>要素
<html>要素は、HTML文書のトップレベルに位置する要素であり、すべての要素の基準となります。
他の要素はすべてこの要素の子孫として記述します。
<head>要素
<head>要素は、タイトルやスタイルなどの文書のメタデータを記述する要素です。
記述された情報は、ユーザーに向けたものではなく、主にコンピュータが読み取るためのものです。
<body>要素
<body>要素は、文書のコンテンツを配置していく要素です。
主にここで記述した内容がブラウザに表示されます。
文書のメタデータに使われる要素
メタデータとは、データに関するデータを記述したもので、ここではHTML文書に関するデータが定義されています。
メタデータは<head>内に記述され、タイトルなど一部を除いてブラウザ上には表示されません。
<meta>要素
<meta>要素は、他のメタデータ関連要素では記述できないメタデータを記述する要素です。
主に、文書で使用する文字のエンコーディング名を指定するときに使われます。
<base>要素
<base>要素は、<head>内に1つだけ設置することができ、相対URLの基準となるURLを指定します。
指定するURLは「http://」から始まる絶対URLになります。
<link>、<a>など、URLが指定できる他のすべての要素より前に置く必要があります。
<link>要素
<link>要素は、このHTML文書と別の文書の関連付けをする要素です。
CSSファイルを使ったスタイルシートへのリンクによく使われます。
<title>要素
<title>要素は、文書のタイトルを指定する要素です。配置できるのは1つのみです。
ここで記述したものが、ブラウザのタイトルバーなどに表示されます。
<style>要素
<style>要素は、文書のスタイル情報を記述するための要素です。
主にページ単位でスタイルを適用したい場合に使います。
Webサイト全体にこのスタイルを使いたい場合は、<link>の使用をおすすめします。
【DMM WEBCAMP】は受講生の97%が未経験からのスタート！
充実のサポート体制で、プログラミングスキルを確実に身につけられます！
✔一人ひとりに合わせた学習計画で進められるため、仕事や学校と両立できる
✔未経験者のために開発された実践的なカリキュラムを用意
✔︎専属コーチが卒業まで学習をサポート
＼目的別で選べる3つのコース／
コンテンツのセクションを作る要素
コンテンツを区分けするために使われる要素です。これらの要素は<body>内に記述し、大まかな体系を決定します。
<header>要素
<header>要素は、文書全体のヘッダーセクションであることを表す要素です。
要素の中には、ロゴや見出し、検索フォームなど、導入的なコンテンツを配置します。
<footer>要素
<footer>要素は、文書全体のフッターセクションであることを表す要素です。
文書の著作者やその連絡先、関連リンクなどを記述します。
<main>要素
<main>要素は、文書全体のメインセクションであることを表す要素です。
Webページの中で伝えたい情報やアプリケーションの主な機能を示します。
<aside>要素
<aside>要素は、文書の補助的なセクションであることを表す要素です。
メインコンテンツから分離されたものとして扱い、取り除いたとしてもメインに影響が出ない場所で使います。
サイドバーを表示するときなどに利用されます。
<h1> ~ <h6>要素
この要素は見出しを表します。
<h1>が最上位の見出しとなり、全部で6段階の階層があります。
<nav>要素
<nav>要素は、同ページ内や別ページへのリンクをまとめたナビゲーションを表す要素です。
具体的な使用例として、ヘッダーに表示されるグローバルナビゲーションやパンくずリストなどがあります。
ナビゲーションに適さないリンクメニューとは区別して使われます。
<article>要素
<article>要素は、その範囲のみで完結しているセクションに使われる要素です。
ニュース記事やブログ記事など、それ単体で成立する場所で使います。
<section>要素
<section>要素は、汎用的にセクションを表したいときに使う要素です。
<nav>や<article>など、具体的に意味がある他のセクション要素では表現できないセクションに使われます。
<address>要素
<address>要素は、コンテンツを管理している個人または団体の連絡先が書かれていることを示す要素です。
主に、管理者の名前やメールアドレス、問い合わせフォームへのリンクなどを配置します。
テキストコンテンツに使われる要素
テキストコンテンツをタグで囲い、コンテンツの意味付けを行います。
<ol>要素
<ol>要素は、順序付きのリストを表すときに使う要素です。
<li>を用いて、リスト項目を記述します。
ブラウザ上では、番号付きのリストとして表示されます。
<ul>要素
<ul>要素は、<ol>と異なり、順序がない箇条書きリストを表すときに使います。
リスト項目は<li>で示します。
リストを作る<ul>、<ol>のタグは、入れ子にすることもできます。
<li>要素
<li>要素は、リスト項目を表す要素です。
親要素として、リストを表す<ul>か<ol>、もしくはメニューを表す<menu>のいずれかを設置する必要があります。
<dl>要素
<dl>要素は、説明型リストとして表すときに使います。
名前<dt>と説明<dd>の組み合わせで構成されたリストになります。
名前とその内容説明をペアで並べた用語集などに使われます。
<dt>要素
<dt>要素は、<dl>で示した説明型リストの中で、名前を表す要素です。
基本的には後に続く<dd>との組み合わせで使います。
<dd>要素
<dd>要素は、<dl>で示した説明型リストの中で、説明や定義などを表したいときに使う要素です。
内容は<dt>に関するものです。
<figure>要素
<figure>要素は、本文の流れを参照する図表などを記述する要素です。
自己完結型の要素で、離れた場所に移動したとしても、本文に影響を与えないものに使用します。
<figcaption>要素
<figcaption>要素は、<figure>で表した図表のキャプションとなる要素です。
<figure>の子要素として使い、図表の名前や説明を記述します。
<div>要素
<div>要素は、汎用的なコンテナとして使用できる要素です。
特定の範囲を同じグループとして扱うのみで、<div>自体では意味を持ちません。
CSSでスタイルを設定したい場合やその範囲でスクリプトを実行させたい場合に使われます。
インライン要素として囲う場合には、<span>を使います。
<p>要素
<p>要素は、テキストの段落を示す要素です。
タグで囲った範囲を1つのブロックとして判断します。テキストだけではなく、フォームの部品要素などにも使えます。
<pre>要素
<pre>要素は、整形済みのテキストを表す要素です。
他の場所であれば、改行・タブは半角スペースとして扱われますが、<pre>要素内では、テキストの記述がそのまま反映され、等幅フォントで表示されます。
ソースコードなど、記述したままのテキストを表示させたい場合に使います。
<hr>要素
<hr>要素は、同じセクション内で区切りを表す要素です。
セクションを分けるほどではない話題の切り替えなどで使用します。
<blockquote>要素
<blockquote>要素は、他のWebサイトなど情報源からの引用文であることを表す要素です。
<cite>を使って、引用文のタイトルを表示させることができます。
この要素は、段落単位での引用に使用されるもので、短いフレーズでの引用には<q>を使います。
インラインテキストの意味付けに使われる要素
任意の範囲のテキストに説明やスタイルなどを定義します。
<a>要素
<a>要素は、ハイパーリンクを構成する要素です。
href属性の値を指定することで、他のWebサイトやWeb上のファイル、同じページ内の場所に移動させることができます。
要素内にはリンク先を示すテキストなどを記述します。
<em>要素
<em>要素は、他の文書と比較して、特定のテキストを強調させるために使います。
要素を入れ子にすることで、段階に応じた強調を示すことができます。
強調であり重要性ではないため、重要なテキストの場合は<strong>を使います。
<strong>要素
<strong>要素は、他の文書と比較して、テキストの重要性を表すときに使います。
入れ子にすることで、重要性の度合いを段階で示すことができます。
<small>要素
<small>要素は、免責事項や著作権表示など、注釈として小さく表示するときに使います。
セクションのような広範囲のテキストではなく、短い範囲での使用が推奨されています。
<s>要素
<s>要素は、「その情報が正確ではなくなった」というときに使う要素です。
要素内に書かれたテキストは、取り消し線を引いた状態の文字列になります。
ただし、修正の場合は、<del>と<ins>を使うことを推奨されています。
<cite>要素
<cite>要素は、作品について、タイトルや著作名、URLを表すときに使います。
引用を示す<blockquote>内のタイトルとしても使用されます。
<q>要素
<q>要素は、短いフレーズでの引用を表す要素です。
ブラウザ上では、引用符で囲んだ状態で表示されます。
短いものではなく、複数の段落を含むような引用の場合は、<blockquote>を使います。
<dfn>要素
<dfn>要素は、文書の中で定義される用語を示す要素です。
title属性がある場合は、その属性の値が定義される用語となります。
子要素が1つで、title属性を持つ<abbr>の場合は、<abbr>のtitle属性の値が定義される用語です。
それ以外は、<dfn>内のテキストが定義されます。
<abbr>要素
<abbr>要素は、略語や頭字語であることを表す要素です。
title属性の値を指定することで、略す前の完全な形を示すことができます。
<code>要素
<code>要素は、ソースコードなどコンピュータが認識する文字列であるということを示すときに使います。
コードが複数行である場合、この要素は<pre>の子要素にする必要があります。
既定CSSでは等幅フォントで表示されます。
<var>要素
<var>要素は、数式やプログラムコードの変数であることを表すときに使います。
ソースコード内だけでなく、文章の中でも使用できます。
既定CSSでは、イタリックのフォントで表示されますが、意味を持たずスタイル付けの目的で使用するのは間違いです。
<samp>要素
<samp>要素は、プログラムからの出力内容のサンプルを表す要素です。
具体的には、入力に対するエラーメッセージを出力例として表示させたいときなどに使います。
<kbd>要素
<kbd>要素は、ユーザーが入力する内容を表す要素です。
キーボード入力や音声入力、その他の端末からの入力の方法について説明します。
<data>要素
<data>要素は、要素内のコンテンツをコンピュータが可読な情報にリンクさせるために使います。
コンテンツが時刻や日付であった場合には<time>を使用する必要があります。
<time>要素
<time>要素は、24時間表記の時刻、もしくは正確な日付を表すときに使います。
時刻と日付を組み合わせて記述でき、時刻のみ、日付のみでも可能です。
<sub>要素
<sub>要素は、下付き文字として表示させたいときに使います。
下付き文字は、数式や化学式など、意味がある場合にのみ使用可能です。
小さいサイズでベースラインよりも下に表示されます。スタイルが目的の場合は使用できません。
<sup>要素
<sup>要素は、上付き文字として表示させたいときに使います。
<sub>と同様、意味がある場合に使用できます。
小さいサイズで高い位置に表示されます。こちらもスタイル目的では使わないようにしましょう。
<i>要素
<i>要素は、専門の技術用語や架空の人物、思考など、何らかの理由で他と区別されるテキストを表す要素です。
他に適切な要素がない場合に使用します。重要性を表す場合は<strong>、強調を表す場合は<em>を使いましょう。
<b>要素
<b>要素は、ユーザーの注意を引きたいテキストを表す要素です。
レビュー記事内の製品名やキーワードなどに使われます。
<strong>や<em>などのように特別な意味を持たないテキストを示します。
<u>要素
<u>要素は、言語として伝わりにくいテキストを明示するために使います。
スペルミスや日本語でない固有名詞などに適用されます。
下線のラベル付けがなされるため、ハイパーリンクと誤認される場所での使用は控えた方が良いでしょう。
<mark>要素
<mark>要素は、文脈の流れの中で目立たせたいテキストの範囲をハイライト表示するときに使います。
ユーザーがそこに関心を向けるようにアピールする意味を持ちます。
具体的な例として、ユーザーが検索した際に、検索ワードと一致するテキストをハイライトさせるという使い方があります。
<bdi>要素
<bdi>要素は、一部のテキストを独立したものとして扱います。
アラビア語など言語によっては、右から左へ表記されるものがあります。
日本語や英語とアラビア語が混ざった文章を書いたときに、アルゴリズムによって周囲の表記が影響を受け、アラビア語でない箇所であっても順序が変化してしまうことがあります。
アラビア語の部分を<bdi>タグで囲って独立させておくと、想定通りの表示になります。
<bdo>要素
<bdo>要素は、テキストの書字方向を指定する要素です。
要素の中のテキストが記述されたままではなく、指定された方向に上書きされて表記されます。
<span>要素
<span>要素は、行の中で汎用的なコンテナとして使用できる要素です。
要素自体は意味を持たず、CSSでのスタイル設定やスクリプトの実行などをしたい場合に使われます。
複数の段落を囲う場合には、<div>を使います。
<br>要素
<br>要素は、改行を示す要素です。
コンテンツの中に改行を付けたいときに利用します。
段落として扱いたい場合には、<p>を使います。
<wbr>要素
<wbr>要素は、改行可能な位置を示す要素です。
折り返しのないテキストの中で、ブラウザに改行を認める場所に配置します。
改行の必要がないときには、改行されません。
<ruby>要素
<ruby>要素は、ルビを振るテキストを示す要素です。
漢字の発音を描画するときなどに使われ、テキストの上下、または横に小さな注釈として表示されます。
<rb>要素
<rb>要素は<ruby>の子要素として、ルビを振る対象のテキストを表す要素です。
<rt>要素
<rt>要素は<ruby>の子要素として、ルビを振るテキストのルビ部分を示す要素です。
<rtc>要素
<rtc>要素は、テキストに対して、2種類のルビを振りたいときに使います。
こちらも<ruby>の子要素として使います。
<rp>要素
<rp>要素は、ルビテキストを括弧記号で囲いたいときに使います。
括弧はルビ表記に対応していないため、この要素を使う必要があります。
<ins>要素
<ins>要素は、後から追加された部分であることを明示する要素です。
<del>で削除した部分を訂正する情報を追加するときなどに使われます。
<del>要素
<del>要素は、後から削除された部分であることを明示する要素です。
既定CSSでは、テキストに取り消し線が引かれます。
マルティメディア埋め込みで使用する要素
動画や画像、音声などのマルティメディアを埋め込みたいときに使います。
<img>要素
<img>要素は、画像を文書内に埋め込むときに使います。
src属性で表示させたい画像へのパスを指定します。
<picture>要素
<picture>要素は、文書に埋め込む画像の最適化ができる要素です。
ユーザーのブラウザや端末の環境に応じて、適した画像を選択し表示します。
<source>を用いて、形式の異なる画像ファイルを複数指定することができます。
<video>要素
<video>要素は、動画プレイヤーを文書内に埋め込むときに使います。
<source>を用いて、形式の異なる動画ファイルを複数指定することができます。
複数指定することで、ブラウザが対応しているファイルが再生されます。
この要素は、音声再生にも使用可能ですが、<audio>を使うことを推奨します。
<audio>要素
<audio>要素は、音声を文書内に埋め込むときに使います。
こちらも、<source>で複数の音声ファイルを指定しておくと、ブラウザが対応しているファイルが再生されます。
<track>要素
<track>要素は、動画や音声に時間指定されたテキストを埋め込みます。
<video>、または<audio>の子要素として使用します。
<area>要素
<area>要素は、イメージマップの中でクリック可能なリンク領域を定義します。
基本的に<map>内で使われます。
<map>要素
<map>要素は、イメージマップを定義する要素です。
ハイパーリンクの領域を指定する<area>とともに使われます。
マルチメディア以外のコンテンツ埋め込みで使用する要素
マルチメディア以外のコンテンツもHTMLに埋め込むことができます。
<iframe>要素
<iframe>要素は、入れ子の閲覧コンテキストを表し、現在のページに他のページを埋め込みます。
<embed>要素
<embed>要素は、文書内に外部コンテンツを埋め込む要素です。
コンテンツはプラグインで再生される動画や音声などです。
<object>要素
<object>要素は、文書内に外部リソースを埋め込む要素です。
<param>要素
<param>要素は、<object>の実行に必要なパラメータを指定する要素です。
<source>要素
<source>要素は、動画・音声・レスポンシブイメージで使用されるファイルの候補を指定します。
<video>、<audio>、<picture>の子要素として使用されます。
テーブルに使われる要素
データを表形式でまとめるときに使います。
<table>要素
<table>要素は、表を構成する要素をまとめた要素です。
この要素内に表本体や表のキャプションなどを配置していきます。
<caption>要素
<caption>要素は、表のキャプションを表す要素です。
<table>の子要素として使い、表のタイトルや説明を記述します。
<colgroup>要素
<colgroup>要素は、表の列をグループ化する要素です。
グループ単位でスタイルの指定が可能になります。
<col>要素
<col>要素は、<colgroup>の子要素として使い、1つ以上の表の列をグループ化します。
<tbody>要素
<tbody>要素は、表本体であることを示す要素です。
<thead>、<tfoot>と同様、意味的なまとまりを持つグループとして定義します。
<thead>要素
<thead>要素は、表のヘッダー部分である行のまとまりを定義します。
基本的に、表の列の見出しに使われます。
<tfoot>要素
<tfoot>要素は、表のフッター部分である行のまとまりを定義します。
<table>内の最後に置くことができます。
<tr>要素
<tr>要素は、表の行を定義する要素です。
この中に見出しセル<th>とデータセル<td>を足していきます。
<th>要素
<th>要素は、表の見出しセルを定義する要素です。
<td>要素
<td>要素は、表のデータセルを定義する要素です。
フォームに使われる要素
ユーザーが操作するフォームを作成するために使います。
<form>要素
<form>要素は、ユーザーのための入力フォームを作成する要素です。
この要素内にフォームの各部品を置いていきます。
<fieldset>要素
<fieldset>要素は、フォーム内のいくつかの部品をグループ化するときに使います。
<legend>を使うことで、このグループにキャプションを付けることができます。
<legend>要素
<legend>要素は、<fieldset>でまとめたグループのキャプションを示す要素です。
<fieldset>の子要素として使います。
<label>要素
<label>要素は、フォーム部品のキャプションを表す要素です。
フォーム部品と関連付けされた場合、<label>のクリックでもその部品がフォーカスされます。
<input>要素
<input>要素は、フォームの入力欄や選択肢、ボタンなどを作成できる要素です。
type属性の値で、どのタイプのフォーム部品なのかを指定します。
<select>要素
<select>要素は、プルダウンメニューの選択肢を作成します。
選択肢は<option>を使って表します。
<optgroup>要素
<optgroup>要素は、<select>の子要素として使い、プルダウンメニューの選択肢をグループ化します。
label属性で指定した値が、グループのラベルとして表示されます。
<datalist>要素
<datalist>要素は、入力欄と組み合わせてリストを作成する要素です。
<input>のlist属性に<datalist>のid属性の値を指定することで、入力欄の下に入力候補を表示させることができます。
入力候補の選択肢は<option>で作ることができます。
<option>要素
<option>要素は、選択肢の項目を作成する要素です。
<select>、<optgroup>、<datalist>の子要素として使い、選択肢の一覧を構成します。
<textarea>要素
<textarea>要素は、複数行の記述ができるテキスト入力欄を作成します。
メッセージ本文やレビューコメントなどの入力欄として提供できます。
<button>要素
<button>要素は、フォーム内でボタンを作成できる要素です。
ボタン動作の種類は、送信ボタン・リセットボタン・汎用ボタンとなっており、type属性の値で指定します。
<output>要素
<output>要素は、計算結果などの出力欄を作成できる要素です。
計算はスクリプトを用いて行います。
<progress>要素
<progress>要素は、作業の進捗状況を示したいときに使います。
ブラウザ上では、プログレスバーで表示されます。
<meter>要素
<meter>要素は、特定の範囲内の数値を示す要素です。
全体の総量が決まっている場合に、そのうちの割合を表示させることができます。
スクリプト言語の使用に使われる要素
動的なWebサイトやアプリを作成する際に、スクリプトに関する部分で使われる要素です。
<script>要素
<script>要素は、スクリプトの埋め込みに使用する要素です。
外部のJavaScriptファイルを読み込むか、直接要素内にコードやデータを記述して使います。
<head>、<body>のどちらにも置くことが可能です。
<noscript>要素
<noscript>要素は、スクリプトが無効の環境でのHTMLを定義します。
要素内には、無効になっていることを知らせるテキストや外部リンクなどを記述します。
<template>要素
<template>要素は、コンテンツのテンプレートを作成する要素です。
スクリプトと組み合わせて使うもので、スクリプトがテンプレートに対して処理を行います。
あらかじめ表のテンプレートを作成しておいて、そこにデータを挿入するなどの処理が可能です。
<canvas>要素
<canvas>要素は、グラフィックキャンバスを作成する要素です。
ゲームなどのグラフィックスを描画するキャンバスを用意します。
用意されるのはキャンバスの領域のみで、実際の描画にはグラフィックスを生成するスクリプトが必要になります。
インタラクティブな処理を作成する要素
ユーザーが対話形式で操作することができる要素です。
<details>要素
<details>要素は、開閉式のウィジェットを作成する要素です。
詳細情報が折りたたまれており、ユーザーのリクエストに応じてウィジェットを開くことができます。
<summary>で中の情報のキャプションを示すことが可能です。
<summary>要素
<summary>要素は、<details>の子要素として使い、詳細情報のキャプションを作成します。
<details>の先頭に表示すると、<summary>のクリックでウィジェットの開閉ができます。
まとめ：どんな要素があるか知っておくと便利
ここまで、HTMLの要素（element）について紹介してきました。
頻繁に使う要素もあれば、今回の記事で初めて知ったという要素もあったかもしれません。
すべてをきちんと覚える必要はないですが、こういう要素があるということを知っておくと便利ですよ。
実際にコードを自分で書いて試してみるのも勉強になります。
Webサイトやアプリを作成する上で、今回の記事が少しでも参考になれば幸いです。
