HTML入門
HTML ( Hypertext Markup Language )とは web ページを制作するためのマークアップ言語です。 HTML だけでは、テキスト、画像や動画といったコンテンツが以下のように羅列されるだけですが web ページの制作はここからが始まりです。

まずは、HTML テキストを HTML ファイルとして保存するところから始めてみましょう。ファイル拡張子.html
でファイル保存をしてみます。
.html
でテキストファイルを保存することで、ブラウザは HTML ファイルであると解釈します。そして、ブラウザは <!DOCTYPE>、<html> の設定から HTML テキストをどのように解析、表示したらよいのかを知ります。
web ページとして成り立つには、<!DOCTYPE>、<html>、<head>、<body>
が必要なります。ここでは主にこれらのタグエレメントについて解説します。以下のHTMLの基本タグエレメント
を参照してください。
解説よりも簡単に雛形だけでも作成したいという方はTemplate(雛形)の作成
を参照してみてください。
HTMLファイル拡張子( HTML ファイル保存 )
まず、webページとして成立させるにはファイル名の拡張子が.html
または.htm
である必要があります。
example.html
テキストエディター、例えば「メモ帳(notepad)」を起動します。
内容は空のままで「保存」して下さい。その際にファイルの種類
を*.*
を選択し、拡張子としてファイル名の後に.html
を追加して下さい。
ファイル名は例えばtest.html
などとしてみてください。
保存した空のtest.html
ファイルをブラウザで開いてみましょう。何も表示されませんが、ブラウザは空のtest.html
ファイルを開いてくれているはずです。
URL を確認してみてください。
次にtest.html
ファイルをテキストエディターで開いて以下のようなテキストを編集してみます。
Hello! World!
test.html
を保存して、再びtest.html
をブラウザで開いてみましょう。Hello! World!
と表示されます。
タグエレメントを使用しなくても拡張子が.html
であれば、ブラウザは中身を HTML テキストとして解釈して表示してくれます。
これからタグエレメントを使用して HTML テキストを編集するようになるのですが、web ページとして作成するには以下のHTMLの基本タグエレメント
に解説してますように <body> などが必要になります。
専門的な話になりますが、サーバー上の設定で.html
以外でも web ページとして開くことができます。.cgi
や.php
などです。詳しくは web サーバーを扱うようになってからでもよいと思います。
HTMLの基本タグエレメント
ファイルの保存について憶えたら、次にその内容の書き方を知る必要があります。
もちろん、HTMLテキストで内容を編集します。そして、内容ごとにタグで囲むのが基本ですが、以下のタグエレメントが必須になります。
- <!DOCTYPE html>... HTMLテキストとしての形式を示す
- <html></html>... 囲まれた内容がHTML形式のテキストであることを示す
- <head></head>... ページ情報
- <body></body>... ページ内容
これらは、どんな規則にしがって HTML テキストが書かれているか、ページ情報について、その内容についてといったタグエレメントです。
とくに <!DOCTYPE>、<html> は、ブラウザがその設定と範囲から HTML テキストをどのように解析、表示したらよいのかを知りますので必要になります。
以下は、簡単なwebページのタグ例です。 ページの言語を ja、フォントコードを utf-8 に指定をしています。 <title>ページタイトル</title>はウィンドウのタイトルバーに表示されます。
<body>〜</body>で囲まれた範囲にページとして表示される内容を編集します。
上記の HTML テキストは編集ができますのでどのように変化するかをいろいろ試してみてください。
内容の編集
次に、webページの内容を編集しなければなりません。内容はコンテンツ
とも呼ばれます。
web ページの内容は <body>〜</body> の間に編集します。上記の例ではページ内容
と書かれた部分です。
以下の例では、簡易にページの題名とその内容を編集します。
題名は <h1> タグエレメントで囲みます。内容はテキストで、 <p> タグで囲んでいます。
<title>ページタイトル</title>も <h1> の内容に従って変えています。
これで入門としての解説は終わりです。<body>〜</body> がコンテンツの編集領域で、実際に表示される部分です。<head>〜</head> で囲まれた部分はページを如何に表示するか、ページタイトル、事前情報といったページを表示するためのデータを編集します。
コンテンツの編集には、リストのための <ul>、画像の取り込みのための <img> といった、その意味に沿ったタグエレメントを利用します。タグエレメントについては右のABC順INDEX
などを参照してください。
ここでは、ページのレイアウトやデザインについてはまだ触れていません。
広告といった商用に web ページを利用するには、 <header>、<nav>、<main>、<aside>、<footer> といったタグが必要なります。詳しくは、ページ内容の構成 <header>,<nav>,<main>,<aside>,<footer>
を参照してください。
さらにweb ページのデザイン性を追求すると、ページの見た目、使いやすさについても気にする必要があります。
ページ内容のレイアウトは特に気にされます。コンテンツレイアウトとも呼ばれます。コンテンツレイアウトを編集するには CSS の知識が必要になってきます。コンテンツレイアウトについてはページデザイン
を参照してください。
スマートフォン、タブレット、PCといろいろなデバイスで遜色なく web ページを閲覧できるようするレスポンシブ web デザイン
についても知る必要が出てくるでしょう。
HTMLとDOM(Web API)
HTMLはソースをテキストで作成します。このテキストベースのHTMLをブラウザはDOM(Document Object Model)としてオブジェクトデータ化しメモリに収めます。 もしもJavaScriptを使ってwebページを操作したい場合は、DOM(Document Object Model)を参照してください。
Tips
HTMLタグエレメントには、「開始タグ、終了タグとも省略できない」、「終了タグのみ省略できる」、「開始タグ、終了タグとも省略できる」の3種類があります。htmlエレメント・headエレメント・bodyエレメント・colgroupエレメント・tbodyエレメントは、開始タグ、終了タグともに省略できます。htmlエレメント・headエレメント・bodyエレメントの終了タグが省略してあるのはあまり見かけたことはないです。