HTML/要素一覧

リンクを追加
出典: フリー教科書『ウィキブックス（Wikibooks）』
< HTML
（HTMLとCSSの基本 から転送）

HTMLとは[編集]

いま見ているこのページもHTMLを返しています。基本的にはウェブページはHTMLを返します。 静止画・動画・スクリプトやスタイルシートなどの他の構成要素もありますが、多くはHTMLから間接的に参照されます。

例
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>タイトル</title>
  </head>
  <body>
    <h1>レベル１の見出し</h1>
    コンテンツ
  </body>
</html>

HTML基本構成[編集]

<!DOCTYPE html>
<html lang="ja">
   <head>
      <meta charset="UTF-8">
      <link href="style.css" rel="stylesheet">
      <meta name="description" content="ページの概要">
   </head>
   <body>
      <h1>テストHTML</h1>
      <p>このページはテストHTMLです。</p>
      <p>pタグで囲った文章</p>
   </body>
</html>
表示
上のhtmlの表示結果
テストHTMLの表示


ブラウザなどの環境によって異なりますが、概ね上記のように表示されます。

DOCTYPE[編集]

<!DOCTYPE html>は、HTML Living Standard に従って書かれたHTML文書を示すものです。HTML Living Standardは、廃止されたHTML5の後継で、常に進化しているHTMLの最新の状態を表現しています。そのため、<!DOCTYPE html>を使用することで、HTML Living Standardに準拠した文書であることを示すことができます。

HTML Living Standardは、WHATWG（Web Hypertext Application Technology Working Group）によって管理されています。HTML Living Standardは、Web技術の進化や新しい機能の追加に対応するため、非定期に更新されています。

HTML Living StandardのDOCTYPEには、文書型宣言（DTD; Document Type Declaration）が含まれていないので、もはやSGMLではありません。

html要素[編集]

html要素はHTML文書のルート要素であり、全体のHTML構造を定義します。html要素は以下のように記述されます： 

<html lang="ja">
    <!-- ここにHTML文書の他の要素が入ります -->
</html>

lang属性は、要素内のテキストがどの言語で書かれているかを指定します。lang属性の値は、対象の言語を表す言語コードで指定されます。例えば、jaは日本語を表し、enは英語を表します。lang属性は主にアクセシビリティや検索エンジンのインデックスなどに使用され、ブラウザーが文書の言語を適切に解釈するのに役立ちます。

したがって、<html lang="ja">という記述は、このHTML文書が日本語で書かれていることを示しています。このようにして言語を指定することで、ブラウザーや検索エンジンが適切に文書を処理し、ユーザーにとってより使いやすい環境を提供することができます。

head要素 とは[編集]

head要素は、HTML文書内で文書のメタデータやリソースへのリンク、スタイルシートの設定、JavaScriptの埋め込みなど、文書の構造や表示方法に関する情報を含むセクションです。head要素は文書の開始タグ <html> の直後に配置され、終了タグ </head> で終わります。

以下はhead要素が含むことができる主な要素です：

  • <title>: ページのタイトルを定義します。
  • <meta>: 文書のメタデータ（文字エンコーディング、キーワード、説明など）を指定します。
  • <link>: 外部リソース（CSS、アイコン、スタイルシートなど）へのリンクを定義します。
  • <style>: 文書内で使用されるスタイルシートを定義します。
  • <script>: JavaScriptコードを埋め込むための要素です。

head要素内のコンテンツは、ブラウザーに直接表示されるものではなく、ページのタイトルや検索エンジンの索引、ページの外観や挙動を制御するために使用されます。

title要素[編集]

title要素は、HTML文書内でページのタイトルを定義するための要素です。ブラウザーのタブやブラウザーのウィンドウのタイトルバーに表示されるページのタイトルを設定します。

エンコーディング[編集]

UTF-8でエンコードされたHTML文書を正しく解釈するためには、以下のように<meta charset="UTF-8">を使用します。 

<head>
    <meta charset="UTF-8">
    <!-- 他のメタ情報やスタイルシートやスクリプトのリンクなどもここに配置 -->
</head>

このメタタグによって、ブラウザーは文書の文字エンコーディングがUTF-8であることを知り、そのように文書を解釈します。文字エンコーディングが正しく指定されていない場合、特定の文字が正しく表示されない、または文字化けが発生する可能性があります。

HTML5では、<meta charset="UTF-8">のようにcharset属性の値としてエンコーディングを直接指定することが推奨されています。

