HTMLとは?Webページの土台であるHTMLについて簡単解説

コーディング
まるこ
まるこ

社内でWeb担当になった方や、Webについて勉強を始められた方は、色々なIT用語を目にする機会が増えますよね。その中でも「HTML」という単語には、早い段階で出会うのではないでしょうか?
HTMLという単語はなんとなく聞いたことがあっても、「そもそも何の略?」「何ができるの?」と、具体的にはよく分からない部分もあると思います。

本記事では、HTMLについて理解を深めたい方のために、HTMLの基礎情報を解説していきます。
※技術的な内容には触れません。

HTMLってなに?

Webサイトを作るために開発されたコンピューター言語

HTMLとは、「HyperText Markup Language(ハイパーテキスト・マークアップ・ランゲージ)」の頭文字をとった略称です。

Webサイトを作るために開発されたコンピューター言語で、現在インターネット上に公開されているほとんどのWebサイトは、HTMLを用いて制作されています。
ひとつひとつの単語の意味は、以下のとおりです。

「HTML」各単語の意味

  • HyperText(ハイパーテキスト):テキストを超えた文書(WebサイトやWebシステムの開発に必要な複数の言語を関連付けて、結びつける仕組みを持っている)
  • Markup(マークアップ):ブラウザが文書構造を正しく理解するための文書を構成すること
  • Language(ランゲージ):言語

つまり、HTML(HyperText Markup Language)を日本語でいうと、「テキストを超えた文書に、ブラウザが文書構造を正しく理解するための文書構成を定義する言語」という意味になります。

では、「HyperText(ハイパーテキスト)」のテキストを超えた文書というのは、一体どういうことなのか。ピンときませんよね。もう少し詳しく見ていきましょう。

ハイパーテキスト=ハイパーリンク機能をもつ文書のこと

みなさんも「リンク先」「リンクを貼る」など、「リンク」という言葉を耳にしたり、使ったことがあるのではないでしょうか。Webサイトの文章中の単語などに下線が引かれていて、クリックするとその言葉に関連する他のページに移動できる、あれです。

この「リンク」という言葉の正式名称を「ハイパーリンク」と言います。

ハイパーリンクの具体例。当サイトの実績一覧紹介の中にあるURLをクリックすると、リンク先に遷移できます。

前述したハイパーテキストの「テキストを超えた文書」というのは、通常の文書にはない「ハイパーリンク機能」を持った文書を指します。
ある文書に参照情報(他のWebページなど)のリンクが貼ってあれば、関連する情報同士が相互に結びつき、参照したい文書を表示できるのです。

ちなみに、ハイパーテキストを拡張して、文書だけでなく、画像・音声・動画・図表などの多様なデータファイルを、関連付けたり参照できるようにしたシステムを、「Hypermedia(ハイパーメディア)」と言います。

[余談]World Wide Web(ワールド・ワイド・ウェブ)

ハイパーテキストシステムを使って、インターネット上にある膨大な文書を、相互リンクで結んでいるものが、「World Wide Web(ワールド・ワイド・ウェブ、WWW)」です。
Web・ウェブ・W3(ダブリュー スリー)とも呼ばれています。(Webは蜘蛛の巣という意味の英単語です。)
文書が相互リンクで繋がっている様を、蜘蛛の巣になぞらえて、「World Wide Web=世界に広がる蜘蛛の巣」と名づけられました。

マークアップ=ブラウザが文書構造を理解できる言語で、文書を構成すること

Webページに表示したい内容は、「ブラウザが理解できる言語」を使って記述します。
これがHTMLの「Markup(マークアップ)」と「Language(ランゲージ)」です。

人間は、文書のレイアウトや内容、文字の大きさなどの情報を見れば、文の見出しや重要項目であるなど、判断ができます。
しかしブラウザには、文書の内容や文字の大きさからは、「見出し」「重要項目」などを、判断することはできません。

そこで、文書の各部分がどのような役割を果たしているのか、「ブラウザが理解できる言語」を使って、文書の構成や構造を定義し、伝える必要があるのです。
※HTMLは「プログラミング言語」と混同されますが、「マークアップ言語」に分類されます。

HTMLの最新バージョンはHTML5

HTMLの最新バージョンは、2014年に発表された「HTML5」です。5とは、5回目のバージョンアップ(改定第5版)という意味です。

