【初心者向け】HTMLとは?たった6つのステップで身につくプログラミング学習 | WEBCAMP NAVI
【8月枠も残りわずか】転職保証コース

【初心者向け】HTMLとは?たった6つのステップで身につくプログラミング学習

皆さんは ”HTML” についてどのくらいご存知でしょうか?
プログラミング学習やWebの開発をしていると、よく聞く単語のひとつです。

しかし、プログラミング初心者やこれから学習しようとしている人は、”HTML” について知らないことも多いはず。

「そもそも”HTML”ってなに?」
「”HTML”は何に活かせるの?習得するメリットは?」

このように疑問に思っていませんか?

今回の「WEBCAMP NAVI」では、初心者に向けて、HTMLの基本的な知識や役割、学習方法を丁寧にわかりやすく解説します。

HTMLについて知ることは、Web開発やHP作成をする上でとても重要です。
この記事は、HTMLについてあなたの理解を深めるきっかけになるはず。
ぜひ参考にしてみてください。

HTMLとは?できることや使用例の紹介

そもそもHTMLって何?

HTMLはWebページを構成するマークアップ言語です。
このHTMLというマークアップ言語でWebサイトはできています。

しかし、Webページが「言語」で書かれているといっても、直感的にはわかりずらいですよね。
そこで、このページで検証してみましょう。

この画面上で右クリックをし、「ページのソースを表示」を押してみましょう。
すると、以下のように英語がずらっと並んだ画面が表示されるかと思います。

ページのソースを表示した図

並んでいる英語の文字は、ソースコードと呼びWebページ内の表示や動作を命令することができます。
このように、Webページの正体はHTMLタグを使って構成されている文書であり、これがブラウザで読み込まれることで、Webページが表示されるのです。

また、「HTML」は略称で、正式には「Hyper Text Markup Language」と言います。

勘違いされている方も多いですが、C言語やJavaといったプログラミング言語とは異なります
HTMLはWebページを作る上で基本となるマークアップ言語の1つです。

HTMLの役割

HTMLはWebサイトを構成していると言いましたが具体的には、Webページの構成(見出しや段落)画像の挿入他サイトへ移動できるリンクを作成することができます。
他にもメールに飾り付けや広告等を乗せる事もできます。

また、HTML単体で作成するのは静的なWebサイトです。

この「静的なWebサイト」というのは、いつどこでアクセスしても毎回同じものが表示されるサイトのことです。
逆に「動的なサイト」は、アクセスしたときの状況に応じて異なる内容が表示されるサイトのことを言います。

つまり、JavascriptやPHP等のプログラミング言語と組み合わせ使用する事で、動的なWebサイトやコンテンツを作る事ができるのです。

HTMLは何に使われている?

繰り返しになりますが、HTMLはサイトの基本構造としてWebサイトで使われています。

先ほどの「ページのソースを表示」を、他の画面でも開いてみてください。
左上の方に小文字でhtmlと書かれていれば、そのページかHTMLを使って書かれていることがわかります。

またはYahooや楽天等から送られてくるメールにもHTMLが使用されていたり、最近はスマホアプリでもWeb側のページを表示する物はHTMLを使っています。

プログラマーやシステムエンジニアを目指している方にとっては、ローカルのみで使用される業務システム以外ではほぼ必要になる技術と言っても過言ではない程使われる箇所が多いのがHTMLです。

HTMLを学習するメリットとは

HTMLはどのような役割をするのかわかっていただいたところで、HTMLを学習するメリットをご紹介していきます。

これでさらに、Webサイト作成においてのHTMLの重要性の理解が進むかと思います。
それではみていきましょう。

HTMLを習得するとできることの幅が広がる

HTMLを身に付ける事で、有料ソフトのDreamweaver、ホームページビルダーを購入しなくてもホームページを作成する事が出来るようになります。

他にもWebサイトをソース表示し他のWebサイトから技術を学ぶ事ができるのも大きなメリットになります。

またネット上には無料で使用する事が出来るテンプレートがあり、そのままでも使用する事が出来るのですが、HTMLの技術を身につけておく事で、自分好みに修正する事も可能になります。

何よりも習得難易度それほど高くないのに対し、使用できる幅が非常に多いです。

HTMLの学習難易度

IT関連の技術の中ではHTMLは学習難易度は低く、習得が簡単な部類に入ります

HTMLの基礎的な書き方と良くしようされるタグだけであれば、早い方であれば1日から3日程で習得できる方もいらっしゃいます。
遅い方でも1ヶ月あれば十分習得する事ができます。

