HTML の基本について

2022-10-28 HTML

HTMLの基本では、HTML とその機能の基本的な理解ができるように説明します。まずは、どのような言語なのか、プログラミング言語とは違うのかを区別しましょう。

HTMLとは？

HTML は Hyper Text Markup Language の略で、Web ページを開発するために使用する言語です。基本的な概念や要素、文法についての基礎的な知識を指します。Markup Language の名の通りマークアップ言語（文書にマークをつける言語）であって、プログラミング言語ではありません。HTMLではタグと呼ばれる目印を使い、テキストをどのように表示するか指示します。ブラウザが、このタグにあわせて表示を行うことでWebページが表示されます。

HTML歴史のまとめ

HTML（HyperText Markup Language）は、1990年にティム・バーナーズリーによって開発されたマークアップ言語です。その後、W3Cによる標準され、さまざまなバージョンがリリースされてきました。

主なHTMLのバージョンと特徴は以下の通りです。

HTML 1.0

初めてHTML 1.0を標準化されたバージョンであり、基本的なマークアップ要素を含んでいました。

HTML 2.0

1995年にリリースされ、テーブルやフォームなどの新しい要素が導入されました。

HTML 3.2

1997年に登場し、フレーム、画像マップ、スタイルシートなどの新機能が追加されました。

HTML 4.01

1999年にリリースされ、より厳密な文法とスタイルシートのサポートが導入されました。

XHTML 1.0

2000年に提案され、XML（eXtensible Markup Language）に基づくHTMLの拡張バージョンとして標準化されました。

HTML5

2014年に公開されたHTMLの最新バージョンであり、多くの新機能や改良が含まれています。

HTML5は、オーディオやビデオの統合、キャンバス要素、地理的位置情報の取得など、より多くのマルチメディア機能をサポートしています。

HTML5の導入により、ウェブ開発者はより豊かなコンテンツやインタラクティブなウェブアプリケーションを開発することができるようになりました。さらに、モバイルデバイスへの対応やアクセシビリティの向上など、さまざまな改善も行われました。

HTMLの進化は、ウェブの発展とともに継続しており、最新の技術や要件に合わせて新しいバージョンや仕様が開発されています。

HTMLの仕様

HTMLの仕様はW3C（World Wide Web Consortium）によって策定されています。W3Cは、ウェブの標準化と技術の発展を促進するための国際的な組織です。

現在のHTMLの仕様はHTML5です。HTML5は、ウェブ開発者がより豊かなコンテンツやインタラクティブなウェブアプリケーションを作成するための機能や改善を提供します。

HTML5の仕様は、以下の主要なコンポーネントで構成されています。

HTML文法（HTML syntax）

HTML文書の正しい文法とマークアップのルールについて定義されています。開始タグ、終了タグ、属性、要素の入れ子構造などが含まれます。

要素（Elements）

HTMLの要素は、特定の目的や機能を持つタグで表されます。要素は、テキスト、画像、リンク、テーブル、フォームなどのコンテンツを表示するために使用されます。仕様では、それぞれの要素の意味や使用法、サポートする属性などが定義されています。

属性（Attributes）

属性は、要素に追加の情報や設定を提供します。例えば、画像のソースを指定するためのsrc属性や、リンクのアドレスを指定するためのhref属性などがあります。仕様では、それぞれの属性の目的や許容される値などが定義されています。

グローバル属性（Global attributes）

グローバル属性は、複数の要素で共通して使用できる属性です。例えば、id属性やclass属性は、要素に一意の識別子やスタイリングのためのクラスを指定するために使用されます。

HTMLの基本構造

HTMLの基本構造は以下のようになっています。

<DOCTYPE html>

HTML文書の最初の行には、文書のタイプを示すDOCTYPE宣言があります。<DOCTYPE html>はHTML5のDOCTYPE宣言であり、最新のHTMLバージョンを使用することを指定します。

html要素

<html>要素はHTML文書のルート要素です。この要素は全体の文書を囲み、他の要素を含みます。

head要素

<head>要素はメタデータや文書の情報を含むセクションです。タイトルやスタイルシート、JavaScriptファイルのリンクなど、ページの見た目や動作に関する情報がここに含まれます。

body要素

<body>要素は実際のコンテンツを含むセクションです。テキスト、画像、リンク、テーブル、フォームなどの要素は、ここに配置されます。

以下は、基本構造を持つHTMLの例です。

<!DOCTYPE html>
<html>
<head>
  <title>ウェブページのタイトル</title>
</head>
<body>
  <h1>見出し1</h1>
  <p>段落のテキストです。</p>
  <img src="画像のURL" alt="代替テキスト">
  <a href="リンク先のURL">リンクテキスト</a>
</body>
</html>

HTML 記事一覧へ