この用語をシェア
概要
HTML（HyperText Markup Language）は、Webページの構造と内容を定義するマークアップ言語です。1990年代初頭にティム・バーナーズ＝リーによって開発され、World Wide Webの基盤技術として現在まで進化を続けています。
HTMLは、テキスト、画像、リンク、フォームなどの要素を組み合わせてWebページを作成し、ブラウザがこれを解釈して視覚的に表示します。現在の最新バージョンはHTML5で、セマンティックな要素やマルチメディア対応が大幅に強化されています。
基本的な使い方
HTMLは「タグ」と呼ばれる記号を使って文書の構造を記述します。以下が基本的なHTMLドキュメントの例です：
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>私のWebページ</title>
</head>
<body>
<header>
<h1>ようこそ私のサイトへ</h1>
<nav>
<ul>
<li><a href="#about">について</a></li>
<li><a href="#contact">お問い合わせ</a></li>
</ul>
</nav>
</header>
<main>
<section id="about">
<h2>私について</h2>
<p>こんにちは！私は<strong>Web開発者</strong>です。</p>
<img src="profile.jpg" alt="プロフィール写真">
</section>
</main>
<footer>
<p>© 2025 私のWebサイト</p>
</footer>
</body>
</html>主な機能
- セマンティック要素：header、nav、main、section、articleなど、意味を持つ要素でページ構造を明確化
- フォーム機能：input、select、textareaなどでユーザーからの入力を受け付け
- マルチメディア対応：audio、video要素でメディアファイルの埋め込みが可能
- アクセシビリティ：alt属性、role属性などで障害者対応を支援
- メタデータ：SEO対策やソーシャルメディア対応のためのmeta要素
- Canvas要素：JavaScript と組み合わせて動的なグラフィックスを描画
- Web Storage：localStorageやsessionStorageでクライアント側にデータを保存
メリット
- 習得が容易：プログラミング経験がなくても比較的短期間で基本を身につけられる
- ブラウザ標準：すべての主要ブラウザで標準サポートされており、互換性が高い
- 検索エンジン最適化：適切なHTMLマークアップはSEO効果を高める
- アクセシビリティ：正しいHTMLは様々なデバイスや支援技術での利用を可能にする
- レスポンシブ対応：meta viewport要素などでモバイル対応が容易
- 将来性：Web技術の根幹として継続的に進化・発展している
- コスト効率：無料で利用でき、特別なソフトウェアを必要としない
関連技術
HTMLは以下の技術と密接に連携してWebサイトを構築します：
- CSS（Cascading Style Sheets）：HTMLの見た目やレイアウトをスタイリング
- JavaScript：動的な機能やインタラクションを実装
- HTTP/HTTPS：Webサーバーとの通信プロトコル
- DOM（Document Object Model）：HTMLをプログラムから操作するためのAPI
- Web API：Geolocation、Web Workers、Service Workersなどの拡張機能
- フレームワーク：React、Vue.js、Angularなどのモダンな開発フレームワーク
- CMS：WordPress、Drupalなどのコンテンツ管理システム