WEBデザイナーになるにはHTMLの知識は必須なんですよね？ HTMLってなんですか？ あと、HTML5との違いはなんですか？
HTMLは「Hypertext Markup Language」の略です。マークアップ言語ですね。
つまり、文章や画像をコンピュータにわかるように説明し、WEB上で見られるようにするためのものです。
この記事では、HTMLについて現役WEBクリエイターが詳しく解説します。
当サイトで人気のプログラミングスクール
- TechAcademy
（オンラインで好きな時間に学べる）
- DMM WEBキャンプ
（3ヵ月でRubyエンジニアに）
- CodeCamp
（オンラインなのにマンツーマン指導。300社以上の大手IT企業が社員研修に導入する質実ともに評判が高い）
HTMLとは
セクション、段落、見出し、リンク、引用など、タグをつけてコンピュータに「これはセクションですよ」「これは段落ですよ」とわかるようにマークアップするのがHTMLです。
HTMLはプログラミング言語ではないため、動的な機能を作成することはできません。その代わり、Microsoft Wordのように文書を整理して見やすくフォーマットすることが可能になります。
HTMLを扱うときは、単純なコード構造（タグと属性）を使ってWEBサイトのページをマークアップします。
たとえば、<p>タグは段落で使用するタグです。タイトル以外の文章部分に使うタグですね。
開始タグ<p>から始め、最後に終了タグ</p>で閉じて使います。こんな感じです。
<p>タグは覚えてしまえばすごく簡単。</p> <p>犬も歩けば棒に当たる</p>
箇条書きの場合はこんな感じ。
<ul> <li>来月までにパンツを買う</li> <li>ベトナム旅行の計画を立てる</li> <li>美味しいお店をピックアップする</li> </ul>
タグにはすべて意味があって、コンピュータには正確に教えてあげるつもりでマークアップします。
上の<ul><li>を使用した箇条書きのタグは、コンピュータに「あ、これは箇条書きの項目を示す文章なんだな」と教えることができます。メニューを作るときもこのタグを使うので、「あ、これはメニューを示す内容なんだな。重要だな、これ」とコンピュータが認識してくれるのです。
なので、入門者さんがやりがちなのが
<p> ・来月までにパンツを買う ・ベトナム旅行の計画を立てる ・美味しいお店をピックアップする </p>
こんな感じに、段落のpタグで囲って、ただの黒丸で箇条書きを表現しちゃうこと。
結果的には似たような表示になるんですが、コンピュータは「箇条書き」ではなく「段落」と認識しているので、「あ、これ項目になってるからユーザーにわかりやすく作ってるね！ いいじゃん！」とはならないのです。
なので、WEBページの構成内容によって、きちんと意図を持ってマークアップすることが重要です。
HTMLタグの仕様はWorld Wide Web Consortium(W3C)によって保守・管理されています。
詳しい最新タグはW3Cのサイトで確認できます。
HTMLのしくみ
HTML文書は拡張子が「.html」または「.htm」のファイルです。これらのhtml文書はWEBブラウザ（Google Chrome、IE、Safari、Mozilla Firefoxなど）で表示できます。
ブラウザはHTMLファイルを読み込み、インターネットを通じてユーザーが閲覧できるように、コンテンツをレンダリングします。
通常、一般的なWEBサイトには複数のHTMLファイルが使われています。たとえば
- トップページ（index.html）
- 商品紹介（products.html）
- 会社概要（aboutus.html）
- お問い合わせ（contact.html）
こんな感じですね。ページごとに、それぞれ別々のhtml文書が存在します。
各HTMLページは、一連のタグ（要素）で構成されていて、これをWEBページの構成要素と呼びます。コンテンツをセクション、段落、見出し、その他のコンテンツブロックに構造化する階層を作成します。
ほぼすべてのHTMLタグには開始タグ<tag>と終了タグ</tag>があります。
HTMLタグでマークアップした例をご紹介します。
<div> <h1>ももたろうの冒険</h1> <h2>実はひとりじゃ寂しいから…</h2> <p>鬼退治に行こうと思ったけど、ちょっと一人じゃ不安なので助っ人を募集します。</p> <img src="images/ad.jpg" alt="鬼退治広告"></img> <p>我こそは！ と思う者はお問合せください。ボランティアですが、名声と経験が手に入ります。</p> <h3>仕事内容</h3> <ol> <li>ももたろうの付き人</li> <li>鬼が来たら連絡</li> <li>ももたろうが鬼に襲われたら全力で助ける</li> <li>鬼が島までの旅費は実費</li> </ol> <p>詳しく知りたい方は、<a href="mailto:jimukyoku@momotarou.com">事務局</a>までお問い合わせください。</p> </div>
<h1>、<h2>、<h3>…は見出しに使います。
h1が見出し１、h2が見出し2、という風に使います。h1は見出し１で大見出し、つまりそのページの一番重要な概要を示すタイトルになるので、h2以下のタグがh1より先に来ることはありません。
タグの順番を無視してマークアップすると、Googleに評価されず、SEOの評価が下がります。
<div></div>は、大きなコンテンツセクションに使います。
<a></a>はリンクを貼るときに使います。
imageタグの srcは画像パス、altには画像の説明を入れます。
<ol></ol>は、黒丸の箇条書きではなく、自動でナンバリングされます。
こんな感じで表示されます。
- ももたろうの付き人
- 鬼が来たら連絡
- ももたろうが鬼に襲われたら全力で助ける
- 鬼が島までの旅費は実費
ブロックタグとインラインタグ
タグには「block-level tag（ブロックタグ)」と「inline-level tag（インラインタグ）」があります。
ブロックタグ
- <html></html> HTMLページを示すタグで、一番最初と一番最後に入れます。
- <head></head> メタタグやページタイトル、キーワードやディスクリプション、外部CSSやJSファイルの読み込みなどを入れるタグです。
- <body></body> 実際に表示したときにWEB上に見える部分。この中にレイアウト用のタグでマークアップした文章等を入れていきます。
<html> <head> <!-- META 情報等を入れる --> </head> <body> <!-- ページのコンテンツ内容を入れる --> </body> </html>
インラインタグ
インラインタグは、テキストフォーマットに使われます。たとえば<strong></sgrong>は重要な意味を示し太字にしたり、<em></em>も強調タグで斜体にしたり、といった感じです。
文章中に一部文字色を変えたいときは、<span></span>タグを使い、CSSで指定します。
HTMLとHTML5の違いってなに？
HTMLが登場していらい、HTMLは驚くべき進化を遂げてきました。
私が最初にWEBサイトを作り始めたころ、今のようなCSSで各セクションをレイアウトするやり方ではなく、なんとPhotoshopからレイヤーで切り出したものをそのままHTMLに変換して、<table>タグ、つまり「テーブルレイアウト」と呼ばれる作り方が主流でした。静的サイトと呼ばれるもので、まだWordpressのような動的なサイトは出てきていませんでしたし、PHPも世の中にありませんでした。
ちょっとコラム
今から約25年くらい前の話ですが、当時はまだWEBサイトを持っている企業さえ珍しく、インターネットの可能性に真っ先に目を付けたのが、コピーライターの糸井重里さんでした。
糸井重里さんの「ほぼ日刊糸井新聞」は、インターネット黎明期に真っ先に情報発信をするサイトとして出てきて（テーブルレイアウトのアナログな作りだった）、様々な面白い試みをしていました。
今の作り方とは全く違います。10年後、20年後もまた、どう進化していくのか楽しみです。
HTML5以前、つまりHTML4までは通称「HTML」と呼ばれ、HTML5とそれ以前、と分けて語られています。それだけHTML5の進化は大きなものでした。
HTML5で追加された機能は、オーディオとビデオの埋め込みのネイティブサポートです。Flashプレイヤーを使用する代わりに、
- <audio></audio>
- <video></video>
を利用して、ビデオとオーディオファイルをWEBページに直接埋め込むことができるようになりました。
また、スケーラブルベクターグラフィックス(SVG)や数学・科学的な数式用のMathMLの組み込みサポートも追加されました。
最も一般的なセマンティックタグは
- <article></article>
- <section></section>
- <header></header>
- <footer></footer>
です。HTML5以前は<div>要素にidやclassで指定しなくてはいけなかったので、かなりスッキリした感じになりました。
HTMLとHTML5の違いに関しては、詳しく解説するとこの記事では書ききれないので、別記事で改めて説明します。
HTMLはCSSとJavaScriptとセットで完結する
HTMLはWEBサイト制作には欠かせない言語ですが、これだけではレスポンシブサイトにはなりませんし、完結できません。
HTMLでマークアップした各要素のタグに、CSS（Cascading Style Sheets)でレイアウトやデザインを、JavaScriptで動的でユーザーインタラクティブな要素を付け加えて、初めて洗練されたWEBサイトになります。
HTMLを勉強するには？
HTMLは独学でも十分に勉強できます。ただ、WEBデザイナーを職業としてやっていきたいなら、スクールで体系的に学んだ方が、色々とメリットがあります。
スクールで学ぶメリットは、ただコーディングを覚えるだけでなく、デザインの理論やSEO、マーケティング、UI/UXなど、実務レベルのスキルを身につけられることと、転職フォローがあるので転職しやすいことです。
独学でも転職を成功させている人はいるんですが、コード管理のためのGitやチーム開発のためのGitHubまできちんと独学でやっている人は少ないですし、独学の場合、マイペースでのんびりとやる人が多いので、実際に仕事となると「この人、遅くて全然使えない…」ということになりがち。趣味でやる分にはいいんですけど。
というわけで、もしHTML、CSS、JavaScriptを学んでWEBデザイナーになりたい！という人におすすめのスクールをご紹介しておきます。
TechAcademy
テックアカデミーはオンライン完結型のプログラミングスクールです。コースは30種類以上あり、「やりたい言語が見つからない」ということはないほど充実しています。
週2回のWebカメラによるメンターとのマンツーマン指導や、すぐに回答がつくオンラインチャットサービスなど、最後まで挫折せずに完走できるシステムが人気で、そのシステムが高く評価され、e-Learning大賞も受賞しています。
HTMLはWeb系言語を選択すれば必ず必要なマークアップ言語なので、RubyやPHPなどのコースを選べば必然的にカリキュラムに含まれます。
ですが、HTMLとCSSだけでいい、というならおすすめは「はじめてのプログラミングコース」です。このコースは初心者の人で「まずはプログラミングがどういうものか知りたい」というニーズに応えたものです。
RubyやPHPのコースよりも料金が安く、1ヵ月なら99,000円、学生なら88,000円で受講できます。
| スクール名 | TechAcademy |
| 学習スタイル | オンライン |
| 習得スキル | Webアプリケーション（Ruby/Rails） PHP/Laravel Java フロントエンド Wordpress iPhoneアプリ Androidアプリ Unity ブロックチェーン スマートコントラクト Python AI データサイエンス Scara Node.js Google Apps Script Scratch Webデザイン UI/UXデザイン 動画編集 Webマーケティング Webディレクション その他多数。全コース受け放題の「ウケ放題コース」あり |
| 学習期間 | 1ヵ月～6ヵ月(選択制) |
| 料金 | 139,000円〜398,000円 ※コース、受講期間による |
| 公式サイト | 【公式】https://techacademy.jp/ |
ご参考にしてくださいね。