HTML、XML、DHTMLの特徴
この記事では、Webページ作成における3つの重要な技術、HTML、XML、DHTMLの違いと特徴について解説します。
HTML (HyperText Markup Language)
HTMLは、Webページの構造と内容を記述するための基本的なマークアップ言語です。ブラウザは、HTML文書を読み込み、その内容を画面に表示します。
特徴
- 習得が容易: シンプルで直感的な構文であり、初心者でも比較的容易に習得できます。
- タグベース: テキストを囲むタグを使用して、見出し、段落、リストなどの要素を定義します。
- 表示の制御: フォント、色、レイアウトなど、Webページの表示を制御する要素を提供します。
例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTMLの例</title>
</head>
<body>
<h1>見出し</h1>
<p>これは段落です。</p>
</body>
</html>XML (eXtensible Markup Language)
XMLは、データの構造と意味を記述するためのマークアップ言語です。HTMLとは異なり、XML自体はデータの表示方法を規定しません。
特徴
- 拡張性: ユーザーが独自のタグを定義できるため、様々な種類のデータを表現できます。
- データの構造化: データを階層構造で表現し、データの整理と検索を容易にします。
- データ交換: プラットフォームに依存しない形式でデータを記述するため、異なるシステム間でのデータ交換に適しています。
例
<?xml version="1.0" encoding="UTF-8"?>
<書籍>
<タイトル>吾輩は猫である</タイトル>
<著者>夏目漱石</著者>
<出版年>1905</出版年>
</書籍>
DHTML (Dynamic HTML)
DHTMLは、HTML、CSS、JavaScriptなどの技術を組み合わせて、動的でインタラクティブなWebページを作成するための手法です。
特徴
- 動的なコンテンツ: JavaScriptを使用して、ユーザーの操作に応じてページの内容を動的に変更できます。
- インタラクティブ性: ユーザーの入力やマウスの動きに反応して、ページの表示や動作を変えることができます。
- 表現力の向上: アニメーション、エフェクト、ドラッグ＆ドロップなどの高度な機能を実装できます。
例
以下の例では、ボタンをクリックすると段落の表示/非表示を切り替えるDHTMLのコードを示します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>DHTMLの例</title>
<script>
function toggleParagraph() {
var paragraph = document.getElementById("myParagraph");
if (paragraph.style.display === "none") {
paragraph.style.display = "block";
} else {
paragraph.style.display = "none";
}
}
</script>
</head>
<body>
<button onclick="toggleParagraph()">段落の表示/非表示</button>
<p id="myParagraph">これは表示/非表示を切り替える段落です。</p>
</body>
</html>まとめ
QA
Q1: HTMLとXHTMLの違いは何ですか？
A1: XHTMLは、HTMLをより厳密なXMLの規則に従って再定義したものです。XHTMLでは、タグの閉じ忘れや大文字・小文字の区別などが厳密にチェックされます。
Q2: XMLはどのような場面で使われていますか？
A2: XMLは、Webサービスでのデータ交換、設定ファイルの記述、文書の構造化など、様々な場面で使用されています。
Q3: DHTMLを使うメリットは何ですか？
A3: DHTMLを使用すると、ユーザーの操作に動的に反応する、よりインタラクティブで魅力的なWebページを作成することができます。