HTML5には様々な機能が追加され、現在のWeb開発における標準仕様となっています。

HTML5に追加された主な機能

  • 要素や属性の追加によって、文書構造をより明確化できる
  • 動画、音声データの扱いが簡単
  • オフラインでもWebアプリケーションやWebサイトの閲覧ができる
  • 位置情報の取得

レスポンシブWebデザイン

現在、Webサイトを閲覧するデバイス(パソコン・タブレット・スマートフォンなど)は様々です。

ひと昔前は、パソコンからWebサイトを閲覧することが主流でした。
そのため、ほとんどのWebサイトはパソコンに適したかたちで制作されており、パソコン以外からでは「表示が小さい」「レイアウトが崩れている」など、モバイル端末の普及とともに、不都合を感じることも多くなりました。

「パソコン用」「モバイル用」にHTMLファイルを分けて、各デバイスに応じたWebサイトを表示させる手法もありますが、URLがパソコンとモバイルで異なる、制作や管理にかかる費用が増すなど、デメリットも少なくありませんでした。

そこで生まれたのが、各デバイスの画面サイズ(ブラウザサイズ)に合わせて、最適なWebページを表示させる手法=「レスポンシブWebデザイン」です。

レスポンシブWebデザインでは、ひとつのHTMLファイルで各デバイスに対応できるWebサイトを管理できるため、URLの統一、制作や管理にかかる費用の削減等のメリットがあります。

また、HTML5では、装飾を目的とした記述が大幅に廃止・非推奨となり、HTMLが「文書構造」、CSSが「装飾」と、役割を明確に分けられたことも、レスポンシブWebデザインが主流となった要因と言えます。

Webページのソースを表示してみよう

現在公開されているほとんどのWebサイトが、HTMLを使って作られています。HTMLはWebサイト上から見られます。

それでは、実際にHTMLとはどのようなものなのか、見てみましょう。お好きなWebサイト(本記事のサイトでも大丈夫です)を表示させたら、画面上で右クリックします。
色々な項目が並んでいますが、その中の「ページのソースを表示」という項目を選択してください。

「ページのソース表示」を選択すると、HTML文書が閲覧できます。

英単語や記号などがズラっと書かれているページが表示されました。これがHTMLを使って書かれた文書です。
このようにWebページの文書構成・文書構造を、ブラウザが理解できる言語=HTMLで記述して、Webページは作られています。

HTMLでできること

この章では、HTMLを使って制作できるものを3つご紹介します。

Webサイト制作

一番定番のものですね。デザインをもとに、レイアウトに沿ってHTMLを記述し、Webページを表示するために使用します。

HTMLメール

HTMLメールは、文字の大きさを変えたり、画像や動画を挿入できるなど、テキストメールよりも具体的にイメージを伝えやすいメリットがあります。
しかし、テキストメールよりも容量が大きく、メールを受け取る方の環境によっては、正しく表示できないデメリットもあります。
一般的なテキストメールとの違いは、以下のとおりです。

メール形式の特徴

  • テキストメール:文字のみで構成されている(一般的なメール)
  • HTMLメール:文字だけでなく、文字の大きさ、画像、動画など、自由にレイアウトを行える

ハイブリッドアプリ開発

Webアプリとネイティブアプリそれぞれの特徴をもった、「ハイブリッドアプリ」の開発ができます。

ハイブリッドアプリは、1つのアプリでOSを問わずに動作させられるため、開発にかかる工数が半分に抑えられる、メンテナンスしやすい、というメリットがあります。
Webアプリ・ネイティブアプリ・ハイブリッドアプリの違いは、以下のとおりです。

アプリの特徴

  • Webアプリ:パソコンやスマートフォンなどデバイスを問わず起動可能。デバイス独自に持っている機能は使用不可。
  • ネイティブアプリ:起動できるOS(Windows、Macなど)が限定されている。デバイス独自に持っている機能は使用可能。対応するOSによって使用するプログラミング言語が異なる。
  • ハイブリッドアプリ:起動できるOSは問わない。HTMLやCSS、JavaScriptを使用してアプリを開発。(基本的な作成方法はWebアプリと同じ。)デバイス独自の機能も使用可能。

覚えておきたい3つのポイント

