Simple HTMLHTMLリファレンス

Main Menu

おすすめリンク

Site Info.

HTMLリファレンス

CSSリファレンス

その他の記事

HTMLリファレンス インデックス

スポンサーリンク

HTMLタグリファレンス

HTMLの基本HTML Basic

HTMLについて

HTML(HyperText Markup Language)とは、通常のテキスト文書をインターネット上に公開する上で、コンピューターが理解出来るようにマークアップされた言語です。

HTML文書におけるタグの役割

HTMLにおけるマークアップとは、コンピュータが文書の構造を把握出来るようにするために印を付けることです。 例えば、h1~h6やpなどのタグで囲むことによって、その部位がタイトルや段落部分であることをコンピュータが認識できるようになります。

<h1>文書のヘッダ部分</h1>	h1タグによって、ヘッダ部分であることを示す
  <p>文書の段落部分</p>		pタグによって、段落部分であることを示す
	<ul>			リスト範囲の開始部分を示す
	  <li>リスト項目</li>
	  <li>リスト項目</li>
	  <li>リスト項目</li>
	</ul>			リスト範囲の終了部分を示す

まずはHTMLを書いてみる

ここではHTMLのイメージを掴んでもらうためにテキストエディタで作る方法を説明します。具体的には、以下の手順でHTMLファイルを作成します。テキストエディタはOSに付属しているメモ帳で十分です。

テキスト文書の作成

メモ帳などのテキストエディタを起動し、下のように文章を打ち込みます。

これはHTMLファイルを作成するためのサンプルテキストです。
テキスト文書のマークアップ

文章の先頭と最後にそれぞれ開始タグ終了タグを付けます。いわゆるハイパーテキストのマークアップ作業です。

<p>これはHTMLファイルを作成するためのサンプルテキストです。</p>
テキスト形式からHTML形式へ

編集が終わったら適当な名前を付けてテキスト形式で保存します。保存後のファイル名の拡張子は「○○○.txt」となっているので、拡張子(.txt)の部分を(.html)へ打ち変えます。変更後のHTMLファイルをダブルクリックするとブラウザが起動され、ファイルの内容が表示されます。

タグと要素の関係

開始タグおよび終了タグで括られた一連のテキスト文字列を要素と呼びます。HTMLでは様々な種類のタグが用意されており、下の例では段落を示す<p>タグを使って要素を定義しています。

EXAMPLE : <p>要素の構成例
開始タグ要素の内容終了タグ
<p>要素の内容・・・</p>

要素と属性

要素の開始タグには属性を付加することができます。属性を付加した要素にリンクを設定したり、語句や文章を色や線で装飾するなど、様々な機能を持たせることが可能です。下の例では、リンクを意味するアンカー要素の先頭タグ内にhref属性を付加して、リンク先アドレスを定義しています。

EXAMPLE : <a>要素と属性の構成例
開始タグ要素の内容終了タグ
<a href="http://...">要素の内容・・・</a>

属性とスタイルシート

属性は便利な機能である反面、多用すればソースコードが見難くなります。また、文書量の増加に比例して編集箇所が増えてしまい、管理が煩わしくなるデメリットが生じます。そこで、文書のデザイン(整形や装飾)は別のプロセス(スタイルシート)で行う役割の2分化という考えに基づき、デザインに関する属性はなるべくスタイルシートに置き換えるようにします。

  • 文書をタグでマークアップする→HTMLファイル(構造の管理)
  • スタイルシートで見栄えを設定する→CSSファイル(デザインの管理)

デザインをスタイルシートに置き換えることで、次のようなメリットが生まれます。

  • HTML文書のソースがスッキリと見やすいものになる
  • 複数の文書のデザイン管理の一元化
  • 全体のデータ量の削減と編集作業の負荷軽減

デザインに関する属性は、ほぼ全てスタイルシートに置き換えることができます。また、属性だけでは実現できない様々なデザイン効果も用意されています。

単一のページだけの場合は属性を使ったほうが便利な場合もありますが、複数のページをまとめてデザインする場合は、ページ数が多ければ多いほどスタイルシートが威力を発揮します。

HTML5ではどう変わる?

セマンティクスとスタイリング

HTML5では、セマンティクスとスタイリングの役割分担がより明確になっています。 聞き慣れない言葉ですが、この2つの言葉を簡単に言うと、

  • セマンティクス = タグによるマークアップ(文書上の意味を表す)
  • スタイリング = スタイルシートの適用(文書の見た目(デザイン)を表す)

ということになります。HTML5では、これらの用語がたくさん出てきますので、よく理解しておきましょう。

たとえば、車ごと船で移動する人の状態を考えた場合、普通に文章で「車ごと船に乗っている人」と書いても機械的に処理することは困難です。これをタグでマークアップしてセマンティクスを与えると、下のようになります。

<車>人</車>		車に乗った人を表す
<船><車>人</車></船>	さらに車ごと船に乗った人を表す

このようにタグでマークアップしておくと、人の状態がよくわかりますね。これだと機械的にも簡単に処理することができます。さらに、「船に乗っている車」といった条件で該当する情報を抽出することも簡単です。

Webにおけるセマンティクスとは、インターネット上のデータベースとして活用されやすいWebサイトを作るための共通基盤と言えます。

スポンサーリンク
Copyright (C) 2010 Simple HTML. All Rights Reserved.