プログラミング入門講座①「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>

<?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”>

<head>

<title>産地直販リア青果店</title>

</head>

<body>

<h1>リア青果店</h1>

<h2>ごあいさつ</h2>

<p>いつもご愛顧ありがとうございます。<br /> 新鮮な<strong>野菜</strong>を皆様にお届けするリア青果店です！ <a href=”map.html”>つくば市郊外</a>に店を構えて30年。真心を込めて販売しています。 </p>

<p>店舗の写真です！</p>

<h3>とれたて野菜</h3>

<ul>

</ul>

<p>茨城県つくば市△△△町 1-1-1</p>

<h3>アクセス経路</h3>

<ol>

<li>△△△駅より△△バス△△行きへ乗車</li>

<li>△△バス停下車</li>

<li>看板に従って南へ徒歩30m</li>

<li>右手にお店がございます。</li>

</ol>

</body>

</html>

次回は、HTMLの主要なタグについて説明します。➡︎プログラミング入門講座②「HTMLの覚えておきたいタグ一覧」

【オススメ記事】
➡︎ 初心者におすすめ！HTMLを勉強できるスクール17選
 ➡︎ 無料で使える！HTMLの学習サイトBEST7
➡︎ HTMLの本・参考書の評判
 ➡︎【HTML上達事例②】HTMLをスクールに通わず独学で習得した話
 ➡︎【HTML上達事例⑧】フリーランスとして働く男性がHTML習得に使った書籍は？

投稿者：プロナビ編集部

プログラミングで挫折しそうなら、現役エンジニアにマンツーマンで相談してみませんか？オンラインのプログラミングスクール「TechAcademy」のメンターが対応。

この記事が気に入ったら
いいね！しよう

プロナビの最新情報をお届けします

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

HTMLってなに？

歴史からみると

つまりHTMLとは

HTMLの大枠

ドキュメントタイプ宣言

XHTMLとは

HTML5とは

構造化マークアップ

HTMLのマークアップ方法

HTML本体

ヘッダ

ボディ

サンプルコード

あわせて読みたい

関連記事

【Linux入門】rmコマンドを使ってファイルやディレクトリを削除する

これなら誰でも簡単にプログラミングが始められる！HackforPlayの紹介【一度にたくさんのアイテムを置く】

【VBA入門】シートをアクティブにする方法（Activateメソッド）

【Photoshop入門】自動選択ツールとクイック選択ツールを使用した画像の切り抜き方

VBA入門講座①「VBAってどんな言語？」

【Python入門】for文を使った繰り返し文の書き方

【Illustrator入門】文字や図形をカンタンに変形させてみよう！

【PHP入門】DateTimeを使って日付をフォーマットしてみよう！

Illustrator（イラストレーター）のパスの変形を使って桜や梅などの色々な花模様を描いてみよう

Python超入門その２２〜属性を動的に操作してみよう〜

最近の記事

カテゴリー

各種お問い合わせ

サイト情報

プログラミング教室情報サイト【プロナビ】

プログラミング教室情報サイト

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

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

HTMLってなに？

歴史からみると

つまりHTMLとは

HTMLの大枠

ドキュメントタイプ宣言

XHTMLとは

HTML5とは

構造化マークアップ

HTMLのマークアップ方法

HTML本体

ヘッダ

ボディ

サンプルコード

あわせて読みたい

関連記事

人気の記事

最近の記事

カテゴリー

各種お問い合わせ

サイト情報

プログラミング教室情報サイト