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

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

Microsoft Edge 編集

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

Firefox 編集

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

Internet Explorer 編集

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

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

Safari 編集

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

HTML/要素一覧

HTMLとは 編集

HTML基本構成 編集

<!DOCTYPE html> とは 編集

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

lang属性を追加 編集

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

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

<title> ~ </title> 編集

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

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

<body> ~ </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要素 編集

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