プログラミング入門講座①「HTMLとは〜概要と基本構造〜」

公開日：2016-3-2 最終更新日：2016-4-21
プロナビTOP / プログラミング初心者向け技術系ノウハウ・まとめ

Pocket

本日から、当サイトのエンジニアによるHTML/CSS入門講座をお届けします。初心者の方は是非この入門講座を通して、Webの基礎への理解を深めてください。

1 WEBサイトはどうやって成り立っている？
2 HTMLってなに？
3 歴史からみると
4 つまりHTMLとは
5 HTMLの大枠
6 ドキュメントタイプ宣言
7 HTMLのマークアップ方法
8 HTML本体
9 ヘッダ
10 ボディ
11 サンプルコード

WEBサイトはどうやって成り立っている？

WEBサイトは主に3つの要素から成り立っています。

コンテンツ（サイトの内容）を書いた文章・・・HTML
見た目を決める指示書・・・CSS
動きを制御するプログラム・・・JavaScript、PHP、CGI等

このうち、最低限HTMLさえあれば、WEBサイトは成立します。今回はHTMLについてのみ概要を紹介します。

HTMLってなに？

HTML・・・HyperText Markup Language（ハイパーテキストマークアップランゲージ）
ハイパーテキスト・・・文章を超える文章

なぜ「文章を超える」という表現になっているかと言うと、ハイパーリンクという、文章から外に出て別の文章を参照する仕組みがあるからです。

マークアップランゲージ・・・文章内の単語に意味付けをする言語

教科書にマーカー引いてト書きするようなものです。タグという記号を使ってト書きを表現します。

歴史からみると

元々は、SGMLという米軍の軍事文書を整理して保存するための書式でした。それをもとにWEBに適した形に拡張した物がHTMLです。

つまりHTMLとは

意味づけされ、引用元の別の論文ともつながった論文をWEBで表示するための書式で、HTMLでかかれた文章は論文と言って差支えないです。よって、HTMLにとって以下が重要な要素になります。

文章の意味付け（マークアップ）が適切にされていること
適切に段落階層分けされていること
他の論文から数多く引用を受けていること（他のHTMLから多く被リンクを受けていること）

HTMLの大枠

HTMLは大きく見て2つのカタマリと1つの宣言から成り立っています。

ドキュメントタイプ宣言
HTMLヘッダ
ボディ

まず、簡単なHTMLサンプルコードを提示します。こちらをご覧ください。

ドキュメントタイプ宣言

HTMLの中身は実質ただのテキストです。ゆえにこのテキストがどんな書式で書いてあるのかを示す必要があります。サンプルコードの下記部分がドキュメントタイプ宣言(HTML 4.01)です。

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

1	<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

最近は主に下記のいずれかを使う場合が多いです。

HTML4.01
XHTML 1.0 Transitional
HTML5

XHTMLとは

HTMLとは別にXMLという汎用的なマークアップ言語があります。HTMLをXMLの書き方に合わせて再定義した物がXHTMLです。1.0は形式のバージョン、TransitionalはXMLに対してどの程度厳密かを表す言葉です。XHTMLの場合は文頭にXML形式で書かれていることを示すxml宣言を記述することが推奨されています。

<!--?xml version=”1.0″ encoding=”UTF-8″?-->

1	<!--?xml version=”1.0″ encoding=”UTF-8″?-->

HTML5とは

HTMLは何度もタグの定義の更新がされており、現行主流は4.0です。更に一歩先最新の定義がHTML5（およびHTML5.1）です。HTMLではHTML4（XHTML1.0を含む）よりもさらに細かく文章に意味づけをできるようになりました。また、動画の再生や図形の描画など最新のWEB環境により適応しています。

構造化マークアップ

さらに、いままでのHTMLを越えて検索エンジンに内容を正しく伝える手法として、構造化マークアップと呼ばれる方法が近年登場しました。Google、Yahoo、Microsoftなどの検索エンジンを持つ会社が協力して、記述方法をまとめ、schema.orgというサイトにて公開しています。この形式に沿ったマークアップをHTML内に埋め込むことで、サイトのコンテンツ価値をより正確に評価してもらうことができるようになります。

HTMLのマークアップ方法

HTMLでは文章を下のような形で部分ごとにマークアップします。

<p class="”sample”">マークアップの方法</p>

1	<p class="”sample”">マークアップの方法</p>

上記の例にもある<～>を開始タグ、を終了タグ（または締めタグ）と呼び、開始タグ終了タグで文章を挟み込んで部分ごとに意味づけします。はさまれた文章のことを「要素」と呼びます。また、タグの中に書かれた「○○○=”×××”」という形の表記を「属性」と呼び、タグだけでは表せない情報を付加する場合に使います。

HTML本体

サンプルコードの<html xmlns=”http://www.w3.org/1999/xhtml”>から</html>に囲われた部分がHTMLの文章本体です。つまりHTMLは文章全体をHTMLタグで意味づけした状態です。

※xmlns=”http://www.w3.org/1999/xhtml”はxhtml独自の属性でネームスペースと呼ばれ、HTML内でどんなタグを使うことができるか指定するために利用されます。

HTMLの中はHTMLヘッダ、ボディの2つに分かれています。

ヘッダ

<head></head>タグでくくられた部分です。ヘッダ情報は一部除きページを見るユーザーには見えず、かわりにサーバーやブラウザ、検索エンジンが中身を読みます。中には主にタイトル、抜粋、使用スクリプトなどこのHTML全体に関する補足情報が書き込まれます。特に<meta>タグから始まる記述をメタタグと呼び検索エンジン等に文書を理解させるために利用します。

ボディ

<body></body>タグでくくられた部分。HTMLの本文、ユーザーに見せたい部分はこの中に記述されます。ボディ内で使用されるタグについては次でご説明します。

サンプルコード

<?xml version=”1.0″ encoding=”UTF-8″?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”ja” xml:lang=”ja”>
  <head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
    <meta name=”description” content=”野菜販売のリア青果店。茨城県つくば市から新鮮な野菜を皆様にお届けします。生産農家の顔が見える直販店。無農薬・有機栽培野菜も取り揃えております。遠方からのお客様は△△バスでのアクセスが便利です！” />
    <meta name=”keywords” content=”青果店,野菜,茨城” />
    <title>産地直販リア青果店</title>
  </head>
  <body>
    <h1>リア青果店</h1>
    <h2>ごあいさつ</h2>
    <p>いつもご愛顧ありがとうございます。<br /> 新鮮な<strong>野菜</strong>を皆様にお届けするリア青果店です！ <a href=”map.html”>つくば市郊外</a>に店を構えて30年。真心を込めて販売しています。 </p>
    <h2>店舗紹介</h2>
    <p>店舗の写真です！</p>
    <p><img src=”common/img/tenpo.jpg” alt=”店舗の様子” width=”640″ height=”427″ /></p>
    <h2>商品紹介</h2>
    <h3>とれたて野菜</h3>
    <ul>
      <li>にんじん</li>
      <li>ピーマン</li>
      <li>キャベツ</li>
      <li>玉ねぎ</li>
    </ul>
    <h2>アクセス</h2>
    <h3>所在地</h3>
    <p>茨城県つくば市△△△町 1-1-1</p>
    <h3>アクセス経路</h3>
    <ol>
      <li>△△△駅より△△バス△△行きへ乗車</li>
      <li>△△バス停下車</li>
      <li>看板に従って南へ徒歩30m</li>
      <li>右手にお店がございます。</li>
    </ol>
    <p>Copyright © 2015 Lia Seika All Rights Reserved.</p>
  </body>
</html>