また環境により勉強の難易度に違いが出るので、メモ帳だけでなく環境を作る事で学習が捗ります。

HTMLは基本を習得するのは簡単ですが、多くのタグがあり、それぞれの使い方や構成について学び、経験を積む事が大事です。

HTMLが生かせる職種とは?

1人でできる仕事

HTMLだけの求人はWebデザイナーと、Webデザイナーが作成したデザインをネット上で見られる様にHTMLで記述するHTMLコーダーの2つが基本になります。

HTMLだけでなくCSSやPHP等を学習する事で、プログラマーやシステムエンジニア等に就職する事が可能になります。

HTMLの求人数

求人サイトにもよりますが、HTMLコーダー、Webデザイナーの求人数は3000件~10000万件以上あります。
他のプログラミング言語等IT関連のスキルを必要とする求人件数に比べて、圧倒的に多い求人件数になります。

しかし上でも記述しましたが、HTMLは習得しやすい技術の為、即戦力になれる方が多く、採用する側は今までの経験等を重視する傾向にあります。

以上の事から求人数が多くても、必ずしも簡単に就職できるとは限りません。
就職を有利にしたり、収入を多くするのであれば、HTMLだけでなくCSS、PHP等を習得する事をおすすめします。

HTMLの求人例

Webデザイナー、HTMLコーダーが中心ですが、その作成するWebサイト種類は非常に多いです。

例としてはコミュニケーションサイト、求人サイト、小さな企業のホームページ、株価の予想サイト等々幅広くあります。

その点においてHTMLコーダーの特徴としては、作成するWebサイトの内容が変わっても、必要となる技術に違いがあまり見られません。
実際求人情報を見ても、就職した先で様々な業種のサイトを作る内容の求人情報がほとんどです。

HTMLコーダー・Webデザイナーの年収

HTMLコーダー・Webデザイナーの平均年収は300万円~400万円です。
また時給換算の場合であれば、800円~1200円ぐらいが相場になります。

Java、PHPなどのプログラミング言語を使用した就職先に比べて収入は低くなってしまうケースの方が多いです。

プログラミング言語の知識だけあってもHTMLの基礎がわかっていなければ、Web系のプログラマーとして就職する事は出来ません。
HTMLを習得した後HTMLコーダーとしてまず就職して収入を得つつ、他の技術についても学習して行くことがおすすめします。

HTML学習の6つのステップ

これまでHTMLの役割や学習するメリット、具体的にHTMLのスキルで付ける職種までみてきました。
HTMLを学習し、それを生かして活用する流れのイメージがついてきたではないでしょうか?

そこで、この章ではHTML学習の6つのステップごとに解説していきます。
勉強に必要なものの把握や、勉強の計画立てに役立てることができる内容になっているはずです。

それでは詳しくみていきましょう。

ステップ① エディタを準備する

HTMLはプログラミング言語と違い、テキストエディタブラウザさえあれば、学習する事ができます。

Windows等で標準で準備されている「メモ帳」でも可能ですが、別のテキストエディタを準備する事でより快適にHTMLの学習を行う事ができます。
その為HTMLを学習するのに重要になるのが、エディタ選びになります。

特に使用するエディタが決まっていない場合は、以下におすすめのエディタを紹介するので、インストールしてお気に入りのエディタを準備することをおすすめします。

TeraPad

シンプルなテキストエディタですが、プラグイン等を追加する事ができ、HTMLを学習するのに最適なエディタです。
フリーのエディタでインストールする事で使用する事ができます。

参考URL:http://forest.watch.impress.co.jp/library/software/terapad/

Liveweave

Liveweaveはブラウザでアクセスする事で使用する事ができます。
HTMLだけでなくCSS、JavaScriptの動作にも対応しており、編集したHTMLをすぐに結果を確認する事ができる画面構成になっています。

参考URL:http://liveweave.com/

さらに比較検討したい方は、こちらの記事をご覧ください。

【初心者向け】HTMLエディター9選をMac・Windows別に紹介!

ステップ② 学習方法を選択する

HTMLの学習方法には大きく分けて書籍を使用した学習学習サイトを使用した学習勉強会に参加して学習プログラミングスクールに通って学習の4つがあります。
それぞれの学習方法の詳細はこの記事の後半で紹介します。

独学で学習を行うのであれば、書籍を購入して学習するか学習サイトを利用して学習するかになります。

ステップ③ HTMLの書き方を学習する

HTMLの書き方、動作確認をステップ②で選択した学習方法で基本を学びます。

HTMLの書き方はそれ程難しいものではなく、タグで囲む基本的なルール等を身につければこのステップは問題ありません。

