非エンジニア必見！Webページ作成時に知っていると得する、HTMLを解説

更新日: 2018年05月25日

CMS・サイト制作

マイページにお気に入り

エンジニアでなくても、ある程度のプログラミングに関する知識を持っているだけでエンジニアと共通言語で話すことができます。
その結果、コミュニケーションの効率にも繋がります。

しかし、エンジニアでない方にとって仕組みを理解することは、なかなか難しいことではないでしょうか。

今回は、HTMLについて、エンジニアでなくても知っておきたいその仕組みを解説します。
Webページを立ち上げる際の参考にしてください。

HTMLとは

HTMLとは、「Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)」の略で、Webページを作成する際に使用される、最も基本的なマークアップ言語のひとつです。

ハイパーテキストとは、指定箇所にリンクを貼ることができたり、別ページへ遷移することができるなどの高機能なテキストのことを指します。
マークアップとは、HTMLタグを使って、タイトルや小見出しなど、Webページ上の特定の位置に意味を持たせ、Webページが構造化されるように作成されていることを指します。

ブラウザで閲覧しているWebページの多くが、HTMLで作成されています。
Webページ上で右クリックをして「ページのソースを表示」を選択すると、そのWebページのソースコードが表示されます。

例えば、ferretのトップページでソースコードを表示させると、以下のような画面が表示されます。
ここで書かれているコードが、ferretのトップページのソースコードとなります。

HTMLの書き方

タグの書き方

タグは、基本的に全角記号ではなく半角記号で書くことに注意が必要です。
タグを書く際には、「<>」の中に指定する要素を記入して、要素を作成します。
これを2つ並べて2つめの「<>」内に「/」を加えた「<要素>要素>」という形が基本的な形となります。

なお、最初の<要素>を開始タグ、2つめの要素>を終了タグと言います。
この間に文字列を入れると、HTMLを作成することができます。

例：<h2>HTMLの書き方<h2/>

HTMLの要素には、100以上の種類があります。
例えば、以下のようなものです。

h1・・・見出し。h2、h3と、数が大きくなるほど見出しが小さくなります。
a・・・リンク
font・・・フォントの色やサイズ変更
img・・・画像を表示します
table・・・表を表示します

ブラウザで表示させる

HTMLのコードを書いてブラウザで表示させるためには、HTMLファイルとして保存する必要があります。
この場合、ファイル名に「.html」という拡張子をつけると、HTMLファイルとして保存されます。
このファイルをブラウザにドラッグ＆ドロップすると、ブラウザで表示されているのを確認できます。

動的Webページと静的Webページの違い

Webページを構成するコンテンツは、静的コンテンツと動的コンテンツの2種類に分けることができます。

静的コンテンツ

静的コンテンツとは、コンテンツが時間が経っても変化しない、動くことがないコンテンツを指します。
例えば、HTMLを使用して書かれる文章や静止画などです。
静的コンテンツはブラウザに読み込まれるので、アクセスしてきたユーザー全てが同じコンテンツを閲覧することになります。

動的コンテンツ

視覚的に動くコンテンツ

時間とともに視覚的に何かしらの変化がおきるコンテンツを指します。
例えば、FlashやGif画像などです。
このコンテンツは目を惹きやすいので、強調したいランディングページなどで使用することをオススメします。

サーバから情報を取得するコンテンツ

この場合は、データベースなどから情報を取得して、アクセスしてきたユーザーに応じて異なる情報を返すコンテンツを指します。
例えば、決済サービスなどでユーザー名を表示する場合などです。

まずブラウザから、WebサーバにHTMLファイルを表示してほしいという指示が出されます。
すると、PHPやRubyなどのサーバサイドで動作するプログラミング言語で指定された箇所に、データベースから取得した情報が表示されるようになります。
PHP、Rubyやなどのプログラミング言語は、アクセスしてきたユーザーに応じて、異なるHTMLを返すことができます。

これでデータベースから取得した情報を含めたHTMLファイルがブラウザに返され、Webページとして閲覧することができるようになります。

サーバサイドで動く言語とは逆にブラウザで動作するプログラミング言語でJavascriptなどがあります。
入力フォームの値の入力チェックすることができたり、ボタンの追加やアニメーションなどを行うことができます。
一度HTMLを読み込んでしまえばリロードをせず動作するので、ユーザビリティの向上を図ることが可能です。
ただし、閲覧しているユーザーからもコードを変更することができるので、注意が必要です。

Webページが表示されるまで

最後に、Webページが表示される仕組みについて簡単に解説します。
今回は、Googleのトップページを表示させることを想定しているものとします。

Googleのホームページにアクセスすると、最初のトップページが表示されます。

これはHTMLで作成されたWebページです。
URLを入力すればすぐにHTMLが表示される訳ではなく、複数のサーバを経てWebページとして表示されます。

①〜⑦の流れを経て、初めて目に見えるWebページとして表示されます。
この流れは、表示させたいWebページによってDNSサーバが変化しますが、Googleのトップページを表示させる場合に限らず、全てのWebページを表示させる際に通る道順です。

これでHTMLファイルをダウンロードすると、ブラウザ側でHTMLファイルを解析します。
解析結果に基づき、CSSや画像、動画などのファイルをリクエストし、それぞれ順番にダウンロードされます。
このリクエストは、原則、HTMLファイルに書かれているコードの上から順に行われます。
リクエストが多すぎると、読み込みが遅くなり、結果として表示速度が遅くなってしまうので、なるべく最小限にまとめられると好ましいです。