HTML/要素一覧

出典: フリー教科書『ウィキブックス（Wikibooks）』
ナビゲーションに移動 検索に移動

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 html> とは[編集]

<!DOCTYPE html>は、DOCTYPE宣言といい、省略することも可能ですが、レイアウトが崩れる可能性もあるため、基本的には宣言しておきましょう。

(DOCTYPEは小文字大文字関係ありません)

<html lang="ja"> ~ </html> とは[編集]

HTML文書であることの宣言です。
lang="ja"は言語が日本語であることを宣言しています。lang="ja"は、なくてもいいですが、基本ではある方がいいでしょう。

lang属性を追加[編集]

lang属性は、そのページの言語を指定できる属性です。 日本語なら「ja」、英語なら「en」を指定します。

<head> ~ </head> とは[編集]

ここに、ページの情報を書きます。head要素内には、title要素とmeta要素(meta要素は「<meta charset="UTF-8">」が必須なだけです。)が必須となっています。

head要素内に入れる情報[編集]

<title> ~ </title>[編集]

名前の通り、ページのタイトルを指定します。だいたい30文字以内で収めるようにしましょう。

<meta charset="UTF-8">[編集]

文字コードを「UTF-8」にするものです。その他文字コードは色々ありますが、全世界共通の「UTF-8」にするのが無難です。

<link href="style.css" rel="stylesheet">[編集]

ページにスタイルを適用したいときに使います。「rel="stylesheet"」は、変更できませんが、hrefには、相対パスを入力します。

<body> ~ </body> とは[編集]

HTMLをブラウザ上で表示するところです。タグ以外の文が表示されます。これで言うと、<body><h1>テストHTML</h1><p>このページはテストHTMLです。</p><p>pタグで囲った文章</p></body>にあたります。

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=233142" より作成