ウェブサイト/ホームページはHTML（Hyper Text Markup Language）という種類のテキストファイル（文書ファイル）でできています。インターネット上で利用される技術の標準化を推進するW3Cという団体により策定されたHTMLの規格に従って文書をマークアップ（文章の構造化や体裁を決めること）を行うことにより、ウェブブラウザが文書の内容や構造を解釈し、画面上に表示できるようになります。

HTML文書では最初にその文書がHTML文書であることを宣言した上で、文書の構成要素毎にタグと呼ばれる文字で囲うことで文書の構造や体裁が決められます。これをマークアップと呼びます。

文章の構造化

HTML文書構造化の例：

<h1>梅小路蒸気機関車館</h1>
<p>京都の梅小路蒸気機関車館には19両の蒸気機関車が保存されています。保存方法には2種類あります。</p>
<ul><li>動態保存</li><li>静態保存</li></ul>
<img src="http://ueroku.net/sites/pics/P1000796.jpg">

<h1>～<h1>は見出しであることを定義、<p>～</p>は段落、<ul>～</ul>は箇条書き、<li>～<li>は箇条書きの要素、<img>は指定したURLの画像ファイルを呼び出すことを定義しています。

文章の構造化により、どの部分が見出しか、どの部分が画像かといったこと、また文章全体でどの部分が重要なのか、文章のどの部分がひとつのまとまりを構成しているのか、といったことがコンピュータでも認識できるようになります。

上記のHTMLを実際にウェブブラウザで表示すると↓のようになります。 

梅小路蒸気機関車館

京都の梅小路蒸気機関車館には19両の蒸気機関車が保存されています。機関車は次の2種類の方法でたいせつに保存されています。

• 動態保存
• 静態保存

ウェブ上で文書を正しく構造化することは、Googleなどの検索エンジンに、ホームページの内容を正確に認知させ、検索結果に表示されるためにも不可欠です。

文章の体裁、デザイン、レイアウト

HTMLのタグで文章のデザインや体裁の設定を行うことができます。例えば、このように文章をマークアップします。

京都の<a href="http://www.mtm.or.jp/uslm">梅小路蒸気機関車館</a>には<font color=red>19両の蒸気機関車</font>が<b>保存</b>されています。

と<a>～</a>で囲まれた部分に対し、指定したURLをリンク先として組み込みます。また<font color=red>～</font>で囲まれた部分は赤い字になります。これをブラウザで表示すると↓となります。

この他に表を作ったり、入力フォームを作ったりするHTMLタグがあります。そういえば最近は殆ど使われませんが、こんなタグもありました。

<marquee>京都の梅小路蒸気機関車館には19両の蒸気機関車保存されています。</marquee>

 ↓

文章をレイアウトするマークアップです。

<table><tr><td>京都の梅小路蒸気機関車館には19両の蒸気機関車が保存されています。機関車は次の2種類の方法でたいせつに保存されています。</td><td><img src="http://ueroku.net/pics/P1000796.jpg"></td></tr></table>

<table>タグは表を作成するためのもので、<tr>は行を、<td>は列を設定します。1行の表の左の列に文章、右の列に画像を配置しています。

↓

京都の梅小路蒸気機関車館には19両の蒸気機関車が保存されています。機関車は次の2種類の方法でたいせつに保存されています。

しかし文章の強調したい部分を、その都度や赤い字にしたり太さを設定するのは面倒です。ホームページ全体で規則性を設定し、強調したい部分は、どのページでも同じように、赤い字にしたり太字にしたりできれば便利なだけでなく、ホームページ全体が見やすく、美しくなります。

またレイアウト目的のために本来表であることを示すための<table>タグを使用する方法は、文章の構造化という観点では正しい構造化とはいえません。

現在では、殆どの場合、文章の体裁やデザイン、レイアウトの設定はCSS（Cascading Style Sheet - カスケーディングスタイルシート）により行われるようになりました。