サイトロゴ

Enjoy Creating
Web & Mobile Apps

MENU BOX
WEB
MOBILE
OPEN

ホーム

 > 

 > 

HTMLって何なの?

HTMLって何なの?

この記事にはプロモーションが含まれています。

何かプログラミングやそれに関することを学びたいと思ってネットで検索すると、まずは習得が比較的容易なHTML/CSSがおすすめ!…という記事や動画が出てきます。
ブログを書いたりしたことがある方にとっては、HTMLという単語ぐらいは聞いたことがあるのではないかと思いますが、パソコンは仕事でWordやExcelを使うぐらい…という方にとっては、あまり聞き馴染みがないかもしれません。
そこで今回は、「そもそもHTMLってなに?」をテーマに、HTMLの基礎を解説します。

– 目次 –

HTMLとは?

副業や在宅ワーク、フリーランス…こういったワードで検索すると必ずと言って良いほど候補にあがるのがWeb制作(Webデザイン)です。

そしてWeb制作にはまず、HTMLをある程度理解する必要があります。
JavaScriptなどのプログラミングや、Photoshopなどの高度な画像編集ソフトに比べると、独学でも習得が比較的用意なため、はじめの一歩としてHTMLに取り組む方も多いのではないでしょうか?

用語解説:JavaScript(ジャバスクリプト)

用語解説:Photoshop(フォトショップ)

Web制作やデザインに興味があるのであれば、まずはHTMLから始めるというのは良いと思います。難しいことはあまりないので、スタートでいきなり挫折しにくい…と言えるからです。

一方で、難しくないということは、HTMLを学んだだけではお金になりにくいということであり、特に稼ぐことを目的としている場合は、基本を飛ばして雑に進めてしまいがちと言えます。
そのため、根本的なところを理解しないまま次に進んでしまう…ということにもなりやすく、注意が必要です。

確かなスキルを身につけるためにも、まずは基礎の基礎からしっかり理解していきましょう!

そもそもHTMLとは?

HTML(エッチティーエムエル)とは、ハイパー・テキスト・マークアップ・ランゲージ(HyperText Markup Language)の頭文字を取ったもので、その名の通りテキスト(文字・文章)で構成されるモノです。

HTML自体はテキストなので、以下のような特徴を持ちます。

*HTMLの特徴*
ファイルサイズは軽い
Webサイトが重くなる原因は、画像や動画の多用、読み込ませるプログラムの量とその処理が膨大になっている…などであり、HTML自体はテキストのみで構成されるので、ファイルサイズは基本的に軽い

テキストを読み込むことができるファイルで開ける
Windowsのメモ帳や、iOSのテキストエディットなど、テキストを読み込むことができるアプリケーションであれば読み込んでファイルを開くことが可能(設定の変更が必要な場合あり)

そして、HTMLはテキストであると同時に、Webページを表示させるためのファイルです。

ただし、ここで疑問が生まれます。

HTML自体はテキストなのに、実際に表示されるWebページはテキストだけでなく、背景に色がついていたり、画像が挿入されていたりするのは、なぜでしょうか?

これは、Webブラウザと呼ばれるものが、HTMLに書かれたテキストを解析した上で、適切に表示しているからです。

htmlのイメージ画像

あくまでWebページを適切に表示できるのはブラウザであるため、メモ帳などのテキストアプリではHTMLを開くことはできるものの、HTMLが全てテキストとして表示されてしまいます。

フォトアプリで音楽を再生できないのと同じですね。

    POINT!
  1. ・HTMLはテキストで構成される!
  2. ・そのため、HTMLはメモ帳などでも開くことができる!
  3. ・ただし、HTMLに書かれたテキストを適切に解析できるのは、Webブラウザ(ChromeやSafariなど)!

Webブラウザって何?

HTMLの理解を深めるためには、Webブラウザをしっかり理解することが大切です。

そもそもWebブラウザってなに?…というところから説明すると、WebブラウザとはHTMLを解析して表示させることができるソフト(アプリケーション)です。

言い換えれば、あらゆるWebサイトを見るのに必要なアプリということになります。

Webブラウザのイメージ
Webブラウザのイメージ

