KnowHub

HTML 言語の紹介

概要

HTML はウェブページで使用される言語で、ウェブページの構造と内容を定義します。ブラウザがウェブサイトにアクセスする際、実際にはサーバーから HTML コードをダウンロードし、その後ウェブページをレンダリングします。

HTML の正式名称は「ハイパーテキストマークアップ言語」（HyperText Markup Language）で、1990 年代に欧州原子核研究機構の物理学者ティム・バーナーズ＝リー（Tim Berners-Lee）によって発明されました。最大の特徴はハイパーリンクをサポートしていることで、リンクをクリックすることで他のウェブページに移動でき、これによってインターネット全体が構成されています。

1999 年に HTML 4.01 が発表され、広く受け入れられる HTML 標準となりました。2014 年には HTML 5 が発表され、現在使用されているバージョンです。

ブラウザでのウェブ開発には、HTML、CSS、JavaScript の三つの技術が関わります。HTML 言語はウェブページの構造と内容を定義し、CSS スタイルシートはウェブページのスタイルを定義し、JavaScript 言語はウェブページとユーザーとの相互作用を定義します。HTML 言語はウェブ開発の基礎であり、CSS と JavaScript は HTML に基づいて機能します。これら二つがなくても、HTML 自体は使用でき、基本的な内容表示を完了することができます。本チュートリアルでは HTML 言語のみを紹介します。

以下は、シンプルなウェブページの HTML ソースコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>ウェブページのタイトル</title>
</head>
<body>
  <p>こんにちは、世界</p>
</body>
</html>

このコードは、hello.html というファイル名で保存できます。ブラウザでこのローカルファイルを開くと、「こんにちは、世界」という文字が表示されます。

ブラウザの右クリックメニューの「ソースを表示」（View page source）を使うことで、現在のウェブページの HTML ソースコードを表示できます。

ウェブページの基本概念

タグ

ウェブページの HTML コードは、多くの異なるタグ（tag）で構成されています。HTML 言語を学ぶことは、さまざまなタグの使い方を学ぶことです。

以下はタグの一例です。

<title>ウェブページのタイトル</title>

上記のコードでは、<title> と </title> は一対のタグです。

タグはブラウザに対して、このコードの処理方法を指示します。タグの内容は、ブラウザがレンダリングし、ウェブページに表示する内容です。

タグは一対の山括弧内に置かれます（例：<title>）。ほとんどのタグはペアで出現し、開始タグと終了タグに分かれ、終了タグではタグ名の前にスラッシュが追加されます（例：</title>）。ただし、一部のタグはペアで使用されず、開始タグのみで終了タグがない場合があります。例えば、前の例の <meta> タグです。

<meta charset="utf-8">

上記のコードでは、<meta> タグには終了タグ </meta> はありません。

このように単独で使用されるタグは、通常、タグ自体が機能を完結するため、タグ間の内容は必要ありません。実際のアプリケーションでは、主にブラウザに特別な処理を促すために使用されます。

タグは入れ子にすることができます。

<div><p>こんにちは、世界</p></div>

上記のコードでは、<div> タグの内部に <p> タグが含まれています。

入れ子にする際は、正しい閉じ順序を保証する必要があり、層を越えた入れ子にすることはできません。そうしないと、予期しないレンダリング結果が生じる可能性があります。

<div><p>こんにちは、世界</div></p>

上記のコードは、誤った入れ子であり、閉じ順序が不正確です。

HTML タグ名は大文字と小文字に敏感ではありません。例えば、<title> と <TITLE> は同じタグです。ただし、一般的には小文字を使用するのが習慣です。

また、HTML 言語はインデントや改行を無視します。以下のいずれかの書き方のレンダリング結果は同じです。

<title>ウェブページのタイトル</title>

<title>
  ウェブページのタイトル
</title>

<title>ウェブ
ページのタイトル</title>

さらに言えば、ウェブページの HTML コード全体を一行で書くことも可能で、ブラウザは同様に解析し、結果は完全に同じです。したがって、正式にウェブページを公開する前に、開発者は時々ソースコードを一行に圧縮して、転送するバイト数を減らします。

さまざまなウェブページのスタイル効果、例えば内容のインデントや改行は、主に CSS によって実現されます。

要素

