目次
比較
特集
【2020年9月限定】TECH::CAMP(テックキャンプ)Amazonギフト券を5万円分プレゼント

HTMLとは?WEBクリエイター歴15年以上のプロが徹底解説!

この記事は約10分で読めます。
htmlとは
ツグミ
ツグミ

WEBデザイナーになるにはHTMLの知識は必須なんですよね? HTMLってなんですか? あと、HTML5との違いはなんですか?

HTMLは「Hypertext Markup Language」の略です。マークアップ言語ですね。

つまり、文章や画像をコンピュータにわかるように説明し、WEB上で見られるようにするためのものです。

この記事では、HTMLについて現役WEBクリエイターが詳しく解説します。

当サイトで人気のプログラミングスクール

  • DMM WEBキャンプ  (3ヵ月でRubyエンジニアに)
  • TechAcademy  (オンラインで好きな時間に学べる)
  • 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が見出し1、h2が見出し2、という風に使います。h1は見出し1で大見出し、つまりそのページの一番重要な概要を示すタイトルになるので、h2以下のタグがh1より先に来ることはありません。

タグの順番を無視してマークアップすると、Googleに評価されず、SEOの評価が下がります。

<div></div>は、大きなコンテンツセクションに使います。

<a></a>はリンクを貼るときに使います。

imageタグの srcは画像パス、altには画像の説明を入れます。

<ol></ol>は、黒丸の箇条書きではなく、自動でナンバリングされます。

こんな感じで表示されます。

  1. ももたろうの付き人
  2. 鬼が来たら連絡
  3. ももたろうが鬼に襲われたら全力で助ける
  4. 鬼が島までの旅費は実費

ブロックタグとインラインタグ

タグには「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/

ご参考にしてくださいね。

コンテンツのコピー・流用は著作権上禁止しています。
タイトルとURLをコピーしました