ステップ④ 使用頻度の高いタグ、属性を暗記する

HTMLの書き方を身に付けるタイミングで、いくつかタグや属性を使用しましたよね?
HTMLの基本は書き方とタグ、属性が全てと言っても過言ではありません。

タグ、属性にはかなりの数があり全てを暗記する必要はありませんが、使用頻度が高い物は暗記しておく事で、タグの内容を毎回確認する必要がなくなります。

【HTML タグ】タグの使い方を徹底解説 | コピペで動く実行例付き

ステップ⑤ 練習問題にチャレンジする

インターネット上にHTMLの練習問題を行えるサイトがあるので、そこで練習問題に挑戦してみてください。

練習問題のサイトを利用してステップ②~④までで学んだHTMLの基礎を復習と実践に近い形で力試しを行います。
練習問題が全然解けない様であれば、再度ステップ②~④を行います。

以下の記事を参考に練習問題に取り組みましょう。

黒いキーボード 【初心者向け】HTMLの練習ができる学習サイト8選!

ステップ⑥ 実際に自分のホームページを作成をする

HTMLの学習の仕上げに実際に自分でホームページを作成します。

HTMLの基礎ができていれば、静的なホームページ作成に必要なスキルはほとんど身についています。

後は独学であれば、ホームページ作成用の書籍を購入するか、ホームページ作成用の際サイトを利用する事で必要なHTML以外の知識も身につけることができます。
新たな知識を増やすことで、動的なホームページ作成ができるようになります。

参考 1時間で作るホームページWEBデザインの素

以下の記事では、HTMLのホームページ制作について、初心者向けに詳しく解説しています。
今回の記事と併せて読むと効果的です。

女性とパソコン HTMLでのホームページの作り方を解説【初心者向け】

HTMLのおすすめの学習方法

学習ステップでも少し触れましたが、HTMLの4つの学習方法についてご紹介していきます。

それぞれの勉強方法に、メリット・デメリットを書いていますので、学習方法選びの判断材料にしてみてください。

学習サイト

学習サイトのメリットは、無料で学習し始めることが出来るものが多い点です。
学習方法もスライド式ものや動画形式のものなど、様々な方法から選ぶことができます
また、隙間時間での勉強も可能なので、時間も有効に使えます。

デメリットとしては独学になる為、学習に詰まってしまうと挫折してしまう点があげられます。
また解決に時間を要してしまい、習得に時間がかかる場合もあります。

メリット・デメリットを踏まえた上で、サイト学習を検討してみてください。

下記におすすめの学習サイトをご紹介します。

paizaラーニング

https://paiza.jp/works/html/primer

paizaラーニングは様々なプログラミング言語を始めとしたIT関連の学習動画がほとんど無料で視聴できる学習サイトになっています。
HTMLの入門にも使用でき、練習問題についても同サイトで対応している為、入門から習得まで行えるサイトになります。

文書を読むより、講座を受けて学習したい方、手を動かして学習を行いたい方におすすめです。

ホームページマスター

http://hmaster.net/htmllist.html

ホームページマスターはタグの一覧が自分のやりたい事から逆引きできるサイトになっています。

ホームページマスターは学習用のサイトというよりも、実際にHTMLを書き始めてからよく使用するサイトになります。
HTMLは比較的習得しやすい技術の為、HTMLコーディングを始めてから自分のやりたいタグを見つけるのに時間がかかる方におすすめです。

また書き方の基本が習得できている方にも一度それぞれのタグの使い方を学習するのにおすすめです。

プログラミング 独学 サイト 【徹底比較】プログラミングを独学する!おすすめ学習サイト10選をご紹介

書籍で学習する

書籍を使用した学習方法のメリットは、比較的少ないコストで順序だてた学習が行える点本さえあれば学習を進める事が出来る点です。

デメリットは、購入した本が自分に合わない場合、あまり効率の良い学習ができず、挫折してしまう可能性がある点です。

以下におすすめの書籍をご紹介します。

スラスラわかるHTML&CSSのきほん

スラスラわかるHTML&CSSのきほんはHTMLとCSSの入門書の中でも初心者向けの本になっています。
書籍を学習し終わる間にHTMLとCSSを学習しながら、簡易なホームページを作成する事ができます。

amazonでは2138円で購入可能で、kindle版は1836円で購入できます。
これからプログラミング、HTMLを学習しようとしている初心者の方の1冊目に購入するのにおすすめです。
実際にホームページも作成する事ができる為、まずは手を動かしてホームページを作ってみたい方にもおすすめの一冊です。

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)は最新のHTML5に対応しており、HTML、CSS初心者から基本を習得した方がデザインを学習する事ができる書籍になっています。

