Web開発の基礎3：HTMLの主な用語と概念を一目で見る

by

HTML(HyperText Markup Language)は、ウェブページの構造を定義するために使用する言語です。 これを理解するには、主要な用語や概念を知る必要があります。以下でHTMLの核心的な用語をまとめました！

HTML の主な用語と概念

HTMLはウェブページの構造を定義する言語です。Web開発を始めるために知っておくべきHTMLの基本的な用語は以下の通りです。

用語説明
タグ(Tag)HTMLの基本的な構成要素。 アンクレット(< >)で囲まれ、Web要素を定義します。
要素(Element)タグとコンテンツを含む全体の構造。例：<タグ>内容</タグ>の形です。
属性(Attribute)タグに追加情報を提供するキーと値のペア。例：<タグ属性="値">内容</タグ>。
ヘッド(Head)文書のメタ情報を定義する領域。<head>タグの中に作成されます。
本文(Body)ウェブページに表示される主なコンテンツ領域。<body>タグ内に作成されます。
HTML5(HTML5)HTMLの最新標準バージョンで、マルチメディアとインタラクション機能を強化します。
DOCTYPE文書のHTMLバージョンを定義する宣言。例：<!DOCTYPE html>.
コメント(Comment)コードの説明を追加する領域で、ブラウザには表示されません。 例：<!-- content -->.

主なHTMLタグと説明

1. 基本構造タグ

  • <html>: HTML文書のルート要素で全てのタグを包みます。
  • <head>: 文書の設定やメタ情報を定義する領域です。
  • <body>: 実際にウェブページに表示されるコンテンツを作成する領域です。

2. テキスト関連タグ

  • <h1>~<h6>: タイトルを表示するタグで、<h1>が最も重要で大きさが大きいです。
  • <p>: 段落を表すタグで、本文テキストに使用します。
  • <b>と <strong>: テキストを太字で表示します。 <strong>は意味的に強調を表します。
  • <i>と <em>: テキストを斜体で表示します。<em>は意味的な強調を含みます。
  • <br>：改行タグでテキストを次の行に移動します。
  • <hr>: 水平線を挿入します。

3. リンクと画像タグ

  • <a>: ハイパーリンクを追加するタグです。href属性でリンクアドレスを指定します。
    例:<a href="https://example.com">ここをクリックしてください</a>。
  • <img>: 画像を挿入するタグです。src属性で画像のパスを指定し、alt属性で代替テキストを提供します。
    例：<img src="image.jpg" alt="画像の説明">。

4. リストタグ

  • <ul>: 順序のないリストを生成します。
  • <ol>: 順序のあるリストを生成します。
  • <li>：リスト項目を定義します。
    例:htmlコピー編集<ul><li>項目1</li> <li>項目2</li> </ul> </ul> </li

5. テーブル関連タグ

  • <table>: 表を生成します。
  • <tr>: 表の行(Row)を生成します。
  • <td>：データセルを定義します。
  • <th>: 表のヘッダーセルを定義します。
    例:htmlコピー編集<table> <tr><th>タイトル1</th> <th>タイトル2</th> </tr> <tr> <td>内容1</td> <td>内容2</td> </tr> </table> </tr> </td> </table

6. フォームタグ

  • <form>: ユーザーの入力を受けるフォームです。
  • <input>: 単一の入力フィールドを生成します。
  • <button>: ボタンを生成します。
  • <textarea>: 複数行のテキスト入力フィールドを生成します。
    例:htmlコピー編集<form><input type="text" placeholder="名前を入力してください"> <button>送信</button> </form> </button> </form> </font

7.メタ情報

  • <meta>: 文書の情報（文字セット、キーワードなど）を定義。
  • <title>: ウェブページのタイトルを定義。ブラウザのタブに表示。

🛠️ HTML属性(Attribute)の概念

  • 定義: タグに追加的な情報を提供するキーと値のペア。
  • 形式:<タグ属性名="属性値">内容</タグ>。
  • 主な属性
    • id: 一意の識別子。
    • class: 複数の要素をグループ化。
    • style: インラインスタイル指定。
    • href：リンクパス。
    • src：リソースのパス(画像、動画など)。
    • alt: 代替テキスト(画像が使えない場合に表示)。

1. HTML属性の概念

属性はタグに追加情報を提供し、常に属性名="属性値"の形で作成されます。主な属性は以下の通りです。

  • id: 一意の識別子を提供します。
  • class: 複数の要素をグループ化するときに使います。
  • style: インラインスタイルを指定します。
  • href：リンクのパスを定義します。
  • src: 画像やスクリプトファイルのパスを指定します。
  • alt: 画像が使えない時に表示される代替テキストを指定します。

2. HTML文書の基本構造

HTML文書は次のような基本構造を持ちます。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML の基本構造</title> </title> </head> <body> <h1>こんにちは！</h1> <p>HTMLはウェブページを作成するための基礎です</p> </body> </html> </html> </p> </p> </html> </html

よくある質問

Q.HTMLコードはどこで実行されますか？


HTMLコードはウェブブラウザで実行され、ファイルを保存した後、ブラウザで開くと実行結果を見ることができます。

Q.HTMLはプログラミング言語ですか？


いいえ、HTMLはマークアップ言語で、ウェブページの構造を定義するために使用されます。動的な機能はJavaScriptで実装します。

Q.HTML5は何が違うのですか？


HTML5は、以前のバージョンに比べ、マルチメディア要素(<video >、<audio>など)とインタラクティブ機能をより簡単に追加することができます。

Q.<div>と <span>の違いは何ですか？

<div>はブロック要素で一行全体を占め、レイアウトを構成するために使用されます。<span>はインライン要素でテキストの特定の部分を飾るときに使用されます。

HTML学習のヒント

  • 基本構造を理解する: HTMLタグはネスト構造になっています。
  • 実践中心で学ぶ: 簡単なHTML文書を直接作成して実行してみてください。
  • CSSとJavaScriptと一緒に学習: HTMLだけでは限界があるので、スタイリング(CSS)と動的機能(JavaScript)を一緒に学ぶと良いです。

これでHTMLの基本用語と概念に慣れましたか😊？

Content

→ Content View