HTML/要素一覧

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の表示

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

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 編集

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

Microsoft Edge 編集

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

Firefox 編集

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

Internet Explorer 編集

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

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

Safari 編集

「Safari」の「環境設定」を選択
「詳細」を選択
「メニューバーに”開発”メニューを表示」を選択
「⌘ + ⌥ + C」でJavaScriptコンソールを表示させる
要素を選択

HTML/要素一覧

HTMLとは 編集

HTML基本構成 編集

DOCTYPE 編集

html要素 編集

head要素 とは 編集

title要素 編集

エンコーディング 編集

外部スタイルシート 編集

body要素 編集

HTMLの書き方 編集

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

id と classをつける 編集

idとclassの付け方 編集

名前のルール 編集

idとclass どこに書く? 編集

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

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

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

p要素 編集

h1 ~ h6 要素 編集

a要素 編集

ul/li 要素 編集

ol/li要素 編集

img要素 編集

table要素 編集

caption要素 編集

tr要素 編集

th要素 編集

td要素 編集

section要素 編集

article要素 編集

div要素 編集

span要素 編集

header要素 編集

nav要素 編集

main要素 編集

footer要素 編集

br要素 編集

strong要素 編集

form要素 編集

textarea要素 編集

style要素 編集

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