Webページの骨組み、HTML入門

ハイパーテキストマークアップ言語とは

– ハイパーテキストマークアップ言語とはインターネット上で私たちが目にする様々なウェブサイト。そのウェブサイトを表示するために欠かせない技術が、ハイパーテキストマークアップ言語、略してHTMLです。普段何気なく見ているウェブサイトですが、その裏側ではHTMLと呼ばれる言語が使われています。ウェブサイトは、まるで文章を書くように、HTMLを使って作成されています。しかし、HTMLは複雑なプログラムを組むための言語とは少し違います。HTMLは、どちらかというとウェブサイトの文章構造や、画像、リンクなどの要素を定義するための言語と言えるでしょう。例えば、ウェブサイトのを大きく表示したい場合は、HTMLタグを使って「これはです」と指定します。すると、ウェブブラウザは、その指示に従って文字を大きく表示します。このように、HTMLタグを使ってウェブサイトの見た目を決めていくのです。HTMLは、それ自体では高度な処理を行うことはできません。しかし、ウェブサイトを表示する上で最も基本となる、なくてはならない技術と言えるでしょう。

タグの役割と書き方

ウェブサイトの見た目や構造を決めるHTMLという言語において、タグは文章の一部を特定の意味を持つ要素としてマークアップする役割を担います。たとえば、「」を表現したい場合、「

」という開始タグと「

」という終了タグで文章を挟みます。すると、ウェブブラウザはこの部分を認識し、大きな文字でとして表示します。

このように、HTMLでは様々なタグを組み合わせて使うことで、ウェブページの骨組みや要素を定義していきます。多くのタグは開始タグと終了タグのペアで使い、囲まれた部分を特定の種類の要素として定義します。例えば、段落を表す「

」タグや、画像を埋め込む「」タグなどが挙げられます。

一方で、開始タグと終了タグを持たず、単独で用いられるタグも存在します。例えば、強制的に改行を入れる「
」タグや、水平線を引く「

---

」タグなどが挙げられます。これらのタグは、それ自体が特定の動作や表示を指示する役割を担います。

タグを使いこなすことで、HTML文書に意味づけと構造を与えることができます。これは、ウェブブラウザが正しく情報を解釈し、私たちが見やすい形でウェブサイトを表示するために非常に重要です。

文書構造の基本

ウェブサイトを記述する言語であるHTMLには、いくつかの基本的な構造が存在します。この構造を理解することは、ウェブサイトを構築する上で非常に重要です。

まず、HTML文書は「」という宣言から始まります。これは、文書の種類がHTMLであること、そしてどのバージョンを使うのかをブラウザに伝える役割を担います。

次に、「」タグでHTML文書の開始を宣言します。このタグは文書の最後に「」タグで閉じる必要があり、この開始タグと終了タグの間にHTML文書全体が記述されます。

「」タグの後には、「」タグと「」タグが続きます。「」タグでは、文書のタイトルや文字コードなど、ページに関する情報を記述します。これらの情報はブラウザの表示画面には直接現れませんが、ウェブサイトの表示や検索エンジン最適化などに影響を与えます。「」タグは「」タグで閉じます。

一方、「」タグで囲まれた部分は、実際にブラウザに表示される領域です。私たちがウェブサイトで目にするテキストや画像、動画などは、すべてこの「」タグの中に記述されます。「」タグは「」タグで閉じます。

これらの基本的な構造を理解することで、HTML文書を正しく記述し、思い通りのウェブサイトを作成することができます。

様々な要素と属性

ウェブサイトを作成する際に使用するHTMLには、文章のや段落を表す要素以外にも、様々な要素が存在します。例えば、画像をウェブページに表示したい場合には「」タグを用います。このタグは画像を扱うための要素であり、「src」という属性に画像の場所を示すURLを指定することで、ウェブページ上に画像を表示することができます。
また、「」タグは他のウェブページやファイルへのリンクを作成するための要素です。このタグは「href」という属性を持ち、リンク先のURLをこの属性に指定することで、目的のページへ遷移することができます。このように、HTMLの要素はそれぞれ特定の役割を持っており、その役割を果たすための属性を持っています。
HTMLには、今回紹介した要素以外にも、表を作成する「

」タグやリストを作成する「

」タグなど、様々な要素が存在します。これらの要素を使いこなせるようになると、より見やすく、機能的なウェブサイトを作成することができます。それぞれの要素が持つ役割と属性を理解し、適切に使い分けることが、HTMLを用いたウェブサイト作成において重要です。

要素名	役割	主な属性	説明
<img>	画像の表示	src	画像のURLを指定する
<a>	リンクの作成	href	リンク先のURLを指定する
<table>	表の作成		表を作成する際に使用
<ul>	リストの作成		リストを作成する際に使用