HTMLによるウェブページ作成

7. HTMLによるウェブページ作成#

HTML（HyperText Markup Language）は，ハイパーテキストを記述するためのマークアップ言語です．ウェブページを表示するために用いられます．HTMLで記述されたファイルは，*.htmlという拡張子を持ちます．

Note

さて，ハイパーテキストとマークアップ言語とは何でしょうか？

ハイパーテキスト（HyperText）とは，ハイパーリンク（hyperlink）を通じて，他の文書やファイルへアクセスできるテキストのことです．例えば，「こちら」というリンクをクリックすると，Googleのウェブページに移動します．

マークアップ言語（Markup Language）とは，マークをつけて文書の構造や修飾などを記述する言語のことです．例えば，<b>Example</b>は，Exampleというテキストを太字で表示することを指示します．マークアップという言葉は，印刷物の作成時に，赤ペンやハイライトで文書にマークをつけることに由来します．

練習問題：

次の文字列をメモ帳に入力し，sample.htmlという名前で保存してみよう．保存されたファイルをブラウザで開いてみよう．

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
</head>
<body>
  <h1>This is a Heading</h1>
  <p>This is a paragraph.</p>
  <p>This is another paragraph with <b>bold</b> text.</p>
</body>
</html>

7.1. HTMLの基本書式#

HTMLは，タグと呼ばれる特別な記号を使って，文書の構造や修飾などを記述します．タグには，開始タグと終了タグがあります．開始タグと終了タグで囲まれた部分を内容と呼びます．開始タグ，内容，終了タグで構成される部分を要素と呼びます．

要素の一般的な書式は次の通りです：

<要素名>内容</要素名>

タグは，<と>で囲まれた文字列です．終了タグは，要素名の前に/を付けて表現します．例えば，<p>と</p>で囲まれた部分は，段落（Paragraph）として表示されます．

Note

HTMLファイルの先頭には，<!DOCTYPE html>を記述します．これは，「HTML Living Standard」という最新のHTML仕様を使用することを示します．ここで注意すべき点は，<!DOCTYPE html>はタグではなく，文書型宣言（Document Type Declaration）であるということです．

7.2. HTMLの基本構造#

HTMLは木構造を持つため，要素は入れ子構造になります．以下の例では，<p>タグの中に<b>タグが入れ子構造として含まれています．この時，p要素はb要素の親要素，b要素はp要素の子要素となります．

<p>This is another paragraph with <b>bold</b> text.</p>

上記の例の構造を木構造で表すと次のようになります．

html
├── head
│   └── title
└── body
    ├── h1
    ├── p
    └── p
        └── b

7.3. 属性#

要素には，属性を指定することができます．属性は，要素の振る舞いや外観を制御するための情報を提供します．属性は，開始タグに記述され，属性名="属性値"という形式で表現されます．例えば，<a>要素には，href属性を指定してリンク先のURLを指定します．

<a href="https://www.google.com">Google</a>
Contents