HTMLとは?プログラミング初心者は学ぶべき?をわかりやすく解説します!

ウサギ
ウサギ

HTMLってよく聞くんだけど、これはなに?

プログラミングはじめるには、やっておいてほうがいいの?

イヌ
イヌ

HTMLだね!

できるだけ、わかりやすく解説するね〜

ウサギ
ウサギ

お願いします〜

本記事の内容

・HTMLについて
・プログラミング初心者はHTMLを学ぶべきか
・初心者におすすめのプログラミング言語

本記事の信頼性

イヌ
イヌ

・小規模の開発会社、上場企業2社でエンジニアを経験

・正社員、フリーランス合わせて10年以上エンジニアとして活動

・現在、フリーランスエンジニアとして時給5桁で活動中

この記事を書いているイヌは10年前、独学でプログラミングを始めました。

本格的にプログラミングを始める前は、HTMLとCSSでWebサイトをつくっていました。
はじめてWebサイトが表示されたときは、とても感動したことを覚えています。

プログラミング学習を始めようとすると、いろいろなプログラミング言語があって、どの言語から始めたらよいか、わからないですよね。

今回は「HTML」というマークアップ言語について、初学者に向けてわかりやすく解説します!

気楽に読み進めてもらえればうれしいです!

HTMLについて

HTMLは、1990年に発表されたマークアップ言語の一つです。

マークアップ言語というのは、プログラミング言語とは異なります。

プログラミング言語は、コンピュータに何らかの命令を出して、実行するプログラムを書くために利用されます。

マークアップ言語は、コンピュータに命令を出しません。ただ文書に対して、HTMLタグを利用して、どのような用途なのかを示すだけです。

具体的には、以下の2つの例をみてください。

リンクをつなぐ

HTMLは、Webサイト内を移動したり、異なるWebサイトを移動したりすることをサポートします。

異なるWebサイトを移動する

  • https://dog-and-rabbit.com/python から https://dog-and-rabbit.com/java に移動する

別のWebサイトを移動する

  • https://www.google.co.jp から https://www.yahoo.co.jp に移動する

スマホもLINEもない時代の話です。

昔の大学の先生方が研究をしているときに、他の先生がどんな研究をどの程度進めているか、リアルタイムでわからなかったんですね。

これは困ったなということで、ヨーロッパで研究者をしていたティム・バーナーズ=リー氏が、World Wide Web (WWW)というシステムをつくります。

WWWというのは、インターネット上でHTMLで書いた文書をブラウザでみることができるシステムです。

要は、いま見てるこのブログですね。

訪れたWebサイトの他のページをみられたり、さらにほかの人のWebサイトをリンクをたどって、訪れたりできるのは、このWWWの仕組みがあるからです。

いまでは、当たり前過ぎて「ふーん」な内容かもしれないですが、ここからWebがはじまりました。

定義をする

さまざまなタグを利用して、「ここは見出し」「ここは段落」「ここは箇条書きリスト」「ここに画像を差し込もう」のように、Webページ上にどのように文字や図表を定義するかを指示します。


HTMLは「リンクの設置」「文字・図表の定義」が担当です。

殺風景ですが、HTMLは以下のように情報の定義付けをします。

情報の定義付けをすることで、

  • 人がソースコードを見たときに、どのような構造かが分かりやすい
  • ロボットがソースコードを見たときに、必要な情報を取得しやすい

の利点があります。

ちなみに、HTMLとともに、CSSというスタイルシート言語がありますが、CSSは見た目やレイアウトを整える役割です。

以下は、さきほどのHTMLの構造を、CSSで見た目やレイアウトを変更しました。

このようにHTMLは構造定義、CSSは見た目やレイアウトを整えると役割を分けて利用します。

プログラミング初心者はHTMLを学ぶべきか

Web制作やWebアプリ開発など、Webに関わりたいのであれば、HTMLは必須で学ぶべきです。

ただ同じWeb業界だとしても、なりたいポジションによって「どの程度学ぶべきか」が異なります。

Web制作の場合

WebデザインやWordPressとともにWeb制作をする場合、HTMLはきちんと学ぶ必要があります。

ブログなどのコンテンツを提供する場合は、HTMLでWebページを構造化しないと、さまざまな影響があります。

SEO

Googleが行っているクロールに対して、SEO(Search Engine Optimization)を行う必要があるからです。

すべてが div タグなどで作られてしまうと、GoogleBotがクロールしにきたときに、どれが見出しで、どれが本文かわかりません。

そのため、h タグや、pタグなど、適切なマークアップをする必要があります。

アクセシビリティ

アクセシビリティとは、利用のしやすさ、アクセスのしやすさのことです。よく知られている言葉では、バリアフリーがありますね。

コンピュータ文脈でのアクセシビリティは、さまざまな人や作業状況、障害の状況でも、コンピュータが利用しやすいことを指します。

HTMLを正しく記述することで、例えば聴覚障害の方が利用されるスクリーンリーダーでも、構造が把握しやすくなります。

参考 アクセシビリティMDN Web Docs

Webアプリ開発

Webアプリ開発の場合は、Web制作にくらべ、マークアップの正確さを求められません。

当然、アクセシビリティなどを考えると、Web制作同等のマークアップができることは、とても良いことです。

ただ、Webアプリ開発の要件としては、

  • JavaScriptでSPA(Single Page Application)などのフロントエンド開発ができる
  • RubyやPython、PHPなどでバックエンド開発ができる
  • AWSやGCPを利用して、インフラ環境を構築することができる

など、よりWeb開発の能力を求められます。

Webアプリ開発者を目指すのであれば、優先順位として、HTMLやCSSより、プログラミング言語のJavaScriptやRuby、Pythonなどを重点的に伸ばしていくことをおすすめします。


Web制作とWebアプリ開発の違いについては以下を参照ください。

初心者におすすめのプログラミング言語

初めてのプログラミング言語は、JavaScriptがおすすめです。

パソコンとブラウザがあれば、プログラミングを体験できるので、手軽さでは圧倒的にナンバーワンです。

もしMacをお持ちであれば、最初からRubyやPythonがインストールされているので、RubyやPythonから始めるのもよいですね。


JavaScriptもRubyもPythonも、プログラミング言語の基本は変わりません。

変数があり、関数があり、繰り返しがあり、条件分岐があります。

エンジニアは、はじめに深く学んだプログラミング言語が、考え方のベースになる傾向があると、イヌは思っています。

これは自然言語である日本語でも同じです。あとから英語を学んだとしても、重要な決断や考えることは日本語で考えることが多いでしょう。

できるだけ学びやすいプログラミング言語を選び、学んでいきましょう!


いろいろなプログラミング言語を以下の記事で紹介しています。

あわせてご覧いただけるとうれしいです。

イヌ
イヌ

HTMLの解説でした〜

意外と奥が深いですが、あまりこだわらずにどんどん進んでいくことをおすすめします〜

ウサギ
ウサギ

なるほど〜!

またね〜

コメントを残す

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