Webデザイン
3DCG・映像
グラフィックデザイン
Webマーケティング
Webプログラミング
アナログスキル
その他
プログラミングやアプリ開発などをするうえで、欠かせない言語「HTML」。
今回はこれからHTMLを学びたい方にむけて、基礎知識や書き方の基礎の基礎を解説していこうと思います。
HTMLとは？
それでは、Web業界で働く仕事であれば日常的に耳にする「HTML」とはいったいなんなのかをまずは解説していきます。
HTMLとは
HTMLとは、ハイパーテキスト・マークアップ・ランゲージ（Hyper Text Markup Language）のことです。
コンピュータが理解できる、マークアップ言語の一つであり、メールやブログやECサイトなどなど、Webサイト上あらゆる文字はHTMLだと考えて問題ないでしょう。
あなたが今読んでいる「くりたま」のWebサイトも、見た目がHTMLとCSSによって作られています。
ハイパーテキストとは
HTMLの「H」の部分、ハイパーテキストとはなんなのでしょうか。
ハイパーテキストとは、単なるテキスト（文章）を超えた文章のこと。インターネットでは、あらゆるテキストが別のページのテキストとリンクされることで成り立っています。
「Webサイト」の「Web」とはその名のとおり、蜘蛛の巣を指しており、テキスト同士がリンクされて無限に広がっていく様子が蜘蛛の巣のようだからWebサイトと呼ばれているのです。
この蜘蛛の巣のような構造を成立させているのが、HTMLなのです。
マークアップとは
続いて、HTMLの「M」の部分、マークアップとは何かを解説します。
マークアップとは、テキストや装飾などの情報をコンピュータが認識できるように、タイトルや見出しなどの「タグ」と呼ばれる目印をつけることで意味づけしていくことです。
コンピュータは書かれているテキスト内容について意味を理解する能力はありません。ですから、一定のルールに沿って、「ここはタイトル部分、ここは見出し、ここからは小見出し」といったように、タグを使って理解させる必要があるのです。
HTMLが使われているものは？
それでは、HTMLはいったいどのようなものに使われているのかを説明していきます。
Webサイト
先ほどから述べているように、WebサイトはHTMLで構築されています。
HTMLを確認する方法はとてもかんたんです。
今見ている画面でWindowsのパソコンを使っている人は「CtrlとU」Macの人は「⌘とOptionとU」を同時に押してみてください。
こちらの記事ページのソースコードのHTMLを誰でも閲覧できます。
メール
電子メールでもHTMLが使用されています。
HTMLを使うことで、装飾ができたり、見出しや小見出しを作れたりと、より読者にとって見やすいような見え方でメールを作ることができます。
アプリ
あなたがスマートフォンで毎日使用するモバイルアプリにおいてもHTMLが使用されています。
アプリの場合は、JaveScriptやPHPなどのプログラミング言語も使用されていますが、HTMLも使用されています。
このように、HTMLはあらゆるデジタル媒体の基礎となっているのです。
HTMLにできないこと
HTMLはWebサイトを構築するうえで礎となる言語ではありますが、できないこともあるので、理解しておきましょう。
動的な表現はできない
HTMLは文字の色や大きさなどの単純な意味を与えることしかできないです。
ですから、ヌルヌルと動く動的なウェブサイトをつくりたいのであればJavaScriptを使用する必要があります。
Webサイトの装飾をするにはHTMLだけでは難しい
Webサイトの装飾部分などをより凝ったデザインにするには、HTMLだけでは不可能です。
装飾やスタイルを指定するにはCSSというまた別の言語をマスターしておく必要があります。
HTMLだけではごくかんたんなシンプルなWebサイトしか構築できません。
このように、HTMLを学ぶときは、あわせてCSSやJavascriptもセットで学んでおくとよいでしょう。
HTMLの種類
HTMLには「HTML4」「XHTML」「HTML5」などの種類があり、少しずつできることが違うので、気をつけておきましょう。
現在のHTMLは「HTML5」が最も多く使用されています。
HTML5、CSS3とは？特徴・新機能や書き方について解説！
HTMLのタグの種類とは？
HTMLの代表的なタグの種類を紹介します。
<title>タグ
そのページのタイトルを指定するタグ。
<h1>~<h6>タグ
文中の見出し(heading)を指定するタグ。
<p>
段落（paragraph）を指定するタグ。
<img>
画像（image）を指定するタグ。
<p>
改行を指定するタグ。
上記はほんの一部にすぎません。
このように、さまざまなタグによって指定することでコンピュータに文書構造を理解させるのです。
この文書構造をコンピュータにとってわかりやすくコーディングすることで、Googleやyahooなどの検索エンジンのクローラーからも読み込みやすくなり、検索画面上で上位になりやすくなるSEO効果が期待しやすくなります。
HTMLができることは？
それでは、HTMLをコーディングすることでどのようなことができるようになるかを解説します。
リンクがつけられる
HTMLでは外部のサイトや別のページへ移動するリンクをつけることが出来ます。
その際、リンクを貼りたい部分には<a>というタグが使われます。
見出しを作れる
<h1>から<h6>まで、「見出し」を作ることができます。
見出しタグがないと、コンピュータは認識できずに通常のテキストだと認識します。
ユーザー目線としても、見出しがあることで、その文章の強調したい箇所や伝えたい内容がわかりやすくなります。
表を作れる
HTMLでは表もかんたんに作ることができます。
わかりやすく文書をまとめたいときにも便利です。
| フルーツの名前 | いちご | バナナ |
| 値段 | 300円 | 200円 |
このようにHTMLを使えばさまざまな表現ができるようになります。
HTML初心者が学習するメリットとは
ここまでHTMLによってできることを説明してきましたが、HTMLを学ぶことでどのようなメリットがあるかを説明したいと思います。
転職や就職に活きる
WebデザイナーやWebディレクターなどWeb系の職種で働くうえで、HTMLの知識は欠かせません。
WordPressなどのCMS（コンテンツマネジメントシステム）を導入していても、バナーの設置や細かいテキストの変更などをするうえで、HTMLの知識は必要になってきます。
いちいちHTMLのコーディングをアウトソーシングしていては、外注費用がかさんでしまいますし、社内のWebデザイナーやエンジニアのリソースを使うと、他の業務が進まなくなってしまいます。
ですから、Webディレクターはもちろんですが、Web関連の職種に就きたい人、就いている人は、HTMLの基本的な知識を得ておくと業務が効率的に進むようになるでしょう。
また、履歴書などでもHTMLに精通すると書けることで、「この人はテクニカルなWeb構築やディレクションについてもある程度信頼できるんだな」と思われやすくなります。
Webの仕事にかかわるすべての人は、HTMLの基礎を抑えておくことで先々のキャリアアップや就職・転職に役立つといえるでしょう。
Webの仕組みがわかる
HTMLをを学習し、コーディングをできるようになることで、Webサイトはどのように成り立っているのかを理解しやすくなります。
Web関連の仕事をしていると、「画像が表示されていない」「一部文字が太くなってしまっている」などの細かい修正が必要な箇所がたくさん出てきます。
そこで、HTMLを理解していると、どこにサイト上の不備が生じているのかが理解できるようになり、社内の工数カットや外注費削減などにもつながります。
Webの仕組み・原理原則を理解しておいた上でWeb関連の職種で働くのと、そうでないのとでは、中長期で見て大きな差が生まれるとおぼえておきましょう。
ロジカルシンキングが身につく
また、HTMLだけでなく、あるルールのもとでコーディングする技術を身につけると、ロジカルに物事の構造を考えて形にする能力が身につきます。
直接的にWeb関連の業務に関連することだけでなく、ビジネススキルとして汎用的に使える能力。身につけておいて損はないでしょう。
また最近は小学生からプログラミング教育が始まる動きなどがあり、HTMLをはじめ、プログラミングができることはどんどん当たり前になってきています。
このように、さまざまな理由からHTMLを学ぶことで得られるメリットは多いとお伝えしておきます。
HTMLの書き方の基本
それでは、開始タグや終了タグなど、実際にHTMLを記述するうえでの基本的な構文やルールについてを解説します。
Webデザインと一緒にコーディングも学ぼう！HTMLコーディングの練習方法
HTMLの基本構文
HTMLには118のタグが存在していますが、いずれのタグを利用するうえでも基本的に以下の要素が必要となります。
- <!DOCTYPE html> ：HTML5で制作したファイルだと宣言する。
- <head></head>：画面表示はされていないものの、必要なタイトルや情報が入力されている箇所。ページ内で最初に読み込まれる記述であり、そのページの基本情報が書かれている。
- <body></body>：コンテンツが記載される箇所。
- <h○></h○>：見出しが記述される箇所。h1~h6まである。
- <p></p>：段落が記述される箇所。
<!doctype html>
<html>
<head></head>
<body>
<section>
<h1>見出しが入ります</h1>
<p>本文が入ります</p>
</section>
</body>
</html>
開始タグと終了タグ
HTMLは、そのタグに関連した情報が「ここから始まるよ」と知らせる「開始タグ」と、「ここで終わるよ」と知らせる「終了タグ」の2種類がセットで使われます。
たとえば、<h1>の見出しタグであれば以下のようになります。
<h1>ここにテキストが入ります</h1>
リンクの設置
続いて、リンクの設置方法です。
リンク設置については以下のような記述が必要です。
<a href="リンク先へのパス">リンクを貼るテキストや画像</a>
パス内には絶対パスもしくは相対パスを記述してください。
こちらも必ず<a href= からはじまり </a>タグで終わるように、開始タグと終了タグがセットで必要なことを忘れないようにしましょう。
画像表示
次は、画像表示をするための記述方法です。
<img src="画像ファイルへのパス">
画像表示については<img>タグを使用します。こちらについては、終了タグは必要ありません。
段落
より文章を端的に表示させるときに使用する段落の記述方法です。
段落は<ul>タグとで<li>タグを挟むような記述形式になります。
表示のされ方
- 項目1
- 項目2
- 項目3
記述方法
<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
箇条書きを番号を振り分けて記述したいときは以下です。
表示のされ方
- 項目1
- 項目2
- 項目3
記述方法
<ol>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ol>
まだまだ解説していくとたくさんのタグ、記述形式が存在していますが、詳しくは教本やHTMLに関する講座学習を通じて勉強してください。
まとめ
本記事では、HTMLとはどのようなものなのか、できること/できないことはなんなのか、具体的にどのような記述方法があるのか、HTMLを学習することで得られるメリットについてなどを解説してきました。
今後は、ますます世の中のデジタル化が進み、プログラミング学習が教育課程における基礎科目となり、HTMLを見て、内容を理解できるのはどんどん当たり前になってくるのではないかと予想しています。
タグや細かい記述を覚えていくのはかんたんではありませんが、コツコツ学習していき、自分の思い描いていたWebサイトが完成したときの喜びは代え難いものがあります。
みなさんもぜひとも、自分の手でWebサイト構築にチャレンジしてみてください。
この記事におすすめのオンライン講座