amazonでは2808円で購入可能で、kindle版は対応していません。HTML、CSSをこれから学習使用としている未経験者にもおすすめですが、もっともおすすめなのは基本を学習した後にHTMLとCSSのデザインの基本を学習したいと思っている方におすすめです。

詳しくはこちらの記事も参考にしてください。

【初心者向け】HTMLの学習におすすめの本12選!

勉強会に参加する

IT関係には勉強会というものが開催されています。

メリットは周りに人がいる点です。
独学で挫折しそうな方、家では学習に集中できない方、人脈を広げたい方等におすすめです。
各地域で勉強会が開催されており、参加費も無料~1000円程度で参加できる所がほとんどです。

デメリットとしては、コミュニケーション能力が必要なため、コミュニケーションが苦手な方には向かない点です。

以下の記事ではオススメの勉強会をご紹介しています。

【初心者向け】おすすめのプログラミング勉強会・セミナー5選!

プログラミングスクールに通う

プログラミングを独学で学習するのは簡単ではありません。
習得が簡単だと言われるHTMLでも、初心者の方が挫折する可能性はもちろんあります。

プログラミングスクールに通うメリットは、独学は習得しにくい内容であっても、シラバスに沿った学習で効率的に進められる理解できる速度が上がる点があります。
また、スクールにはプログラミングに詳しいメンターがおり、気軽に質問ができる点もメリットの一つです。
プログラミングスクールの中には就職先を紹介してくれるスクールもあり、転職を考える方は非常に有利になります。

デメリットとしては、費用がかかる点です。
価格には幅がありますが、おおよそ50~70万円ほどを見積もっておくとよいでしょう。

他の学習方法に比べお金はかかりますが、学習効率の良さや整えられた環境を考えると他には代え難いものがあります。
独学で挫折することが怖い、失敗したくない方にオススメです。

プログラミングスクール おすすめ 【2020年版】おすすめプログラミングスクール厳選9校を徹底比較

中でも、DMM WEBCAMPでは、無制限で質問のできるメンターがいます。
最短3ヶ月でエンジニアへの転職もできるため、効率の良い学習が可能です。
エンジニア転職のプロであるキャリアアドバイザーが、終始一貫してあなたの転職をサポート。
万が一、転職ができなかった場合は、受講料全額返金保証もあります。

まとめ

いかがだったでしょうか?
今回の「WEBCAMP NAVI」では、HTMLについての基礎知識や役割、学習方法までご紹介してきました

記事のポイントを以下にまとめてみました。

  • HTMLはその他言語と組み合わせることで動的サイトを作成できる
  • 習得の難易度は低いものの、できることが幅広い
  • WebデザイナーやHTMLコーダーとしての道がある
  • HTML習得は自分にあった学習方法で6つのステップを踏んでいく

HTMLは比較的習得が簡単と言われていますが、Webプログラマーを目指している方にとっては全ての基本であり、必須の技術です。

またHTMLだけでもHTMLコーダーとして収入を得る事ができる技術の為、習得の優先度が非常に高いので是非習得して頂ければと思います。

自宅にいながら、プロのキャリアアドバイザーに無料オンライン相談!

DMM WEBCAMPは転職成功率は98%※1の全コースオンライン対応の転職保証型のプログラミングスクールです。短期間で確実にスキルを身につけて、ひとりひとりに寄り添った転職サポートで、未経験からのエンジニア転職を叶えます!

外出自粛期間中でも、自宅にいながらオンライン学習でスキルを高めることができます。

キャリアに迷ったら、まずはビデオ通話で無料キャリア相談を受けてみませんか?

自宅で過ごす時間が増えた今こそキャリアアップを目指しましょう!この機会を活用し、ぜひDMM  WEBCAMPの無料カウンセリングをご利用ください。

オンラインで実施中/
【無料】キャリア相談の日程を見る

※ 1 2020年4月時点

 

 

HTML系の人気・おすすめ記事一覧

初心者必読記事 おすすめ学習ツール記事 技術系まとめ記事
HTML 初心者・入門者 学習方法 HTMLを練習するおすすめサイト HTMLおすすめエディター
HTML5とは? HTML初心者おすすめ学習本 HTMLでの文章作成方法
HTML初心者が覚えるべき用語 HTML初心者の勉強会・セミナー HTMLでの文字化け対策
XHTMLとHTMLの違いとは? HTMLのおすすめソフト・ツール おすすめHTMLテンプレート