基本的なHTMLの構文

基本的な HTML の構文初学者向けの HTML 構文ガイド 1

1. HTML要素の構成 (1) HTMLの文章は、 のように < と > で囲まれた文章がたくさん登場します。
これをHTMLの「要素」と呼び、要素は開始タグ、内容、終了タグの3つで構成されます。開始タグ: 要素の始まり（例: ）内容: 実際に表示されるテキストなど終了タグ: 要素の終わり。スラッシュ / が付きます（例: ） 私の猫はめっちゃかわいい！ 構造: <タグ名> 内容 </タグ名> 2

1. HTML要素の構成 (2) 開始タグ、終了タグはブラウザでページを見た時に表示されませんが、ブラウザに対して「この内容は xxx のために使うよ」ということを伝えます。例えば、 <h1> は「この内容は
"見出し" のために使うよ」ということを表し、 は「この内容は "段落" のために使うよ」という意味になります。 <h1>猫の紹介</h1> 私の猫はめっちゃかわいい！ 3

2. HTMLのコメントブラウザには表示されないメモをコード内に残すことができます。  で終わります。 ここは表示されます。  ここも表示されます。 4

3. タグの入れ子構造要素の中には別の要素を入れられます。ルール: 最後に開いたタグを最初に閉じる必要があります。正しい例  My
cat is very grumpy. 間違った例  My cat is very grumpy. 5

4. 空要素内容（コンテンツ）を持たない要素を「空要素」と呼びます。これらは終了タグを記述しません。代表的な例: 画像を表示する <img> タグ  <img src="https://example.com/image.jpg" alt="画像の説明"> ※ XHTMLなどの厳密なルールでは <img ... /> と書くこともありますが、HTML5では / は必須ではありません。 6

5. 属性とその書き方要素に追加の情報を与えるものを「属性」と呼びます。開始タグの中に記述します。書き方のルール: 1. 属性名と値の間は = でつなぐ 2.
値は引用符（ " または ' ）で囲む 3. タグ名と属性の間はスペースを空ける  編集者のメモです。 7

6. HTML全体で必要な要素 HTML文書の骨組みとなる基本的な構造です。 <!DOCTYPE html>  <html lang="ja">
 <head>  <meta charset="utf-8"> <title>私のテストページ</title> </head> <body>  これは私のページです。 </body> </html> 8

7. HTMLのホワイトスペース HTMLでは、連続する半角スペースや改行は、ブラウザでの表示時に1つのスペースにまとめられます（無視されます）。コードを見やすく整形（インデント）するために使われます。  
Dogs are silly. ブラウザでの表示結果: Dogs are silly. 9

8. 特殊な文字の表示（文字参照）「じゃあ、たくさんスペースを表示させたい場合はどうする？」「 < や > を文字として表示したい場合は？」 → 文字参照（実体参照）
という特殊なコードを使います。例えば、 "< >" と表示したい場合は以下のように書きます。  < > ※ こういう方法がある、ということを覚えていれば、書き方を覚えている必要はありません！ 10

基本的なHTMLの構文

基本的なHTMLの構文

Learn4 Programming School

Featured

Transcript

基本的な HTML の構文初学者向けの HTML 構文ガイド 1

1. HTML要素の構成 (1) HTMLの文章は、 <p> のように < と > で囲まれた文章がたくさん登場します。

1. HTML要素の構成 (2) 開始タグ、終了タグはブラウザでページを見た時に表示されませんが、ブラウザに対して「この内容は xxx のために使うよ」ということを伝えます。例えば、 <h1> は「この内容は

2. HTMLのコメントブラウザには表示されないメモをコード内に残すことができます。  で終わります。 <p>ここは表示されます。</p> <!-- ここはコメントなのでブラウザには表示されません。

3. タグの入れ子構造要素の中には別の要素を入れられます。ルール: 最後に開いたタグを最初に閉じる必要があります。正しい例  <p>My

4. 空要素内容（コンテンツ）を持たない要素を「空要素」と呼びます。これらは終了タグを記述しません。代表的な例: 画像を表示する <img> タグ <!-- imgタグは閉じタグが不要

5. 属性とその書き方要素に追加の情報を与えるものを「属性」と呼びます。開始タグの中に記述します。書き方のルール: 1. 属性名と値の間は = でつなぐ 2.

6. HTML全体で必要な要素 HTML文書の骨組みとなる基本的な構造です。 <!DOCTYPE html>  <html lang="ja">

8. 特殊な文字の表示（文字参照）「じゃあ、たくさんスペースを表示させたい場合はどうする？」「 < や > を文字として表示したい場合は？」 → 文字参照（実体参照）