私たちは日常生活において、このWebブラウザを頻繁に使っています。

たとえば、何かわからないことを調べたい場合、まずネットで検索しますよね?
検索ワードを入力すると検索結果が表示されるわけですが、これは「検索サイト」というWebサイトが開かれている状態であり、Webサイトである以上、検索結果を表示しているものはWebブラウザということになります。

ただ、スマホやパソコンには標準の(あらかじめインストールされていてすぐに使える状態になっている)Webブラウザがある上に、検索ワードを入力するだけで自動的にWebブラウザが起動するようになっています。

なので、標準ではない別のWebブラウザをインストールして使うなどしない限り、日常的に使ってはいてもWebブラウザを意識することは少ないかもしれません。

また、GoogleマップやYouTube、Twitterなど、世界的に利用されているサービスはそれを開くための専用のアプリが普及したため、わざわざWebブラウザから開くことは少なくなりました。

そのような背景もあって、Webブラウザは2021年現在、会社・個人のホームページやブログを見るためのアプリという役割が主になりつつあります。

    POINT!
  1. ・Webブラウザとは、Webサイトを表示するのに必要なアプリ!
  2. ・スマホやパソコンには標準のWebブラウザがプリインストールされている!
  3. ・メジャーなサービスはそれを開くための専用のアプリが普及しているため、必ずしもWebブラウザで開かれるとは限らない!

HTMLはプログラムではない?

ITの時代が加速するのに伴い、何かプログラミングを習得しようと思ってネットで調べた結果、HTMLにたどり着いた人もいるかと思います。
そして調べを進めていくと、HTMLはプログラミングではないという情報を目にするはずです。

何もかもが初めての初心者にとって、HTMLとプログラミングは何がどう違うのかが分かりづらく、混乱を生じさせやすいポイントなので、この章ではHTMLとプログラミングの違いについて解説していきます。

HTMLは、ハイパーテキストマークアップランゲージの略でしたね。

マークアップとは、太字などの視覚的な情報や、タイトルや引用文といった意味を持つブロックをコンピュータに理解できるよう、マーク(印・タグ)をつける…という意味を持ちます。

人間は情報の重要性や種類を視覚(見た目)で判断できますが、コンピュータは「見た目で判断する」ということができないので、マークアップが必要というわけですね。

マークアップの説明画像1

HTMLの場合は、タグと呼ばれる山カッコ < > を使い、「ここはタイトル」「ここは引用文章」というふうに、マークアップ(=印をつける)をしていきます。

つまりHTMLというのは、コンピュータに何かを計算させたりするわけではなく、Webサイトの骨組みを作るというイメージになります。

マークアップ言語としてのHTMLの特徴をまとめると、以下になります。

*HTML(マークアップ)の特徴*
単純・シンプル
タイトル部分にはタイトル用のタグを、引用文には引用文用のタグを指定する…という感じで、作業としてはシンプルかつ単純。
なので、タグの種類と基本的なルールを理解すればそこまで難しいことはなく、HTMLは簡単と言われてしまう所以。(本当は奥が深いです)

見た目を整えたり、機能を持たせたりするものではない
タイトルのタグなど一部のタグは、タグを挿入するだけでWebブラウザが自動的に文字を大きくしてくれるなど見た目の変化が出るものもあるが、基本的には見た目を整える役割を持つわけではない。
また、データを計算したり格納したりできるわけではないので、ユーザーのログイン機能など、Webサイトに機能を持たせることはできない

一方、プログラミングはHTMLとは対照的な特徴を持ちます。
大量のデータを計算したり、格納したり、「ある条件ではAの処理を行い、他の条件ではBの処理を行う」といった条件分岐と呼ばれる処理もプログラムが得意とする分野です。

Webサイトでプログラムが使われている例としては、ユーザーログイン機能(会員制サイト)や、自動的な画像の切り替え(スライダー)、メールの送受信機能(お問い合わせフォーム)などがあります。

    POINT!
  1. ・HTMLは、コンピュータに視覚的な情報を理解させるマークアップとしての役割がある!
  2. ・HTMLは、計算や複雑な処理はできない!
  3. ・データの計算や格納、処理はプログラムが得意!

