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

HTML入門
<!DOCTYPE>、<html>、<head>、<body>

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

HTMLファイル拡張子

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

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

HTMLの基本タグエレメント

 ファイル内容は、webページの内容ごとにタグで囲むのが基本ですが、以下のタグは必須になると憶えておいてください。

 以下は、簡単なwebページのタグ例です。 ページの言語をja、フォントコードをutf-8に指定をしています。 <title>ページタイトル</title>はウィンドウのタイトルバーに表示されます。

簡単なwebページタグ例

 <body>、</body>で囲まれた範囲で、ページとして表示される内容を編集します。
 内容ごとにタグエレメントで囲みます。装飾のためにタグを利用することも多くあります。詳しくはHTMLのインデックスから参照してください。

 色や罫線などHTMLページに装飾を加えるには、CSSを使います。

<!DOCTYPE>

 <!DOCTYPE>は、<html>の前に宣言しておきます。

 この宣言によってブラウザはHTMLのタグの解釈を変えます。HTML5から!DOCTYPE htmlの一択です。

 全てのエレメントに共通しますが<と!DOCTYPEの間にはスペースを入れてはいけません。最後の>の前にスペースを入れることは可能です。<!DOCTYPE html >という記述は可能です。

 HTML4以前には以下のようなDOCTYPEがありました。

  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  • <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

<html>

 <html>で囲まれた範囲が、HTMLテキストであることを定義します。

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

<HTML lang="">

 <html>がルート要素で、以下の<head>、<body>タグを子要素として包括します。
使用している言語を定義しておいた方がよいでしょう。

 <html>は開始タグ、終了タグが省略可能です。<head>、<body>も開始タグ、終了タグが省略可能です。省略されたサイトはあまり見かけません。

 DOM では、HTMLHtmlElement が該当します。JavaScript でオブジェクト操作をするにはHTMLHtmlElement インターフェイスを参照するとよいでしょう。

<body>

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

 <body>は開始タグ、終了タグが省略可能です。省略されたサイトはあまり見かけません。

 JavaScript で <body> オブジェクト操作をするにはHTMLBodyElement インターフェイスを参照するとよいでしょう。

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