備忘録的プログラミングリファレンス

HTML入門

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

HTML テキストのみの表示

　まずは、HTML テキストを HTML ファイルとして保存するところから始めてみましょう。ファイル拡張子.htmlでファイル保存をしてみます。
　.htmlでテキストファイルを保存することで、ブラウザは HTML ファイルであると解釈します。そして、ブラウザは <!DOCTYPE>、<html> の設定から HTML テキストをどのように解析、表示したらよいのかを知ります。

　web ページとして成り立つには、<!DOCTYPE>、<html>、<head>、<body> が必要なります。ここでは主にこれらのタグエレメントについて解説します。以下のHTMLの基本タグエレメントを参照してください。

　解説よりも簡単に雛形だけでも作成したいという方はTemplate（雛形）の作成を参照してみてください。

ページ内 Index

- ad -

HTMLファイル拡張子（ HTML ファイル保存 ）

　まず、webページとして成立させるにはファイル名の拡張子が.htmlまたは.htmである必要があります。

webページのファイル名
example.html

　テキストエディター、例えば「メモ帳(notepad)」を起動します。
　内容は空のままで「保存」して下さい。その際にファイルの種類を*.*を選択し、拡張子としてファイル名の後に.htmlを追加して下さい。
　ファイル名は例えばtest.htmlなどとしてみてください。

　保存した空のtest.htmlファイルをブラウザで開いてみましょう。何も表示されませんが、ブラウザは空のtest.htmlファイルを開いてくれているはずです。 URL を確認してみてください。

　次にtest.htmlファイルをテキストエディターで開いて以下のようなテキストを編集してみます。

test.htmlの中身
Hello! World!

　test.htmlを保存して、再びtest.htmlをブラウザで開いてみましょう。Hello! World!と表示されます。

　タグエレメントを使用しなくても拡張子が.htmlであれば、ブラウザは中身を HTML テキストとして解釈して表示してくれます。

　これからタグエレメントを使用して HTML テキストを編集するようになるのですが、web ページとして作成するには以下のHTMLの基本タグエレメントに解説してますように <body> などが必要になります。

　専門的な話になりますが、サーバー上の設定で.html以外でも web ページとして開くことができます。.cgiや.phpなどです。詳しくは web サーバーを扱うようになってからでもよいと思います。

HTMLの基本タグエレメント

　ファイルの保存について憶えたら、次にその内容の書き方を知る必要があります。
　もちろん、HTMLテキストで内容を編集します。そして、内容ごとにタグで囲むのが基本ですが、以下のタグエレメントが必須になります。

　これらは、どんな規則にしがって 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 デザインについても知る必要が出てくるでしょう。

- ad -

<!DOCTYPE>

　<!DOCTYPE>は、<html>の前に宣言しておきます。詳しくは<!DOCTYPE> エレメントを参照してください。

<html>

　<html> エレメントは、web ページの表示内容とそのための設定情報から構成される HTML タグエレメントです。 詳しくは<html> エレメントを参照してください。

　lang 属性に HTML テキストとして使用している言語を指定しましょう。言語や文字コード設定の基準になります。

<HTML lang="">

　<html>　がルート要素で、以下の　<head>、<body>　タグを子要素として包括します。

<head>

　<head>は、以下の<title>,<meta>,<base>,<link>,<script>,<style>エレメントを包括し、これらのエレメントにページ情報を定義します。
　詳しくは、<head> エレメントページを参照してください。

　以下は必要と思われる<head>エレメントの子エレメントです。

<title>

　ウィンドウ最上部のタブに表示されます。必須ではなくなりましたが、PCブラウザも利用できるようなページならば付けましょう。

</title>

<meta charset>

　文字コード指定です。文字化けが起こる原因になることがあります。HTMLファイルを作成したときの文字コードに合わせます。

<meta charset="">

　HTMLファイルとして記録した文字コードを、windows標準shift_jisで記録して、charset属性をutf-8に宣言はできません。

<body>

　<body>に、ブラウザで表示する内容を編集します。１つのHTML内に１つです。なくても表示されますが、正式なHTMLテキストとしては扱われません。

　詳しくは、<body> タグエレメントを参照してください。

Example

　上記の説明にある選択肢によって試しのHTMLソースを作成することができます。<body>内の内容は空です。


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エレメントの終了タグが省略してあるのはあまり見かけたことはないです。