HTML（エイチティーエムエル）。ウェブに関する業務に携わっている人であれば、耳慣れた言葉かもしれません。HyperText Markup Language（ハイパーテキストマークアップランゲージ）」の略で、ホームページ作成のための言語です。知らない人にとっては、なんだか呪文のような名前ですが、現在、インターネット上で見る多くのホームページはHTMLで作成されています。
今回は、知らないだけで意外と身近にある、このHTMLについて解説します。
英国生まれのHTML
HTMLの生みの親はティム・バーナーズ・リーという英国のコンピューター技術者です。
WWW（World Wide Web）の仕組みを考案し、今日のインターネットの礎を築いた人物として知られています。1991年に世界初のウェブサイトを公開、同時にHTMLを発表しました。さらに「WWWクライアント」というソフトウェアを発表します。これが現在ではよく知られる「ウェブブラウザー」です。ティム・バーナーズ・リーは、このウェブブラウザーの仕組みを無料で公開したため、HTMLは誰もが自由に使えるものとなりました。
WEBページにおけるHTMLの役割とは
ウェブプログラミングを学ぶ際、初めの一歩と言えるのが、このHTMLの習得です。ホームページの作成における基本の言語で、ウェブページ内の根幹となる構造や基本的な情報を構成する役割を担っています。
例えば、単調なテキストの羅列だけのホームページは読みづらく、見る人の興味も引きません。そこで見出しを立てたり、太文字で目立たせる部分を作ったりとレイアウトにメリハリを持たせます。さらに画像を挿入したり、関連のウェブページへのリンク、購入ボタンの設置をすれば、より魅力的なホームページになります。
こういったホームページ上の表示の指示を行うのがHTMLです。HTMLの仕組みが生まれなければ、ホームページの見た目は今よりもずっと地味でつまらないものになっていたと思うと、改めて開発者のティムに感謝したくなりますよね。
HTMLで作成されるのは「静的サイト」
HTMLによって作成されたホームページは、いつどこからアクセスしても毎回同じページが表示されます。
すべてのユーザーがまったく同じコンテンツを受け取り、閲覧できることから、HTMLで作成されたウェブサイトは「静的サイト」と呼ばれています。
静的サイトのメリットとは？
ページの表示速度が速い
HTMLで作成されたページは、いつどこからアクセスしても毎回同じページが表示されます。あらかじめ用意されたコンテンツはサーバーから直接配信されるため、表示速度が速いのが特徴です。
ユーザーにとってメリットとなることはもちろんですが、表示速度をウェブサイトの重要な評価項目としているGoogleからの評価も期待できます。
セキュリティ対策を行いやすい
HTMLで作成されたホームページはデータベースと連携したり、外部の拡張機能やプラグインを使用したりすることがなく、攻撃を受けるポイントが少ないため、理論上ハッキングされにくいとされています。ファイルをローカルに保存する点でもセキュリティ対策は比較的行いやすいと言えるでしょう。
静的サイトのデメリットとは？
スケーラビリティが低い
スケーラビリティとは拡張性のことです。
HTMLで作成する静的サイトは、大量のデータを含むウェブサイトには向きません。コツコツとHTMLを使い大量のページを構築することは根気と時間があれば可能ですが、いざ完成して動かそうとしても処理に時間がかかって、なかなか動いてくれずに苛立ちだけが募る…という結果になる可能性が高いのです。
コンテンツの更新に時間がかかる
内容を欲張らなければ、HTMLでホームページを短時間で作成することは可能ですが、運用・更新には手間と時間がかかる場合が少なくありません。なぜなら、静的サイトはページごとにHTMLを編集しなければならないからです。
静的サイトは、企業のホームページやランディングページなど、情報案内を目的とし、かつ更新頻度が低いページには適していますが、多くのコンテンツを含んでいたり、頻繫に更新をする必要がある場合は不向きなのです。
HTMLタグとは
ホームページの根幹となる構造や基本的な情報を構成する役割を担っているHTMLですが、実際には「HTMLタグ」と呼ばれるものを使って表示方法を指示します。タグとは『文章に意味を与えるマーク』です。
試しにホームページ上で右クリックして、メニューの中の「ページのソースを表示」をクリックしてみてください。< >で囲まれた英文字が並んでいる画面が表示されると思います。この「<」と「>」で囲まれた部分が「タグ」です。HTMLタグは、「開始」と「終了」のタグがペアになっており、その間に内容をはさむ作りになっています。開始タグは<タグ名>の形式で表され、終了タグはの形式で表されます。
代表的なタグ
HTMLタグは種類が多く、記述方法にもルールがあります。ここでは代表的なものをいくつか紹介します。
- 〈h1〉〜〈h6〉見出し
※数字が小さいほど大きい見出しになる - 例えばホームページのメインとなる見出しを一番大きな文字で表示したい場合は
<h1>○○○</h1>と記載します。 - 〈p〉段落
- ｐタグで囲んだ文章が一つの段落となります。
- 〈br〉改行
- 文章の改行をする場合に使用します。
パソコンやスマートフォンなどの表示させるデバイスに合わせて調整が必要です。 - 〈img〉画像を挿入
- 画像を張り付ける際に使用します。終了タグは存在しないため、入れるとエラーになります。
- 〈a〉リンクを挿入
- 他のページへのリンクや、指定したメールアドレスへの送信を行う際に使用します。
- 〈div〉グループ化
※コンテンツをまとめる - 範囲を一括りにしたい時に使います。
- 〈strong〉太文字
- テキストを太字にして強調し、重要性を示すために使われます。
- 〈u〉アンダーライン
- テキストを下線で強調するために使用されます。
- 〈li〉箇条書き
- リストの項目を表示するために使用します。
魅力的なホームページを作るために、「タイトルは一番大きな文字で目立つように」、「この部分は重要だからとアンダーラインを引いて」、「ここにリンクを貼って」といったオーダーを書き出すための言語が「HTML」です。記号とアルファベット、日本語の文章が入り混じったソースコードは一見難解で解読不可能に思えるかもしれませんが、学んでみれば書かれたHTMLタグが視覚的にどう表現されるのかよくわかります。案ずるより産むが易し、HTMLの習得めざして一歩踏み出してみましょう！
とはいえ、HTMLの習得が難しいという方は、ホームページ制作を外部に依頼することも可能です。またHTMLを習得し、自身でホームページを作成すれば、自身のタイミングでホームページを更新することが可能ですが、稼働面から難しい方についても、外部にホームページ制作や運用を依頼するという選択肢もあります。
NTTタウンページでは、ホームページ制作・運用サービス「デジタルリード」をご提供しています。
2019年のサービス提供開始以降、累計40,000件を超えるホームページを制作・運用し、個人事業主、中堅・中小企業をはじめとした多くのビジネスオーナーさまにご利用いただいてきました（2024年10月現在）。
これまで培ってきたNTTグループの知見とノウハウを活かして、多種多様なサービスと充実のサポート体制で、忙しいビジネスオーナーさまのホームページ制作から公開後の運用に至るまで、責任を持ってサポートいたします。
ホームページ制作・運用サービス「デジタルリード」の特長
特長①
ホームページ制作・運用はNTTグループの専門スタッフがフルサポート！
特長②
さまざまな目的のホームぺージ制作に対応、デザインも洗練！
特長③
ネットショップ・予約機能など、ホームページでの成約に導く充実機能多数！
ホームページは「制作して終わり」ではなく、その後の集客や売上アップなど目的とする「成果」につなげてこそ価値があります！
「インターネット・Webが苦手なのでサポートしてほしい…」
「競合に”勝てる”ホームページをめざしたい」
など、当社は全てのビジネスオーナーさまのホームページ活用に関するお悩み・課題に寄り添い支えます。
ぜひ、あなたのホームページの全てをお任せください！
・Googleは、Google LLCの登録商標または商標です。
ホームページの基礎知識に関連する記事