UdemyでHTMLを学習しようと思った時、ホームページを見ると講座が数多くあるので悩むかと思います。この記事では、HTMLとはどういったものかという点に触れながら、Udemyでおすすめのコースについて紹介します。
UdemyでHTMLを学ぶメリットとは
Udemyは、動画で学べる学習プラットフォームです。基礎から順番に学習でき、実際に制作をしながら学べるので着実にスキルが身につきます。また、動画で学べるので、わからなくなったら何度でも復習できることや、効率的に学びたい人におすすめです。HTMLのスキルを身につけて、副業や転職後の現場で使える人材になれるかもしれません。
HTMLとは
HTMLは、ハイパーテキスト・マークアップ・ランゲージ（Hyper Text Markup Language）の略称名で、コンピュータが理解できるマークアップするための言葉です。Web制作において、ホームページ上に表示したい文章や写真などの情報は、HTMLで「指示」をしないといけません。
マークアップとは
文章校正や視覚表現の情報をコンピュータが正しく認識できるように意味付けをすることです。テキストの装飾を「タグ」を使って識別させ、コンピュータに認識させます。
Hyper Text Link（ハイパーテキストリンク）とは
文章がリンクされ文章を超えた先で、情報や文章が関連付けられ無数に広がっていくことをさします。インターネットが誕生する前のコンピュータは、学者が論文・文章の共有をするために使用されていました。そこから、共有された文章がリンクされることで、蜘蛛の巣のように無数に広がっていくようになりました。
HTMLは、ハイパーテキストリンクを実現させるために登場した言葉として誕生し、WWW（ワールドワイドウェブ）とともに成長を遂げました。
HTMLファイルの作り方
HTMLファイルは、「.html」という拡張子をつけてファイルを作ることで「HTMLファイル」をコンピュータが認識してくれます。その他HTMLタグを用いてHTMLファイルを制作していくことになります。タグはは、リンク・画像・段落分けなどの指定ができます。
HTMLタグの種類(一部例)
| <a href=”リンク先へのパス”>リンクを貼るテキストや画像</a> | リンクを表示する |
| <img src=”画像ファイルへのパス”> | 画像を表示する |
| <p>段落の内容</p> | 段落分けを行う |
| <h1>～<h6> | 見出しを作成<h1>が一番大きく表示され、<h2>→<h6>となるほどに小さな見出しになります。 |
| <ul>・<li> | 順番のないリストを作成<ul>がリスト全体を、<li>が各項目を作成します。 |
| <form> | 入力フォームを作成 |
HTMLを用いたページ制作の例
例えば以下のようなタグを用いて、ページを制作してみます。
| ニュース可愛い白い猫が、3匹の子猫を出産しました。 |
日本語での文章校正指示
| ＜ここから見出し＞ニュース＜ここまで見出し＞＜ここから本文＞可愛い白い猫が、3匹の子猫を出産しました。＜ここまで本文＞ |
＜HTMLタグを使ってマークアップ＞
<h1>ニュース</h1>
<p>可愛い白い猫が、3匹の子猫を出産しました。</p>
という形でページを整えることができます。
HTMLでしっかり作られたページのSEO効果
HTMLでしっかり作られたホームページのSEO効果は、どのようにあるのでしょうか。以前までは、細かいHTMLタグの調整を行うことで、順位に変動が起きることがあり、HTMLタグの修正などに注目が集まったことがあります。その時代では、「検索エンジンが認識しやすくするためHTMLを調整」「内部リンクを調整」することで順位が伸びました。
現在は、「検索したユーザーに満足してもらうコンテンツの検討・作成」「ナビゲーションの改善」などが求められます。検索したユーザーに役立つ情報を検索エンジンは評価するので、正しくHTMLを使われたページになっているかどうか、という点は大きく影響はでないと考えられます。
ただし、以下の観点から正しいHTMLで書くことは必要であると言えます。
- 視覚障碍者が利用する時、「音声読み上げブラウザ」にアクセスする
- 検索エンジンロボットがインデックスのためにWebページの内容を収集・保存していく（クロール）
- 広告配信システム・レコメンドシステムのロボットが関連性・コンテンツの特徴を抽出のための分析
- 通常とは表示が異なるブラウザ（テキストブラウザなど）で閲覧・印刷する
ユーザーがどのような形でコンテンツを利用するのか、といった点にも注目してHTMLを正しく書くことが望ましいと言えます。また、上記の通り、インデックスに関するHTML要素（title/meta description/a（リンク）/JSON-LDや構造化マークアップ）やコンテンツの情報構造に関連するHTML要素（見出し（h1、h2、h3など）/箇条書き（ul、ol））などに関してはSEOのために配慮すべきと考えられます。Googleなどの検索エンジンが、文章の意図などを理解しやすくするためです。検索エンジンが正しく解釈できる可能性を高めるためにも適切にHTMLタグを使用しましょう。
SEOとは
検索エンジン最適化（Search Engine Optimization）からの略称名です。GoogleやYahoo!などの検索エンジンでキーワード検索された時に自分のサイトが上位に表示されるようにすることを意味します。優良な被リンクを集めたり、ユーザーに価値あるコンテンツを提供して、適正に検索エンジンにページ内容を理解・評価されるよう技術的にページを最適化する工夫が必要になります。
Udemyで学ぶおすすめHTML講座：初級編 – 3選
- HTML5+CSS3 手を動かしてマスターする WEBデザイン／プログラミング動画講座
- 【最新2021】HTML5、CSS3をマスターして、未経験からWEBデザイン・エンジニアを目指す 実践マスターコース
- HTML5＆CSS3＋JavaScript 講座【初級レベル】コーディングに自信のない方や独学者の復習に最適です。
HTML5+CSS3 手を動かしてマスターする WEBデザイン／プログラミング動画講座
講義内容：Webサイトの基本、html5・CSS3に準処したWebページ制作 など
講師：村守 康
最新のHTML5とCSS3のWebページをソースコードを用いて制作できるようになります。実際にページを制作して制作するので、コーディングスキルが身に付きます。初心者でもマスターしたい人におすすめです。
【最新2022】HTML、CSSをマスターして、未経験からWEBデザイン・エンジニアを目指す 実践マスターコース
講義内容：HTML、CSSの最新技術の理論解説、制作演習 など
講師：村守 康
HTML、CSSを基礎から確実に学習したい人やWebサイト開発を正しく学びたい人におすすめです。基礎から完全にマスターすることが目的で作られたので、Webサイトの制作を初めて取り組む人でも、実践的にコーディングできるので、即戦力な人材になるスキルが身に付きます。
HTML5＆CSS3＋JavaScript 講座【初級レベル】コーディングに自信のない方や独学者の復習に最適です。
講義内容：HTML5、CSS3、JavaScriptの学習 など
講師：K.Nakamura (storeG)、storeG -web.com
HTMLやCSSを使ってWeb制作はできるが基礎知識があいまいで自信がない方や挫折した方におすすめです。必要なポイントが凝縮されており、短時間で無駄がなく学習できる内容になっています。学習教材でレシピページのサンプルを制作するので、コードを全て理解できます。
Udemyで学ぶおすすめHTML講座：中～上級編 – 4選
- 実践Webサイトコーディング講座 ｜ HTML5とCSS3を使って、カフェのサイトやWebメディアサイトを作ってみよう
- Bootstrap3＋Dreamweaver(CC2018)＋HTML5＋CSS3 レスポンシブWEBデザイン実践コース
- 未経験からプロのWebデザイナーになる！ 400レッスン以上の完全マスターコース
- WEBデザイン講座 Level2《ステップアップ》コース※FlexboxとメディアクエリでレスポンシブWEBサイトを作る
実践Webサイトコーディング講座 ｜ HTML5とCSS3を使って、カフェのサイトやWebメディアサイトを作ってみよう
講義内容：HTMLとCSSの基礎がわかってる人が実践的なWebサイトコーディングを身につける など
講師：NEST online
基礎的なHTML、CSSの知識があるけど、実際のWebサイト制作に自信がない人におおすすめのコースです。実践的なコーディングスキルをこの講座で身につけられます。実際の3つのWebサイト初級～上級までの段階を踏んで制作できるのでスキルアップできます。
Bootstrap3＋Dreamweaver(CC2018)＋HTML5＋CSS3 レスポンシブWEBデザイン実践コース
講義内容：Webデザインに入社してすぐにアシスタントができる技術を身につける、Webページデザイナーとして独立する基礎 など
講師：村守 康
DreamWeaver、bootstrap3、html、CSSを学びたい人やWebデザイナーを目指している人におすすめのコースです。DreamWeaver、bootstrap3、html、CSSを駆使してWebデザインページを制作する講座になっています。手を動かして作品を作っていくので、スキルアップに繋がります。
未経験からプロのWebデザイナーになる！ 400レッスン以上の完全マスターコース
講義内容：Webサイト制作の流れ、Photoshopでのバナー・フライヤー など
講師：NEST online
自分1人でWebサイトを作り上げられるスキルを身につけたい方やプロのWebデザイナーを目指している方におすすめです。未経験者からプロのWebデザイナーになりたい人、働けることがゴールのコースになっています。
WEBデザイン講座 Level2《ステップアップ》コース※FlexboxとメディアクエリでレスポンシブWEBサイトを作る
講義内容：ポートフォリオを完成、無料のメールフォームをHTML埋め込みで実装 など
講師：K.Nakamura (storeG)、storeG -web.com
HTML・CSSを学習した人や自分の力でWebサイトを制作・公開したい人におすすめコースです。初級レベルから次のレベルへステップアップしたい方は、このコースで「レスポンシブ対応のWebサイト制作」ができます。初級を脱した人にとって役立つ講座です。
まとめ：UdemyでHTMLを学ぼう！
HTMLを学ぶことで、幅広い仕事に就くことができるようになります。スキルアップもできるUdemyでHTMLを実践的に学ぶことで、着実に仕事に繋がる人材に慣れます。
そして、HTMLを学んだらCSSとJavaScriptを学習することがおすすめです！Udemyで学習して、スキルアップしましょう。