外部スタイルシート[編集]

link要素は、HTML文書内で外部リソースへのリンクを定義するための要素です。link要素を使用して外部のスタイルシートファイルをHTML文書にリンクする場合、以下のように記述します： 

<link href="style.css" rel="stylesheet">

ここでの各属性の意味は以下の通りです：

  • href="style.css": リンク先の外部スタイルシートファイルのURLまたは相対パスを指定します。この例では、style.cssという名前のスタイルシートファイルが同じディレクトリ内に存在することを前提としています。
  • rel="stylesheet": リンクされているリソースがスタイルシートであることを示します。

このようにしてlink要素を使用すると、ブラウザーは指定されたスタイルシートファイルをダウンロードし、HTML文書に適用します。これにより、外部のスタイルシートファイルに記述されたスタイルがHTML文書に適用され、ページの外観が変更されます。

body要素[編集]

body要素は、HTML文書内で実際のコンテンツ（テキスト、画像、リンク、動画、音声など）を含むセクションを定義します。ブラウザーが表示するページの実際のコンテンツは、通常はbody要素内に配置されます。

以下はbody要素が含むことができる主な要素です：

  • テキストコンテンツ（段落、見出し、リストなど）
  • 画像 <img>
  • リンク <a>
  • 動画 <video> や音声 <audio>
  • フォーム要素（入力フォーム、ボタン、ラベルなど）
  • スクリプトやスタイルシートの埋め込み（通常は<script>やstyle要素を使用）

body要素はHTML文書内で1つだけ使用される必要があり、ページの実際のコンテンツが表示されるメインエリアとなります。

HTMLの書き方[編集]

ここまで説明してきましたが、重要な「HTMLの書き方」について説明していなかったので、説明します。

「<」と「>」,「</」「>」で挟む[編集]

<開始タグ> ・・・ </終了タグ>

という順番を意識して、次の解説をお読みください。

今まで、「<body>」とか、「<link>」とか、とにかくタグを「<」「>」ではさみまくっていますが、この「<」で始まり、「>」で終わるタグを、「開始タグ」。

「</」で始まり、「>」で終わるタグを、「終了タグ」と言います。HTMLのタグは、「終了タグ」が無いものもありますが、(例えば「<link>」や「<input>」)絶対に「開始タグ」はあります。

id と classをつける[編集]

idとclassをつけると、いいことがたくさんあります。例えば、CSSで特定の修飾をつけることができます。

idとclassの付け方[編集]

id名は少しルールがありますが、自分でつけることができます。

名前のルール[編集]

ルールは、

  • 空白(スペース)を入れない
  • 英数字とハイフン( - ) とアンダースコア( _ )で記述
  • 最初の文字は必ずアルファベット

idとclass どこに書く?[編集]

説明が難しいので、HTMLコードで説明します。

<!DOCTYPE html>
<html>
    <head>
        <title>id class</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <p id="time">2022/11/1/12:00</p>
        <p class="when">編集時の時刻を教えて</p>
        <p class="when">日付も教えて</p>
    </body>
</html>

上を見たら分かる通り、「id」は使える回数が一つのページで一回。「class」は使える回数が無いのでどこでも使うことができます。

idとclassは、開始タグの「>」の前にスペースを入れて記述します。

idはなぜ一回しか使えないの?[編集]

よく、ページでリンクを見かけることがあると思います。その中でも「目次」とかでまとめられているものは、同じページの中で「スー」と移動しています。これは、a要素のhref属性を「#id名」にしているからです。もしリンクを作って同じid名が複数存在したら、どこにリンクしたらいいのかブラウザは判別できないから、「id名を使うのは一回」と決まっているわけです。

<!-- ページ内のリンク -->
<a href="#idはなぜ一回しか使えないの?">idはなぜ一回しか使えないの?</a>

複数使う場合は、「class」を使用してください。

よく使うHTML要素(body要素内)[編集]

ここにしるす要素の注意[編集]

ここにしるしている要素は、全てbody要素内で使う要素です。注意してください。

p要素[編集]

ページの段落をつくるのに使われる。　p要素の上下に少し余白ができる。

h1 ~ h6 要素[編集]

見出しを作成する要素。　h1はメインとなる見出し。それ以降は主にサブの見出しで使われる。

a要素[編集]

ハイパーリンク(つまりリンク)を作成する要素。 <a href="ページへのパス">テキスト</a>と入力するとリンクが作成できる。 

