ウェブサイトの構造。HTMLってなに？

公開日： 2013/05/28 : 最終更新日：2013/10/31 ホームページ制作 HTML, ホームページ

YahooやGoogle、ニュースサイト、楽天やamazonなどのショッピングサイト、facebookなどのSNS、普段から使っているでしょうからウェブサイト自体は見慣れたものと思います。
じゃ、実際のところウェブサイトというのは何でできているのか？どういう構造になっているのか？
今日はそのあたりの話をします。

ウェブサイトはHTMLでできている。

厳密に言うとちょっと違う場合もありますが、基本的にはウェブサイトはHTMLという文書がベースとなっています。
HTMLというのはテキストファイル（文章でできているファイル）の一種で、Hyper Text Markup Languageの略です。HTMLという言葉だけ知っていれば十分です。全部覚えても飲み屋のねーちゃんにカッコつけたいときくらいしか使いどころがありません。

Hyper Text Markup Language、つまり、文章にマークを付けたすげー言語、ってことですね。
どういうことかと申しますと、例えば、

ウェブサイトの構造。
ウェブサイトはHTMLでできている。
厳密に言うとちょっと違う場合もありますが、基本的にはウェブサイトはHTMLという文書がベースとなっています。
HTMLというのはテキストファイル（文章でできているファイル）の一種で、Hyper Text Markup Languageの略です。HTMLという言葉だけ知っていれば十分です。全部覚えても飲み屋のねーちゃんにカッコつけたいときくらいしか使いどころがありません。

こういう文書がありますね。これだけだと文章にはなっていますが、どこが見出しか、どこが本文か、文章構造がはっきりしません。
そこで、

＜大見出し＞ウェブサイトの構造。
＜小見出し＞ウェブサイトはHTMLでできている。
＜本文＞厳密に言うとちょっと違う場合もありますが、基本的にはウェブサイトはHTMLという文書がベースとなっています。HTMLというのはテキストファイル（文章でできているファイル）の一種で、Hyper Text Markup Languageの略です。HTMLという言葉だけ知っていれば十分です。全部覚えても飲み屋のねーちゃんにカッコつけたいときくらいしか使いどころがありません。

こうすると、どこが見出しか分かりますね。
これはつまり、元の文書にマークを付けた（Markupした）状態です。
HTMLというのはこのように、文章のどの部分がどういう意味のものか、というマークを付けた文書です。
実物のHTMLではマークの付け方のルールや、マークの種類が決まっているので、それを使って文書にマークをつけていきます。ちなみにこのHTMLのマークのことを「タグ」と言います。
正式なHTMLで上の例を記述するとこうなります。

<h1>ウェブサイトの構造。</h1>
<h2>ウェブサイトはHTMLでできている。</h2>
<p>
厳密に言うとちょっと違う場合もありますが、基本的にはウェブサイトはHTMLという文書がベースとなっています。<br />
HTMLというのはテキストファイル（文章でできているファイル）の一種で、Hyper Text Markup Languageの略です。<br />
HTMLという言葉だけ知っていれば十分です。全部覚えても飲み屋のねーちゃんにカッコつけたいときくらいしか使いどころがありません。
</p>

HTMLについては今後も細かい話をしていくことになると思いますが、ざっくり言うと<h1><h2>は見出し。<p>は本文を表すタグです。
どこからどこまでが適用範囲か、というのをはっきりさせるために、対象範囲の頭に<h1>を置いて文を書き、最後に</h1>のように同じタグにスラッシュを入れたもので閉じます。この二つに囲まれた文が見出しになります。

HTMLにすることで、文書に意味を持たせることが出来ました。
でもこのまま相手に見せたところで、今説明したHTMLのルールを知らない人にとっては結局どこが見出しなのか、さっぱりわかりませんね。
そこで、「ブラウザ」というのが登場します。
Internet ExplorerやSafari、Google Chrome、Firefoxなどが有名ですね。
パソコンでもスマホでも、たいていの人はこのあたりのブラウザを使っています。
ブラウザの役割は、HTMLを知らなくても、どこが見出しでどこが本文か、HTMLによって伝えられる情報を見られるようにすることです。
実際は上の例のような簡単なタグで終わることはなくて、例えばこのブログ、HTMLをそのまま表示（一部）すると

<body class="home blog logged-in admin-bar no-customize-support custom-background">

<div class="wrapper">  

  <div id="header">      
    <div class="container_16 clearfix">
      <div class="grid_16">
        <div id="headimg">

  <div id="logo-text">
    <span class="site-name"><a href="http://arigaria.com/" title="サルでも分かるwebサイトの作り方" rel="home">サルでも分かるwebサイトの作り方</a></span>
    <span class="site-description">ホームページ・ブログを持ちたい！でも分からない！サルでも分かるよう解説します。</span>
  </div><!-- end of #logo -->

</div>      </div>

    </div>     
  </div>

    <div class="container_16 clearfix">
      <div id="nav" class="grid_16">
        <div class="menu"></div>
      </div>
    </div>

<div class="container_16 clearfix">

  <div class="grid_11">
    <div id="content">	  

          <div id="post-96" class="post-96 post type-post status-publish format-standard hentry category-sem category-17 category-5 tag-google tag-16">

  <div class="entry-meta-group clearfix">
    <div class="grid_2 alpha">
      <span class="entry-date"><a href="http://arigaria.com/?p=96" title="2013年5月16日 11:26" rel="bookmark"><span class="entry-date-day">16</span><span class="entry-date-month-year">5月 2013</span></a></span>    </div>
    <div class="grid_8 omega">
      <h2 class="entry-title"><a href="http://arigaria.com/?p=96" title="Permalink to Googleの広告とは？検索結果・キーワードに沿った広告を表示するAdWordsの仕組み。" rel="bookmark">Googleの広告とは？検索結果・キーワードに沿った広告を表示するAdWordsの仕組み。</a></h2>
      <div class="entry-meta">    
		<span class="entry-author author vcard"><a href="http://arigaria.com/?author=1" title="by arigaria" rel="author">arigaria</a></span><span class="entry-meta-sep"> &sdot; </span><span class="comments-link"><a href="http://arigaria.com/?p=96#comments">Leave a Comment</a></span><span class="entry-meta-sep"> &sdot; </span><span class="edit-link"><a class="post-edit-link" href="http://arigaria.com/wp/wp-admin/post.php?post=96&amp;action=edit" title="投稿の編集">Edit</a></span>      </div><!-- .entry-meta -->
    </div>
  </div>

  <div class="entry-content clearfix">	

	<div class='wp_social_bookmarking_light'>

こんな感じになっているのですが、ある程度訓練を積まないとこれを見たところでどこがどうなっているか分かりません。
それをブラウザを通すと、今皆さんが読んでいるこの画面のようなレイアウトに変換されて、ここがブログのメニューなんだな、とか、ここが見出しで、ここが本文で、この部分は引用なんだな、といった情報がHTMLを知らなくても伝わるわけです。

自分で作ろうと思っていたけどこんなのムリ、書けない、覚えられないよ！という方、ご安心ください。
そういうときのために、ワープロソフトを扱うようなノリで自動的にHTMLを書いてくれるソフトがあります。

これとかね。
Adobe Dreamweaver CS6 Windows版

ただソフトに任せておいても、自分の意図する文章構造とは違うタグになってしまうことも多いので、もし勉強できるのであればやっておいても損はないと思います。

HTMLに関する書籍

ウェブページはこのHTMLファイルをベースに、さらに画像ファイルなどが関連して出来上がるわけですが、それはまたこの話の続きで。