HTMLを学ぶ際の注意点

冒頭でも述べたように、HTMLは習得しやすい代わりにそれだけではお金にならないため、副業やフリーで少しでも早く稼ぎたいという場合は雑に進めてしまいがちです。

ですが、実はHTMLの正しい理解がSEO対策に欠かせません。

用語解説:SEO対策(エスイーオータイサク)

Webサイト制作やランディングページ制作の依頼はクラウドソーシングでよく見かけますが、Webサイトを作ったりリニューアルしたりするのには、「Webサイトを利用して集客したい・知名度を高めたい」という目的がある場合がほとんどです。

ものすごくカッコいいデザインを作ることができても、より多くの人に見られなければ意味がありません。

見た目の部分はコンピュータには理解できないので、オシャレなデザインとか、洗練されたデザインとか、それだけでは検索エンジンには評価されず、SEO対策にはなりません。(もちろん、デザインが良いに越したことはないです)

SEO対策記事の画像

そこでHTMLが力を発揮します。

HTMLはマークアップ言語であり、コンピュータ(検索エンジン)に、Webサイトの意味や内容を伝えるという役割を果たします。

そしてこのことこそ、強力なSEO対策になるというわけです。

SEO対策もかなり奥深いので、HTMLで全ての対策ができるわけではありませんが、HTMLがSEO対策の大きな部分を占めるということは間違いありません。

趣味としてではなく、副業やお金を稼ぐ目的でWeb制作関係を学ぶ場合、HTMLは少し時間をかけても良いのでSEO対策と関連づけながら学ぶと良いと思います。

    POINT!
  1. ・HTMLの正しい理解がSEO対策になる!
  2. ・かっこいい/オシャレなWebサイトが作れるというだけでは不十分!
  3. ・HTMLを学ぶときは、SEO対策と関連づけながら学ぶと良い!

ワンポイントチェック

WordPress(ワードプレス)などのCMSを土台に、(特に)有料のテーマやテンプレートを使用してWebサイトを作成する場合は、自分自身でHTMLファイルに手を加えなくてもすでにSEO対策万全のHTMLファイルになっていることが多いです。

用語解説:CMS(シーエムエス)

なので、個人でそれなりのブログサイトを開設したいという場合は、無理に自分で一から作るよりも有料のテンプレートを購入した方がアクセス数のアップを見込めると言えます。

また、副業でWebサイト制作を請け負う場合も、CMSや有料のテンプレートを使ってはならないという案件はそんなにないので、クライエントに確認を取った上で有料テーマを購入し、そこからWebサイトを作り上げるというのも全然アリです。

他にも、テンプレートを使わずにオリジナルで作り上げた上で、SEO対策の部分のみプラグインを入れて対応するという方法もあり、必ずしも自分自身の手でHTMLを編集しなくても良くなってきてはいます。

ですがCMSも使わない完全にオリジナルWebサイトとなると、自身でSEO対策を意識したHTMLファイルを作成する必要があるので、Webサイト制作に関わるのであれば、やはりHTMLの基礎理解は重要と言えます。


メモ帳でHTMLファイルを作ってみよう!

  • メモ帳アプリを開き、テキトーに何か書く
  • 「ファイル」→「名前をつけて保存」を選択する
  • 「ファイルの種類」を「全てのファイル」に変更
  • ファイル名の末尾に「.html」と入れて保存する
  • HTMLファイルが作成される
« »

カテゴリーリンク

著者について- author profile -

ROYDOプロフィール写真
Michihiro

モバイルアプリ(iOS・Android)ディベロッパー&デザイナー

これまでに、可読性の高いカラーパターンを自動で生成するアプリや、『第3火曜日』といった形式で通知をスケジュールできるアプリなどを制作。

サブでWebデザイン・フロントエンドエンジニアとしても活動しています。

📝ツール・言語:JavaScript/React Native/Kotlin/Android Studio/Swift/SwiftUI

🎓資格:応用情報技術者/基本情報技術者/ウェブデザイン技能検定3級

Twitterアイコン Instagramアイコン