HTMLについて学ぼう
ITエンジニアの皆さんの多くは、1度はHTMLについて学んでいることでしょう。また、実際にWebプログラマーとして、日常的にHTMLを使いこなしている方もいるはずです。しかし、HTMLについて尋ねられた際に、きちんと説明するのを難しく感じてしまう方も多いのではないでしょうか。
この記事では、HTMLとはどういった言語なのか、何ができるのかを解説し、CSSやJavaScriptとの関係性についてもまとめました。特に日常的にHTMLを活用するフロントエンドエンジニアを目指す方は、ぜひ最後まで読み進めてください。
HTMLは様々なWebサイトやCMSで活用されている
世界中のWebサイトのほとんどはHTMLで作られています。しかしながら「Webページは作ったことはあるけれど、HTMLは使わなかった」という方も多いでしょう。近年ではCMS（コンテンツマネジメントシステム）が普及しており、HTMLを自分で記述しなくてもWebページが作れるようになっています。
ただし、HTMLの技術が不要になったわけではありません。有名なCMSであるWordPressも、HTMLの仕組みを用いてWebページを生成しています。Webページの微調整、色の調整など、細かい部分はHTMLで直接記述するケースもあります。そのため、HTMLのスキルを身に付けておくと、さまざまな場面で役に立ちます。
ぜひ『マイナビIT エージェント』をご活用ください！
HTMLはどういう言語？
ここでは、HTMLとはどういった言語なのかを具体的に解説します。また、併せて簡単にできるWebページの作成方法やHTMLを活用するITエンジニアの年収についてもまとめました。
HTMLとは
HTMLは、「Hyper Text Markup Language」の略語です。これをそのまま直訳すると「高度なテキストに目印を付けるための約束事」です。Languageは「言語」を意味しますが、ここでは文法やルールと考えてください。
HTMLはマークアップ言語であり、プログラミング言語ではありません。私たちが日常的に目にするWebページは、WebデザイナーやWebプログラマーが視覚的に分かりやすく、タイトル・文字・画像などを配置しています。
しかし、コンピュータからすれば単なるコードの羅列でしかありません。そこで登場するのがHTMLです。HTMLがコンピュータと人間の間を取り持つ、翻訳者の役割を果たしています。HTMLはWebページに表示する画像サイズの指定や、文字のフォント・サイズ・配置を指示するといった役割を担ってくれます。
ハイパーテキストとは
「Hyper Text Markup Language」の語句の意味について更に深掘りしていきましょう。ハイパーテキスト（HyperText）は、直訳すると「超テキスト」です。通常のテキストを超越したテキストということになりますが、何が「超」なのでしょうか？
Webページにはハイパーリンクが頻繁に登場します。このハイパーリンクは、ある語句に関してさらに深く知りたい時に、その語句から直接、関連文章や説明文書を呼び出すという機能を持っています。このように語句や文章を「関連づける」ことをハイパーリンクと称し、ハイパーリンクの機能を持つ文書を「ハイパーテキスト」と呼んでいます。
マークアップとは
HTMLの特徴がハイパーテキストであることは理解できましたが、ではマークアップ（Markup）とは何のことを指すのでしょう？マークアップとは「タグ」と呼ばれる記号で文章を囲い、文章に「目印をつけて」意味を持たせることです。
マークアップ言語によって見出しがどこなのかを把握したり、どこまでが引用した部分なのかを確認したりすることが可能です。人間であれば目で見て理解できることでもコンピュータが人間と同じように理解することは難しいため、マークアップ言語を使用して理解させます。
また、マークアップ言語で見出しを大きく太字にしたり、段落を1段落ごとに改行して表示させたりすることで、ユーザが読みやすいサイト作りを行うことができます。
HTMLタグとは
マークアップとは「タグ」を使って文章に目印をつけることだと説明しました。「タグ」とはWebページ上で何をどう表示させるかを指定する「命令文」であり、テキストをその意味ごとに<>で囲んで作成していきます。このタグをコンピュータが読み取って、人に分かりやすい表示に変えてくれるのです。
例えば、見出しであれば階層の上から <h1>~<h6> を用います。大見出しの場合は、<h1>大見出し</h1> と記述します。
本文であれば、段落を表す <p>本文</p> を用います。
その他、画像は<img>タグを用いて、<img src="画像ファイル名"/> のように記述します。
HTMLが使われる場面
メモ帳のようなテキストエディタを用いて、文章や画像にタグを付けるだけで簡単にWebページを作れることが分かりました。
このようにHTMLは主にWebページ作成に使われていますが、実は他にもHTMLが活用されているものがあります。Webページを含めて、大きく3つの場所でHTMLが利用されているので、順に見ていきましょう。
Webサイト
世界中のWebサイトのほぼすべてがHTMLによって作られています。実際のWebサイトを見てHTMLの記述を確認してみましょう。今ご覧になっているこのサイトでも構いません。
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を使えば、iOSとAndoroidの両方で動くスマホアプリの開発が可能です。
このようなアプリは「ハイブリッドアプリ」と呼ばれ、二重開発を避けることで開発コストの低減につながることが大きなメリットです。ハイブリッドアプリ構築の環境としては、Monaca・アドビ社のApache Cordova・マイクロソフト社のXamarin・FacebookのReact Nativeなどが知られています。
【参考】：Monaca 【参考】：Apache Cordova 【参考】：Xamarin 【参考】：React Native
HTMLでできること
HTMLでできることについて、具体的な作業に即して見ていきましょう。以下では、HTMLでできることの中から、代表的な例を3つ挙げてみました。
見出しを作る
HTMLの重要な機能として、「文章の見出し」を作る機能があります。後ほど具体的な記述例を紹介しますが、見出しの定義には <h1>から<h6> までのタグが使われます。
見出しタグによって、コンピュータはその文章が見出しであると認識するのです。見出しタグがないと、コンピュータは単なるテキスト文であると認識し、見出しとして表示されません。
リンクを作る
HTMLはハイパーテキストを作成できるため、外部サイトや他のページへ移動するためのリンクを設定できるという特徴があります。HTML上では、リンクを貼る部分にタグとして <a> を使います。コンピュータはタグをリンクの命令だと認識します。
表を作る
HTMLの特徴として、表の作成機能があげられます。表を作成する際には <table>や<tr>、<td> などのタグが用いられます。これらのタグによって列や行ができ、表を作成することができるのです。
こういったHTMLのスキルはエンジニア職以外でも日々活用されています。HTMLがきっかけでプログラミングに興味を持った場合は、研修制度が充実している企業を選んでスキルを磨くことをおすすめします。
ぜひ『マイナビIT エージェント』をご活用ください！
HTMLで簡単にできるWebページの作成方法
以上で確認したことを、実習しながらおさらいしてみましょう。WebページはHTMLで構成が定義されており、テキストの羅列がタグによってマークアップされて意味のあるものになっています。
ここでは、Windowsのメモ帳を使ってHTMLを記述し、簡単な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ページであれば、初心者でもいくつかのタグを使うだけで簡単に作成することができます。しかし、より高度なWebページを作るには、さらに知識やスキルを磨いていく必要があります。ここでは、HTMLの学習方法について解説します。
教本などを用いて独学する
HTMLはWeb開発で広く使われる言語であるため、教本や参考書も豊富にあります。できるだけお金をかけずに学びたい、自分の生活に合わせたペースで勉強したい、といった場合はこういった書籍を使って独学するのも1つの方法です。
また、インターネット上にも多くの情報があるため、不明点などがあれば調べやすいのもHTMLのメリットです。自分で情報を集めて学習を進めるのが得意な方には、このような独学がおすすめです。
オンライン講座などで学ぶ
書籍やインターネット上の情報を使って簡単に学習できるとは言っても、中には自分1人で学習を進めるには苦手だ、という方もいるでしょう。そういう場合には、有料のオンライン講座のスクールなどで学習するのがおすすめです。
きちんとしたカリキュラムがあるため、体系的に効率よくスキルを身に付けられるのが講座やスクールのメリットです。また、わからないことが出てきた際も、プロの講師に教えを乞うことができます。
実際に記述して慣れていくことが大事
独学する場合も、オンライン講座などを受ける場合も、実際に手を動かしてHTMLの記述に慣れていく、という作業を怠らないことが大切です。知識ばかり詰め込んでも、実際に記述できなければスキルが身に付いているとは言えません。
色々なWebサイトのソースコードを模写してみたり、オリジナルのWebページを作ってみたりして、実践で理解を深めていきましょう。
HTMLとセットで覚えたいCSSとJavaScriptとは
HTMLは人の顔に例えると、目や鼻などのパーツに該当します。人は口・目・鼻があることで顔として認識します。コンピュータにしてみると、目も鼻も口も単なるパーツにしかすぎませんが、それぞれのパーツに意味を持たせ、配置させることをコンピュータに知らせるのがHTMLの役割です。
しかし、それだけでは味気ない顔になってしまいます。目を大きくしたり、鼻を小さくしたりすることはできますが、それ以上の作り込みはできません。そこで、顔にメイクアップを施して表情を与え、個性豊かに仕上げる役割を果たしてくれるのが、CSSやJavaScriptです。
CSSはメイクアップのようなもの
単に目・鼻・口があるだけの顔にメイクを施すのがCSSの役目です。CSSとは「Cascading Style Sheets」の略語であり、人間の顔で言えば瞳を茶色にしてサイズを大きくし、パッチリ目にするというようなメイクができます。
元々ある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のスキルが必須となります。
ただし、HTML以外のスキルも必要です。画面デザインを担うCSS、Webページ上で動くJavaScript、Webでよく利用されるPHP・Ruby・Pythonなどのプログラミング言語を1つは習得しておきましょう。さらには、ユーザーにとっての利便性に大きく関わるUI/UX・検索エンジンの最適化技術であるSEOなどの知識も求められます。
フロントエンドエンジニアの年収
ここでは、HTMLを用いる職種の年収例として、フロントエンドエンジニアの平均年収を紹介します。
「マイナビエージェント職業別年収ランキング」でのフロントエンドエンジニアの平均年収は385万円（2024年3月執筆時点）、経済産業省2017年発表の「IT関連産業の給与等に関する実態調査結果」から近い職種のコンテンツクリエイタ/デザイナーを参考にすると、平均年収411万円と分かりました。
国税庁2020年発表の「民間給与実態統計調査」における民間企業平均年収は433万円なので、フロントエンドエンジニアは一般平均年収よりも、やや低めであることが分かります。
フロントエンドエンジニアは、20代のうちはキャリアや実績が豊富でないことなどから年収はそれほど高くはありませんが、マイナビエージェントによると30代では平均457万円にまで一気にアップします。
また、多くのITエンジニアが転職を繰り返すことで年収アップを実現させているため、ある程度の経験を積んだら、より良い待遇を求めて転職してみるのも1つの手です。
【参考】：マイナビエージェント職業別年収ランキング ※【平均年収 調査対象者】 2015年〜2016年末までの間にマイナビエージェントにご登録頂いた20代・30代の方 【参考】：IT関連産業における給与水準の実態① ~ 職種別（P7） 【参考】：民間給与実態統計調査-国税庁
HTMLを習得してフロントエンドで活躍しよう
この記事では、HTMLについて深掘りし、簡単なWebページの作成方法やできること、フロントエンドエンジニアの年収などを解説しました。HTMLを活用するエンジニア職に就くには、HTMLの他にも学ばなくてはならないことが多いですが、まずはHTMLの基本を学んだ上で、CSSやJavaScript…と幅を広げていきましょう。
これらのスキルは多くの企業で歓迎されやすいので、資格取得なども視野に入れて習得を目指してください。習得した後は、転職エージェントを活用してスキルを評価してくれる企業への転職も検討してみましょう。
そこでぜひご活用いただきたいのがマイナビIT エージェントです。
マイナビIT エージェントは、IT・Webエンジニア向け、無料の転職⽀援サービスです。
IT・Webエンジニアの転職事情に詳しいキャリアアドバイザーが、あなたのご経験やスキルをお伺いし、転職活動のプランをご提案します。
アドバイザーは企業側と直接連携を取れるので、求人票に載っていない情報も確認することができます。こちらで、働き方などをしっかり確認の上、応募企業を選んでいくのが良いでしょう。
未経験からのキャリアチェンジは心身ともに本当に大変だと思います。少しでもご自身の負担を減らすべく、エージェントサービスを活用して、失敗のない転職活動に臨んでいただければ幸いです。
エンジニア転職のご相談はぜひ
『マイナビIT エージェント』へ！
編集部オススメコンテンツ
アンドエンジニアへの取材依頼、情報提供などはこちらから