ブラウザがウェブページをレンダリングする際、HTML ソースコードを解析してタグツリーを作成します。各タグはツリーのノード（node）であり、このようなノードをウェブ要素（element）と呼びます。したがって、「タグ」と「要素」は基本的に同義語ですが、使用される場面が異なります。タグはソースコードの視点から見たものであり、要素はプログラミングの視点から見たものです。例えば、<p> タグはウェブの p 要素に対応しています。

入れ子のタグはウェブ要素の階層関係を構成します。

<div><p>こんにちは、世界</p></div>

上記のコードでは、div 要素の内部に p 要素があります。上層の要素は「親要素」と呼ばれ、下層の要素は「子要素」と呼ばれます。つまり、div は p の親要素であり、p は div の子要素です。

ブロック要素とインライン要素

すべての要素は大きく二つに分けられます：ブロック要素（block）とインライン要素（inline）。

ブロック要素はデフォルトで独立した領域を占有し、ウェブページ上で自動的に新しい行に移動し、100% の幅を占有します。

<p>こんにちは</p>
<p>世界</p>

上記のコードでは、p 要素はブロック要素であるため、ブラウザは内容を二行に分けて表示します。

インライン要素はデフォルトで他の要素と同じ行にあり、改行を発生させません。例えば、span はインライン要素であり、通常は特定のスタイルを指定するために使用されます。

<span>こんにちは</span>
<span>世界</span>

上記のコードでは、span 要素はインライン要素であるため、ブラウザは二行の内容を一行に表示します。

属性

属性（attribute）はタグの追加情報であり、空白でタグ名や他の属性と区切られます。

<img src="demo.jpg" width="500">

上記のコードでは、<img> タグに二つの属性があります：src と width。

属性は等号で属性値を指定できます。例えば、上記の demo.jpg は src の属性値です。属性値は一般的に二重引用符で囲まれますが、必須ではありません。ただし、常に二重引用符を使用することが推奨されます。

属性名は大文字と小文字に敏感ではなく、onclick と onClick は同じ属性です。

HTML は多くの属性を提供し、タグの動作をカスタマイズします。詳細な情報については公式ドキュメントを参照してください。

ヘッダー

ウェブページの構造は、<head> タグの内部でメタデータや外部リソースの情報を定義します。

<head>
  <meta charset="utf-8">
  <base href="https://example.com/">
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
  <noscript>JavaScript が無効になっています。</noscript>
</head>

上記のコードで、<head> タグ内のタグの意味は以下の通りです。

  • <meta>：ウェブページのメタデータを定義。
  • <base>：基準 URL を定義。
  • <script>：外部 JavaScript ファイルを接続。
  • <noscript>：JavaScript が無効になっている場合の内容を定義。

<meta>

<meta> タグはウェブページのメタデータを設定するために使用され、ウェブページに関する情報を説明するものです。

メタデータはウェブページに関する記述情報であり、直接ウェブページに表示されることはありませんが、ウェブページのレンダリングや SEO（検索エンジン最適化）に影響を与えます。

<meta charset="utf-8">

上記のコードでは、<meta> タグはウェブページの文字コードを設定し、特に日本語を含むさまざまな文字を表示できるようにします。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

上記のコードでは、<meta> タグはモバイルおよびタブレット上でのウェブページの適応性を設定します。

name 属性はメタデータの名称を指定し、content 属性はメタデータの値を指定します。

<link>

<link> タグは外部リソースを接続するために使用され、主に CSS スタイルシートをインポートするために使用されます。

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

上記のコードでは、<link> タグが style.css という名前の外部スタイルシートを接続しています。

rel 属性は接続のタイプを示し、通常は stylesheet を使用します。href 属性は接続するファイルのパスを指定します。

<title>

<title> タグはウェブページのタイトルを設定します。その内容はブラウザのタブに表示され、通常は検索エンジン結果ページのリンクテキストになります。

<title>ウェブページのタイトル</title>

上記のコードの内容がウェブページのタイトルです。

<body>

<body> タグはウェブページの主要な内容領域であり、ブラウザは <body> 内のすべての内容をページにレンダリングします。

<body>
  <p>こんにちは、世界</p>
</body>

<body> は <html> の二つ目の子要素です。

<body> タグ内には、ウェブページの内容を豊かにするためにさまざまなタグを追加できます。

結論

本節では HTML の基本概念、基本構造、一般的なタグについて紹介しました。HTML の基本知識を習得することで、より良いウェブ開発が可能になります。

作者: wangdoc

アドレス: https://wangdoc.com/

ライセンス: クリエイティブ・コモンズ 3.0

次の章