HTML - ウェブを織りなす構造文書
HTMLとは
HTMLは文章に意味付けのされた文書形式です。 意味付けとは
- 強調
- 引用
- 章立て(見出し)
- 箇条書き
などです。
さらに、他の文書や画像などのデータとの関連性を記述することもできます。 これは「クリックしたら他のページに移動する」「文書の中に画像を埋め込む」などです。
HTMLは何よりWWW(ウェブ)1で使用されることで馴染みがあるでしょう。 あなたが見ているこのページも(最終的には)HTMLで書かれています。
ここではHTMLを書くための具体的な手引ではなく、HTMLを理解するための初歩的な説明です。
HTMLを表示する
HTMLを表示するにはウェブブラウザを使用します。
主要なウェブブラウザとしては
- Internet Explorer
- Microsoft Edge
- Google Chrome
- Safari
- Mozilla Firefox
- Opera
- Vivaldi
などがあります。
ウェブブラウザで表示すると、書かれた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のサンプルがみたい場合
パソコンで見ているのなら、ページ上で右クリックすると「ソースを表示する」というのがあると思います。
これはこのページの内容になります。