*

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

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

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ファイルをベースに、さらに画像ファイルなどが関連して出来上がるわけですが、それはまたこの話の続きで。

adsense

関連記事

82f03e2f34742a2b81777059556de0de_s

ホームページ制作業者に制作を依頼!完成までにいったいどのようなやり取りをするの?

このシリーズでは前回どういうことに注意してホームページ制作業者を選定・発注するのか、というあたりを話

記事を読む

no image

ホントに必要?ホームページを作る目的を考える。

昨日は格安でホームページを作ることはできるけど、ホントにそれでいいの? そもそもホームページを作る

記事を読む

no image

ホームページ制作の相場は?値段は適正?見積・提案はどこを見る?

2日前に話を戻します。 ホームページを制作業者に発注するにあたって、予算をごまかして伝えるな、とい

記事を読む

20131031124731

画像、CSS、JavaScript、Flash、など。HTMLに協力してウェブページを構成するファイルたち。

ウェブサイトの構造。HTMLってなに?の続きです。 ウェブサイト・ウェブページを構成するベース

記事を読む

no image

ホームページが欲しいです。格安ホームページ制作ってどうなの?

「ウチのお店にもホームページを立ち上げたい。予算がないから安く、できればかっこいいホームページが作れ

記事を読む

d1f7b72244ac11a859d6c3eeaf6a98e1_s

ホームページ制作の依頼。いったい何に注意すればいいの?

自分でホームページを作る!という話はとりあえず置いておいて、今回は外注業者に何を伝えて発注すべきか?

記事を読む

cropped-icon.jpg

ブログを始めよう。

ちょっと思うところあってブログを始めるわけですが、全く誰からも相手にされないブログをやっていても仕方

記事を読む

adsense

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

adsense

175e9dbbeda770ece907171de8870db7_s
予算がなくても自分でできる、ブログからのマーケティングを考える。

ウェブサイトをデザイン制作から行って立ち上げるのは、自分で作るにしろ、

20131028
悪質なSEOと、それへのgoogleの対応とは?

googleのウェブマスター向け公式ブログでガイドライン違反を繰り返す

20131031124731
画像、CSS、JavaScript、Flash、など。HTMLに協力してウェブページを構成するファイルたち。

ウェブサイトの構造。HTMLってなに?の続きです。 ウェブサイト

2663742b95d37f59d55514b2f81f90f9_s
リファラースパムがやってきた!迷惑なサイト訪問者たち。

こんにちは。今日はこのブログのアクセス解析をしていたのですが、リファラ

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

YahooやGoogle、ニュースサイト、楽天やamazonなどのショ

→もっと見る

PAGE TOP ↑