HTML - ウェブを織りなす構造文書

HTMLとは

HTMLは文章に意味付けのされた文書形式です。 意味付けとは

などです。

さらに、他の文書や画像などのデータとの関連性を記述することもできます。 これは「クリックしたら他のページに移動する」「文書の中に画像を埋め込む」などです。

HTMLは何よりWWW(ウェブ)1で使用されることで馴染みがあるでしょう。 あなたが見ているこのページも(最終的には)HTMLで書かれています。

ここではHTMLを書くための具体的な手引ではなく、HTMLを理解するための初歩的な説明です。

HTMLを表示する

HTMLを表示するにはウェブブラウザを使用します。

主要なウェブブラウザとしては

などがあります。

ウェブブラウザで表示すると、書かれたHTMLそのものではなく、HTMLによって意味づけられた内容を解釈したものが表示されます。 つまり、画像を埋め込むことを示した箇所は、その記述ではなく画像が表示されます。

ウェブはHTML文書でできており、ウェブブラウザを使ってそれを解釈した状態で表示したり、操作して他のページに移動したりできます。

HTMLを書く

HTMLを書くためにはテキストエディタが必要です。

Windowsであれば最低限のものとしてはWindowsに付属する「メモ帳」でも書くことができます。 ただし、メモ帳はHTMLを書くのに適しているわけではありません。

メモ帳で書くことができることからわかるように、HTMLは特別なソフトを必要としません。 決まった書き方にそって記述するテキストファイルです。

HTMLの書き方

はじめに

HTMLには “SGML” と “XML” という2種類の形式に添って記述できる、2タイプがあります。 XMLによって記述する場合、XHTMLと言う場合もあります。

SGMLベースのHTMLは複雑なので、ここではXMLベースのXHTMLの話をします。

要素

HTMLはテキストをタグで囲むことで「要素」を示します。

例えば次の例では、強調を意味するem要素で、テキストは「月」です。

<em></em>

テキストの一部分を別の要素にすることもできます。

今夜は<em></em>が綺麗ですね

ただし、テキストは何かしらの要素の一部でなくてはいけません。2

属性

タグには

属性名="属性値"

という形で属性を示すことができます。 属性は要素に対する付加的な情報です。

例えば次の例では、http://example.com/sample.jpgという場所にある画像3であることを示しています。

<img src="http://example.com/sample.jpg"></img>

Void要素

HTMLの要素の中には「要素の中になにもない」と決まっている要素があります。

そのような要素は/>という形でタグを終端することで、閉じタグを省略することができます。

img要素はVoid要素なので、前述の画像の例では

<img src="http://example.com/sample.jpg" />

と書くことが出来ます。

骨組み

HTMLは次の構造を基にします。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  </head>
  <body>
  </body>
</html>

head要素は文書のタイトルや著者など文書上には表示されない情報を記述します。 body要素は表示される部分を記述します。

基本的な要素

head要素の中に文書のタイトルであるtitle要素を記述し、body要素に段落を示すp要素を使って文章を記述していきましょう。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>はじめての文書</title>
  </head>
  <body>
    <p>こんにちは。</p>
    <p>これははじめてのHTML文書です</p>
    <p>p要素は段落を示します。</p>
  </body>
</html>

HTMLでは連続するスペースや改行はひとつのスペースだとみなされます。

HTMLを取り巻くもの

CSS

CSSはHTMLの見た目を定義するものです。

基本的にHTMLは「見出し」「段落」など意味であり、それが実際にどのような見た目になるかということは決まっていません。

CSSはその見た目を記述することができます。

JavaScript

JavaScriptは動きを定義するものです。

HTMLはあくまでただの文書ですから、プログラムのようにロジックを組み込むことはできません。 ですから、動きをもたせたり、操作に反応して何かを変更したりすることはできません。

JavaScriptはプログラムを記述することができ、 文書の中にロジックや仕掛けを組み込むことができます。

HTMLのサンプルがみたい場合

パソコンで見ているのなら、ページ上で右クリックすると「ソースを表示する」というのがあると思います。

これはこのページの内容になります。


  1. 用語としては誤用ですが、「インターネット」や「ホームページ」と言う人もいます。↩︎

  2. テキスト自体も要素なのですが、テキスト要素は他の要素の子要素でなくてはいけないという決まりになっています。↩︎

  3. このアドレスに実際に画像は存在しません。↩︎

«