<!DOCTYPE html>
<html>
   <body>
      <a href="https://example.com/">見本のページ</a>
   </body>
</html>

ul/li 要素[編集]

ul要素の子要素としてliを使う。なので構成は、 

<ul>
   <li>コンテンツ</li>
   　　　　︙
</ul>

というふうになる。

この場合、「コンテンツ」の前に「・」がつく。

ol/li要素[編集]

ol要素の子要素としてliを使う。なので構成は、

<ol>
    <li>コンテンツ</li>
</ol>

というふうになる。

この場合、「コンテンツ」の前に「1からの番号」がつく。

img要素[編集]

画像を表示させるときに使う要素。要素の属性に「src」と「alt」があり、中でも「src」は必須の属性。altは画像がうまく読み込まれなかったときのテキストを設定する。

table要素[編集]

表を作成する要素。子要素は、caption, colgroup, thead, tbody, tfoot あるいは tr（thead, tbody, tfoot が省略された場合）。

caption要素[編集]

表のキャプションを記述します。

tr要素[編集]

テーブルのセル行を定義する。 子要素は、th要素あるいはtd要素。

th要素[編集]

セルをテーブル・セル群のヘッダーとして定義する表の見出しを作成する要素。 終了タグ省略可。

td要素[編集]

データを含むテーブルのセルを定義する。 終了タグ省略可。

section要素[編集]

それだけでは確立できないことをまとめるのに使います。sectionには、「章」といった意味があり、複数の項目があります。基本的に「h1 ~ h6要素」が入ります。

article要素[編集]

それだけで独立できる内容のときに使います。中に、「h1 ~ h6要素」が入ります。

div要素[編集]

なにかの要素にはまとめるのは難しいときに使います。子要素をグループ化してくれますが、全くCSSなどは無いため必要に応じて追加する必要があります。

span要素[編集]

div要素と同じようになにかの要素にはまとめるのは難しいときに使います。span要素はインライン要素のため、p要素等と同じように扱われますが、 全くCSSなどは無いため必要に応じて追加する必要があります。

header要素[編集]

主に、ページのタイトルやナビゲーションを囲むのに使われます。

nav要素[編集]

ページのナビゲーション(メニュー部分)を囲むのに使われます。

main要素[編集]

「main」という言葉でも分かるように、ページの一番重要な部分を記述するのに使います。中に、div・article要素などを使ってコンテンツを構造化します。

footer要素[編集]

ページの未尾に配置され、主に著作権やページに関する情報、連絡先など入れます。

br要素[編集]

改行するための要素。終了タグは必要ない。

strong要素[編集]

重要なところに使われ、太字で表示される。

form要素[編集]

フォームを作成する。「id」を付与しJavaScriptで実行すると、フォーム内の情報が取得できる。中には「input要素」などが子要素になる。

textarea要素[編集]

input要素のtype属性がtextのときよりも横縦に長い入力欄を作る。cols属性とrows属性で、この要素の大きさを指定できます。colsは平均的な文字幅で、一行に入る文字数を設定します。

style要素[編集]

CSSを直接HTMLに記述するときに使う要素。この要素内で記述したCSSは、そのHTMLでしか適用できない。

参照してほしいページ[編集]

HTML[編集]

その他[編集]

ページのHTMLを確認するには[編集]

Google chrome[編集]

  1. 右上の「︙」を選択
  2. 「その他のツール」から、「デペロッパーツール」を選択
  3. 「要素」を選ぶ

Microsoft Edge[編集]

  1. 右上の「…」を選択
  2. 「開発者ツール」を選択
  3. 「要素」を選ぶ

Firefox[編集]

  1. 右上の「ハンバーガーボタン」を選択
  2. 「ウェブ開発」を選択
  3. 「インスペクター」を選択

Internet Explorer[編集]

  1. 右上の「⚙」みたいなマークを選択
  2. F12 開発者ツールを選択
  3. DOM Explorerを選択

(ただし、最近のWindowsには「Microsoft Edge」が搭載されています)

Safari[編集]

  1. 「Safari」の「環境設定」を選択
  2. 「詳細」を選択
  3. 「メニューバーに”開発”メニューを表示」を選択
  4. 「⌘ + ⌥ + C」でJavaScriptコンソールを表示させる
  5. 要素を選択
"https://ja.wikibooks.org/w/index.php?title=HTML/要素一覧&oldid=247746" より作成