HTMLとは？
ITエンジニアの皆さんの多くは、1度はHTMLについて学んでいることでしょう。また、実際にWebプログラマーとして、日常的にHTMLを使いこなしている方もいるはずです。しかし、HTMLについて尋ねられた際に、きちんと説明するのを難しく感じてしまう方も多いのではないでしょうか。
この記事では、HTMLとはどういった言語なのか、何ができるのかを解説し、CSSとJavaScriptについても関係性をまとめました。特に日常的にHTMLを活用しているフロントエンドエンジニアを目指す方は、ぜひ最後まで読み進めてください。
HTMLは様々なWebサイトやCMSで活用されている
世界中のWebサイトのほとんどはHTMLで作られています。しかしながら「Webページは作ったことはあるけれど、HTMLは使わなかった」という方も多いでしょう。
有名なCMSであるWordPressも生成されるのはHTMLです。最近はHTMLに関する知識が皆無でも簡単にWebページを作れるようになっていますが、HTMLを使えると何かと便利です。Webページの微調整、色の調整など、細かい部分ではHTMLで直接記述するケースもあります。
ぜひ『マイナビIT エージェント』をご活用ください！
HTMLはどういった言語？
ここでは、HTMLとはどういった言語なのかを具体的に解説します。また、併せて簡単にできるWebページの作成方法やHTMLを活用するITエンジニアの年収についてもまとめました。
HTMLとは
HTMLは、「Hyper Text Markup Language」の略語です。
これをそのまま直訳すると「高度なテキストに目印を付けるための約束事」です。Languageは言語を意味しますが、ここでは文法やルールと考えてください。
HTMLはマークアップ言語であり、プログラミング言語ではありません。私たちが日常に目にするWebページは、WebデザイナーやWebプログラマーが視覚的に分かりやすく、タイトル・文字・画像などを配置しています。
しかし、コンピュータからすれば単なるコードの羅列でしかありません。そこで登場するのがHTMLです。HTMLがコンピュータと人間の間を取り持つ、翻訳者の役割を果たしています。HTMLはWebページに表示する画像サイズの指定や、文字のフォント・サイズ・配置を指示するといった役割を担ってくれます。
次にハイパーテキストについて、おさらいしておきましょう。
ハイパーテキストとは
ハイパーテキスト（HyperText）は、直訳すると「超テキスト」です。通常のテキストを超越したテキストということになりますが、何が「超」なのでしょうか？
Webページはハイパーリンクが頻繁に登場します。このハイパーリンクは、ある語句に関してさらに深く知りたい時に、その語句から直接、関連文章や説明文書を呼び出すという機能を持っています。このように語句や文章を「関連づける」ことをハイパーリンクと称し、ハイパーリンクの機能を持つ文書を「ハイパーテキスト」と呼んでいます。
マークアップとは
HTMLの特徴がハイパーテキストであることは理解できましたが、ではマークアップ（Markup）とは何のことを指すのでしょう？マークアップとはタグと呼ばれる記号で文章を囲い、文章に「目印をつけて」意味を持たせることです。
マークアップ言語によって見出しがどこなのかを把握したり、どこまでが引用した部分なのかを確認したりすることが可能です。このように、人間であれば理解できることでもコンピュータがその都度理解することができないため、マークアップ言語を使用して理解させることができます。
また、マークアップ言語で見出しを大きく太字にしたり、段落を1段落ごとに改行して表示させたりすることで、ユーザが読みやすいサイト作りを行うことができます。
タグとは
タグはWebページ上で何をどう表示させるかを指定する「命令文」であり、テキストをその意味ごとに<>で囲んで作成していきます。このタグをコンピュータが読み取って、人に分かりやすい表示に変えてくれるのです。
例えば、見出しであれば階層の上から <h1>~<h6> を用います。大見出しの場合は、<h1>大見出し</h1> と記述します。
本文であれば、段落を表す <p>本文</p> を用います。
その他、画像は<img>タグを用いて、<img src="画像ファイル名"/> のように記述します。
簡単にできるWebページの作成方法
以上確認したことを、実習しながらおさらいしてみましょう。WebページはHTMLで構成されており、HTMLはテキストの羅列であるため、タグによってマークアップされて意味のあるものになっています。
ここでは、Windowsのメモ帳で簡単なWebページを作ってみましょう。以下をメモ帳で記述してみてください。
<title>タイトル-世界の山</title>
<h1>大見出し-富士山</h1>
<h2>中見出し-富士山の画像</h2>
<p>本文-富士山の画像をフリー画像のpixaby.comから拾ってきました。</p>
<img src="https://cdn.pixabay.com/photo/2014/10/07/13/48/mountain-477832_1280.jpg" >メモ帳に入力したら、ファイル名を「富士山」、拡張子は「html」として保存してみるとHTMLファイルが完成します。HTMLファイルとは、この保存した「富士山.html」というファイルのことで、ダブルクリックすると次のように表示されます。
上記のように、HTMLでは簡単にWebページが作成できます。
HTMLが使われる場面
メモ帳のようなテキストエディタを用いて、文章や画像にタグを付けるだけで簡単にWebページを作れることが分かりました。
このようにHTMLは主にWebページ作成に使われていますが、実は他にもHTMLが活用されているものがあります。Webページを含めて、大きく3つの場所でHTMLが利用されているので、順に見ていきましょう。
Webサイト
世界中のWebサイトのほぼすべてがHTMLによって作られています。では実際のWebサイトを見てみましょう。今ご覧になっているこのサイトでも構いません。
Webページが実際にHTMLで記述されていることを確認するには、そのソースコードを見る必要がありますが、Windowsのパソコンなら「CtrlとU」、Macを使っている方なら「⌘とOptionとU」を同時に押すとソースコードを表示ができます。
このように、WebサイトはすべてHTMLで記述されているのです。
Eメール
皆さんが普段利用しているEメールでも、HTMLが使われているケースが多いです。Eメールも当初はテキスト文字だけで構成されていましたが、近年のメールソフトは、OutLookのようにHTML対応が主流です。
文字が太字・カラー装飾・画像が貼ってあるメールは、HTMLメールです。ビジネスメールではテキストメールがまだ主流ですが、メルマガや登録サイトのお知らせメールなどではHTMLメールが多いです。
HTMLメールはWebと同じくビジュアル性があり、訴求力が高いため、広告重視のメールなどではよく利用されています。
アプリ開発
HTMLはOSに縛られない点が強みです。iOSであれAndroidであれ、HTMLは共通言語です。
スマホアプリを開発する際、iOSの場合はObjective-CやSwiftなどを用い、AndroidはJavaなどを使いますが、iOSとAndroidそれぞれに対応できるスマホアプリを作る場合には、個別に開発をしなければなりません。
しかし、Webページに動きを与えるJavaScriptと、HTML（HTML5）を使えば、iOSとAndoroidの両方で動くスマホアプリの開発が可能です。
これをハイブリッドアプリと称し、二重開発を避けられ、開発コストの低減につながることから注目を浴びていましたが、動作面やパフォーマンス面で弱点があります。ハイブリッドアプリ構築の環境としては、Monaca・アドビ社のApache Cordova・マイクロソフト社のXamarin・FacebookのReact Nativeなどが知られています。
【参考】：Monaca 【参考】：Apache Cordova 【参考】：Xamarin 【参考】：React Native
HTMLでできること
HTMLの概略を理解したところで、HTMLで何ができるのかについて具体例を紹介します。HTMLでできることの中から、代表的な例を3つ挙げてみました。
見出しを作る
HTMLの重要な機能として、「文章の見出し」を作る機能があります。
先ほどのように、見出しの定義には <h1>から<h6> までのタグが使われます。見出しタグによって、コンピュータはその文章が見出しであると認識するのです。見出しタグがないと、コンピュータは単なるテキスト文であると認識し、見出しとして表示されません。
リンクを作る
HTMLはハイパーテキストの特徴として、外部サイトや他のページへ移動するためのリンクを設定できる点があります。HTML上では、リンクを貼る部分にタグとして <a> を使います。コンピュータはタグをリンクの命令だと認識します。
表を作る
HTMLの特徴として、表の作成機能があげられます。表を作成する際には <table>や<tr>、<td> などのタグが用いられます。これらのタグによって列や行ができ、表を作成することができるのです。
こういったHTMLのスキルはエンジニア職以外でも日々活用されています。HTMLがきっかけでプログラミングに興味を持った場合は、研修制度が充実している企業を選んでスキルを磨くことをおすすめします。
ぜひ『マイナビIT エージェント』をご活用ください！
HTMLとセットなCSSとJavaScriptとは
HTMLは人の顔に例えると、目や鼻などのパーツに該当します。人は口・目・鼻があることで顔として認識します。コンピュータにしてみると、目も鼻も口も単なるパーツにしかすぎませんが、それぞれのパーツに意味を持たせ、配置させることをコンピュータに知らせるのがHTMLの役割です。
しかし、それだけでは顔は無表情です。目を大きくしたり、鼻を小さくしたりすることはできますが、表情とは言えません。顔にメイクアップを施し、表情を豊かにしてくれるのが、CSSやJavaScriptです。
CSSはメイクと同じ
単に目・鼻・口があるだけの顔にメイクを施すのがCSSの役目です。CSSとは「Cascading Style Sheets」の略語であり、CSSを使うと、例えば瞳を茶色にしてサイズを大きくし、パッチリ目にするというようなメイクができます。
元々あるHTMLの文章を、よりキャッチーでカラフルな、デザイン性の高い1つの作品として仕上げることができます。
JavaScriptは、表情を豊かにしてくれる
多くのWebサイトには、動きがあってインパクトのあるページをよく見かけます。このようなページは、JavaScriptを用いています。
JavaScriptは、顔で例えると笑顔や怒った顔など、顔の表情を豊かにしてくれる働きを持っています。JavaScriptを使うと、アニメーションやスライドのページを作ったり、対話型で応答するページを作ったりすることが可能です。
HTMLを活用する職種や年収
HTMLを活用する職種にはどのようなものがあるのでしょうか。ここでは、クリエイター職の例とITエンジニア職の例を紹介します。
HTMLを主に用いる職種
HTMLを主に活用する職種には、Webデザイナー・Webクリエイター・Webディレクターのようなクリエイター職が挙げられますが、ITエンジニアの場合では、フロントエンドエンジニアが挙げられます。
フロントエンドエンジニアとは、Web開発全般を担う職種です。HTMLやCSSによるコーディング以外に、JavaScriptを利用し、さらにはUI/UXデザインに精通してPHPやCMSの構築にも関わる人もいます。これに対して、Web開発に関係してサーバやデータベースなどの構築・管理を担うのがバックエンドエンジニアです。
フロントエンドエンジニアはDX推進やスマホ普及への対応などから、需要が増している人気職種の1つですが、フロントエンドエンジニアを目指すには次のようなスキルが必要です。
まずはHTMLのスキルはもちろん、画面デザインを担うCSS、Webページ上で動くJavaScript、Webでよく利用されるPHP・Ruby・Pythonなどのプログラミング言語を1つは習得しておきましょう。さらには、ユーザインターフェース・ユーザーエクスペリエンスに関するUI/UX・検索エンジンの最適化技術であるSEOなどの知識も必要です。
フロントエンドエンジニアの年収
ここでは、フロントエンドエンジニアの平均年収を紹介します。
「マイナビエージェント職業別年収ランキング」でのフロントエンドエンジニアの平均年収は385万円、経済産業省2017年発表の「IT関連産業の給与等に関する実態調査結果」から近い職種のコンテンツクリエイタ/デザイナーを参考にすると、平均年収411万円と分かりました。
国税庁2020年発表の「民間給与実態統計調査」における民間企業平均年収は433万円なので、マークアップエンジニアは一般平均年収よりも、やや低めであることが分かります。
フロントエンドエンジニアは、20代のうちはキャリアや実績を積むためにも年収はそれほど高くはありませんが、マイナビエージェントによると30代の場合は平均457万円まで一気にアップします。多くのITエンジニアが転職を繰り返すことで年収アップを実現させているため、今よりも年収アップを望む場合は転職してみるのも1つの手です。
【参考】：マイナビエージェント職業別年収ランキング ※【平均年収 調査対象者】 2015年〜2016年末までの間にマイナビエージェントにご登録頂いた20代・30代の方 【参考】：[IT関連産業における給与水準の実態① ~ 職種別（P7）(https://warp.da.ndl.go.jp/info:ndljp/pid/11623215/www.meti.go.jp/press/2017/08/20170821001/20170821001-1.pdf) 【参考】：民間給与実態統計調査-国税庁
HTMLを習得してフロントエンドで活躍しよう
この記事では、HTMLについて深掘りし、簡単なWebページの作成方法やできること、フロントエンドエンジニアの年収などを解説しました。HTMLを活用するエンジニア職に就くには、HTMLの他にも学ばなくてはならないことが多いですが、まずはHTMLの基本を学んだ上で、CSSやJavaScript…と幅を広げていきましょう。
これらのスキルは多くの企業で歓迎されやすいので、資格取得なども視野に入れて習得を目指してください。習得した後は、転職エージェントを活用してスキルを評価してくれる企業への転職も検討してみましょう。
そこでぜひご活用いただきたいのがマイナビIT エージェントです。
マイナビIT エージェントは、IT・Webエンジニア向け、無料の転職⽀援サービスです。
IT・Webエンジニアの転職事情に詳しいキャリアアドバイザーが、あなたのご経験やスキルをお伺いし、転職活動のプランをご提案します。
アドバイザーは企業側と直接連携を取れるので、求人票に載っていない情報も確認することができます。こちらで、働き方などをしっかり確認の上、応募企業を選んでいくのが良いでしょう。
未経験からのキャリアチェンジは心身ともに本当に大変だと思います。少しでもご自身の負担を減らすべく、エージェントサービスを活用して、失敗のない転職活動に臨んでいただければ幸いです。
エンジニア転職のご相談はぜひ
『マイナビIT エージェント』へ！
新着記事やエンジニアに役立つ情報をお届け！
日々のキャッチアップをお手伝いします！
編集部オススメコンテンツ
アンドエンジニアへの取材依頼、情報提供などはこちらから