ここまで、HTMLの言葉の意味や、HTMLでできることを解説してきました。
しかし、全てを細かく覚えるのはとても大変だと思いますので、覚えておくと役に立つポイントを、3つご紹介します。

HTMLの基本タグ

HTML文書では、タグと呼ばれる要素の名前が山括弧(<>)の中に入ったものを使用します。
タグには様々な種類があり、それぞれのタグには意味があります。

タグで文字列を囲み、「これは見出しである」「これは画像である」「これはリンクである」という指示を、ブラウザにしているのです。
例)<h1>これは大見出しです</h1>

それでは、よく使われるタグを見てみましょう。

<h1> ~ <h6>

見出しをつけるためのタグ。hはheading(見出し)の略。
6つの種類があり、h1が最高位で、h6が最下位となる。
※大見出し:h1、中見出し:h2、小見出し:h3のように使用する。

<p>

文章の段落を表示するためのタグ。pはparagraph(段落)の略。
pタグで囲まれたテキストは、段落(ひとまとまり)であると認識される。
※文章の改行が目的の場合は、brタグを使用する。

<img>

画像を表示するためのタグ。imgはimage(画像)の略。
表示したい画像ファイルの場所を指定することで、Webページ上に画像を表示できる。
※imgタグに終了タグはない。(文字列を囲まず単独で使用)

<a>

別のWebページや、同一ページ内の別のファイルなどに移動するためのタグ。aはanchor(錨)の略。
遷移したい場所(リンク先)を指定すると、該当するWebページやファイルに移動できる。

見た目を整えるのはCSS

HTML文書はあくまでも、文書構造をブラウザに定義するために使用します。
つまり、HTMLを記述しただけでは、文字や画像の大きさ、背景の色など、実際に表示させたいと思っているレイアウトにはなっていません。

そこで、Webページの見た目を整えるために使用するのが、「CSS」という言語です。
CSSでは、文字の大きさを変えたい、文書の間に余白を入れたいなど、HTML文書を「どのように装飾するか」を指定します。
※アニメーション等の処理に、JavaScriptなどのプログラミング言語も使用します。

記述した内容が表示されないhead、表示されるbody

HTML文書の内容は、ブラウザに表示されるものと、表示されないものがあります。
表示されないものは<head>タグの中に、表示されるものは<body>タグの中に、記述されています。

headとbodyの役割

  • head(ヘッド):HTML文書の情報(メタ情報)を記述する。
    文字コード、サイトのタイトルや説明文、外部ファイル(CSSファイルなど)のリンク等。
    ※タイトル(<title>タグで囲まれた部分)は、ブラウザのタブに表示される。
  • body(ボディ):実際にブラウザに表示される情報を記述する。
    テキストや画像、動画など、HTML文書の本体となる内容。

まとめ

いかがでしたでしょうか。

HTMLとは、「Webページを構成する土台である」ということが、少しでも伝われば嬉しいです。
記事内でもご紹介しましたが、Webサイトのソースコードは、「右クリック→ソースを表示」で閲覧できますので、ぜひ色々なWebサイトのHTML文書をご覧になってください。

Wepotは、ディレクション、デザイン、イラスト、動画編集、コーディングなど、幅広い分野を担えるメンバーで構成されており、お客様の目的に則した制作物のご提供が可能です。
Webサイトの制作等を検討している・相談してみたいなどございましたら、お気軽にお問い合わせください。

ご依頼・ご相談はこちら

お客様の課題解決に最適なメンバーアサインでスムーズなプロジェクト進行をいたします。制作して終わりではなく、お客様が求める成果に結びつくご提案をさせていただきます。

この記事がシェアできます

この記事を書いた人
まるこ

まるこ
コーダー

まるこ
コーダー

想いの詰まったWebデザインを“カタチ”にするコーダーとして、Webサイト制作の一端を担っています。「誰が見てもわかるコード」を念頭に置き、品質・保守性を重視して制作しています。趣味はサッカー観戦。好きな色はトリコロール!

  • Wepotについて

    アイコン

    Wepotはデジタルクリエイティブで課題を抱えるすべての人への解決策を提示できます。

  • 実績一覧

    アイコン

    Wepotには多種多様な実績があります。メンバーの強みが生きた実績をご覧ください。

  • 制作のご相談

    アイコン

    現在の課題やお悩みをお聞かせください。あなただけのクリエイティブチームを編成し解決へと導きます。