【WEB担当者の基礎知識】WEBサイト構造のキホン「HTML」について知ろう!

こんにちは、WEBマーケティング事業部の難波です。

単に「WEB業界」といっても、その中には様々な役割があります。

例えば、コンサルタント、ディレクター、コーダー、デザイナー、プログラマー、システムエンジニア等々です。

それらのポジションは単純な縦割り構造ではなく、近年、ますます横断的な知識、スキル、経験が求められるようになってきています。

この記事では、その中でも特に重要な「WEB担当者が最初に理解したいHTMLの基礎知識」について述べてまいります。

WEBサイト構造のキホン「HTML」について知ろう!

1、WEBサイト、WEBページの構造

WEBサイト、WEBページは、一見、紙の上に印刷された文字や画像等と同じように我々の視覚には映ります。

しかし、その内部をよくよく紐解けば、様々な機械語(プログラミング言語)から構成されております。

我々日本人が「日本語」を通じてコミュニケーションを図るように、コンピュータに指示・命令をするには、特別な言語が必要で、それがプログラミング言語と呼ばれるものです。

下記は私たちがWEBサイトを見ている(いわゆる表側)です。

表側

 

実は、このメインビジュアル(バナー)の裏側はこんな感じのコードで構成されています。

裏側 

一見、これらは非常に分かりにくいように映りますが、

「こちらに、この文字列を記載してください」

「そちらに、この画像を表示してください」

「あちらに、リンクを設置してください」

等々の指示・命令を、機会にわかるように、一つ一つしているんですね。

しかし、人間同士のコミュニケーションであれば、言い間違えや表記の揺れがあったとしても、「おそらく、こういうことを言いたいんだろうな」と相手から歩み寄ってくれることもありますが、プログラミング言語においては“たった1文字”間違えただけで不具合の原因となることも多く、正確に理解することが重要です。

一つ一つ正確に指示を出す必要がある!

2、HTMLとは

プログラミング言語の中でも、最初に理解すべきものが「HTML」です。

HTMLは、“HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ)”の略称で、WEB上の文書を記述するためのマークアップ言語です

現在インターネット上に存在しているWEBサイトの大多数がHTMLで作成されています。

「マークアップ」とは、元々出版業界で「指示伝達の方法」といった意味合いで使用されていたもので、そこから転じて、WEB業界では、「文章の構造や修飾の情報の記述」といった意味合いで使用されております。

その記述に際しては、「タグ」と呼ばれる特別な文字列が登場することになります。

基本的な構造図は下記の通りです。

なお、WEBページ上で右クリックし「ページのソースを表示」という項目を選択すれば、誰でも簡単にそのページの構造を確認することができます。

<!DOCTYPE html>

ドキュメントタイプ(文書)宣言と呼ばれ、HTML 文書ファイルの先頭に記述し、その HTML ファイルで使用している HTML のバージョンを宣言します。

詳細は割愛いたしますが、HTML5というバージョンの登場以降、かなり簡易的に表現できるようになり、上述のも書ければほとんど問題はないでしょう。

3、HTMLのタグ

HTMLには沢山のタグが存在しますが、以下では、初心者の段階で覚えるべきものをいくつかピックアップいたします。

HTMLのタグは、一部の例外を除き、

<>  (開始タグ)

</> (閉じタグ)

のペアで構成されます。

基本的に<>(開始タグ)と</>(閉じタグ)で構成される※例外あり

全て半角で記載する必要があり、全角で記載すると無効表記となるので、注意が必要です。

全角では反映されない。必ず半角で入力する。

HTMLの基本構造

<html>~</html>

文書全体をこのタグで囲み、<html>~</html>範囲内の文書が、HTML言語を使って記入されていることをブラウザに把握させるために、必ず記入します。

<head>~</head>

この中にヘッダー情報を記入します。どの文字コードで記入されているか(日本語、英語等)、文書をどのように修飾するか(文字サイズ、文字色等)といった情報について記述するために用いられます。

特に重要なのが、metaタグです。

descriptionとはこのWEBサイト、WEBページの説明を意味する役割を果たします。

description内に記載されているキーワードは、SEO対策の観点からも重視されております。。

<title>~</title>

<head>~</head>の中に記入して、文書のタイトルをつけます。ここで付けたタイトルは、ブラウザのタイトルバー、Googleなどの検索結果での見出し部分等として表示されます。

なお、このタイトルの記述も、SEO対策では非常に重要な意味を有し、WEBページ単位での最適化が求められます。

<body>~</body>

このタグの範囲内に記入された内容が、画面上に表示されます。

この中にいろいろなタグを使いながら本文を記入していきます。

特に段落分け等によるレイアウト構成が大切な作業となり、ソースの覗くと、

header 

nav

article

section

div

footer

といったタグを多く見かけることでしょう。

<body>

ここに文字や画像など表に表示させたい情報を入力する

</body>

まとめ

この記事では「WEB担当者が最初に理解したいHTMLの基礎知識」について述べてまいりました。

弊社では、「WEB担当者育成プログラム」を開催し、上述のような基礎から講義を行っておりますが、受講生の中には、「英語の勉強みたいで、とても苦手だ」といった感想をお持ちになる方もいらっしゃいます。

しかし、ある程度の基礎を理解できれば、普段WEBサイトに接しているだけに、「こういう風にできているんだ」と興味津々になり、より多くの知識を身につけたいと奮起される方々がほとんどです。

現在では、HTMLについて解説したサイトも非常に充実しております。

是非この機会に、学習を始めてみてはいかがでしょうか。

【助成金を活用して持ち出し0円!?】制作・マーケティングが出来るWEB担当者を育成する「WEB担当者育成プログラム」

書籍でも紹介した事例や助成金を活用して持ち出し0円でスマホ化対策する方法やWEB内製化について代表石嶋が直接セミナーでお話します。

参考になったらシェアをお願いします!

「WEB内製化」の”要点”がギュッと詰まっています!


Amazon「本 の 売れ筋ランキング」1位を獲得!

「この本のやり方を知らないのは、 あまりにも、もったいない。 ホームページは、自社の商品・サービスをお客様の都合に合わすことができる非常にすぐれたツールだ。わが社は1年で売上が6億円増えた」

あの小山昇社長(株式会社武蔵野代表)も驚く、
すごい成果が続々!
(実践企業の93%が、ホームページで過去最高売上を更新中!)

「ホームページのことはよくわからない」という、社長さんこそ、必読です。

コメントを残す

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