Webデザイン
3DCG・映像
グラフィックデザイン
Webマーケティング
Webプログラミング
アナログスキル
その他
プログラミングやアプリ開発などをするうえで、欠かせない言語「HTML」。
今回はこれからHTMLを学びたい方にむけて、基礎知識や書き方の基礎の基礎を解説していきます。
HTMLとは？
HTML（HyperText Markup Language）は、Webページの骨組み（構造や意味）を定義するマークアップ言語です。タグ、要素、属性を用いて文章の見出し、段落、リンク、画像などをWebブラウザに伝える役割を持ち、CSSと組み合わせてデザインを施すことで、現在のWebサイトが表示されています。
少し噛み砕いて説明すると、HTMLは「このテキストは見出しです」「ここに画像を表示してください」「このテキストにリンクを貼ってください」といった指示をブラウザに与えるための言語です。
私たちが普段目にしているWebサイトのすべては、裏側でHTMLが使われており、メールやブログ、ECサイトなど、Web上に存在するあらゆるコンテンツの土台となっています。
タグ
HTMLの最も基本的な構成要素が「タグ」です。タグは山括弧（< >）で囲まれた記号で、テキストや画像などのコンテンツに意味や役割を与えるために使います。たとえば「<h1>」は最上位の見出しを意味し、「<p>」は段落を意味します。
多くのタグは「開始タグ」と「終了タグ」の2つをセットで使い、その間に内容を書き込む形式です。例えば「<h1>HTMLとは？</h1>」と書くと、「HTMLとは？」という文字が見出しとしてブラウザに表示されます。このように、タグはHTMLの文書構造を作り上げるための基本的な道具です。
要素
「要素」とは、開始タグ・内容・終了タグを合わせた一まとまりのことを指します。「<p>これは段落です</p>」という記述全体がひとつの「要素」です。要素の中にさらに別の要素を入れ子にすることもでき、これを「ネスト」と呼びます。
例えば「<ul>」（リストの親要素）の中に「<li>」（リストの各項目）を入れる書き方が、代表的なネストの例です。
要素はHTMLの構造を形作る基本単位であり、正しく組み合わせることでページ全体の骨格が完成します。ブラウザは要素の入れ子関係を読み取って、画面にコンテンツを正しく表示します。
属性
「属性」とは、タグに追加情報を与えるための仕組みです。開始タグの中に「属性名=”値”」という形式で記述します。たとえば画像を表示する「<img>」タグでは、「src=”画像のURL”」という属性でどの画像ファイルを表示するかを指定し、「alt=”画像の説明”」という属性で画像が読み込まれなかった場合の代替テキストを設定します。
リンクを表す「<a>」タグでは「href=”URL”」という属性でリンク先を指定します。タグ・要素・属性の3つを正しく組み合わせることで、HTMLはWebページの豊かな表現を実現しているのです。
HTMLと一緒に使うCSSとは？
CSS（Cascading Style Sheets）は、HTMLで作られた骨組みに見た目（デザイン）を与えるための言語です。文字色や背景色、フォントサイズ、要素の配置など、Webページの見た目に関するあらゆる指定をCSSで行います。
HTMLだけでは素朴なテキストの羅列になりますが、CSSを組み合わせることで洗練されたデザインのWebサイトが完成します。
CSSはHTMLファイルとは別ファイルとして作成し、HTMLから読み込む形が一般的な書き方です。現代のWebサイト制作において、HTMLとCSSはセットで学ぶのが基本です。
HTMLとCSSの違い
HTMLとCSSは役割がまったく異なります。HTMLがWebページの「構造」を定義するのに対し、CSSは「スタイル（見た目）」を定義するものです。家に例えると、HTMLが間取りや壁・床などの建築構造を決め、CSSが壁紙の色や床材のデザインを決める内装工事にあたります。
例えば「<h1>デジタルハリウッド</h1>」とHTMLで書くだけでは、ブラウザはデフォルトの黒い太文字として表示します。そこにCSSで「h1 { color: red; font-size: 32px; }」と指定することで、赤い大きな文字として表示されるようになります。
HTMLは文書の意味や構造をブラウザやGoogleの検索エンジンに伝えることに特化しており、「この部分は見出し」「この部分はリンク」という情報を正確に伝えます。一方でCSSは見た目の装飾に特化しており、両者の役割を分けて管理することでコードが整理しやすくなります。
Webサイトをゼロから作るにはHTMLとCSSの両方を理解することが必須であり、さらにJavaScriptを加えることで動きのある本格的なWebサイトが完成します。
「HTML/CSS講座」など体系的に学べる環境を活用すると、短期間で実践的なスキルが身につきやすくなります。
HTMLとプログラミング言語の違い
「HTMLはプログラミング言語ですか？」とよく聞かれますが、HTMLはプログラミング言語ではなく「マークアップ言語」に分類されます。
プログラミング言語（JavaScriptやPythonなど）は、条件分岐や繰り返し処理など、コンピュータに動作を命令するロジックを記述できます。一方HTMLは文書の構造や意味を定義するだけで、計算や処理をコンピュータに命令する機能は持っていません。
そのためHTMLはプログラミングよりも比較的とっつきやすく、Web学習の最初の一歩として最適な言語といえます。
「プログラミングは難しそうで自分には無理かも…」と感じている方でも、HTMLから始めることで、Webの仕組みを実感しながら着実にスキルを積み上げることができます。
HTMLの歴史と種類
HTMLは1991年、イギリスの物理学者ティム・バーナーズ＝リー氏によって考案されました。当初は学術論文をオンラインで共有するための簡易的な文書形式として始まりましたが、インターネットの普及とともに世界標準のWeb記述言語へと発展しています。
バージョンは時代とともに進化しており、「HTML 2.0」「HTML 4.01」「XHTML」を経て、現在主流となっているのが「HTML5」です。
2014年にW3C（World Wide Web Consortium）が正式に勧告し、動画・音声の埋め込みやアニメーションなど、より豊かな表現が標準機能として追加されました。現在はHTML Living Standardとして継続的に更新が続けられており、WhatWGという団体が仕様を管理しています。
Webサイトを作る際は現在のデファクトスタンダードであるHTML5（HTML Living Standard）の書き方を学んでおけば問題ありません。
HTMLを使用するメリット
HTMLを学ぶメリットのひとつは習得のしやすさです。プログラミング言語のような複雑なロジックを書く必要がなく、タグのルールを覚えれば比較的短期間で基本的なWebページを作れるようになります。
HTMLはすべてのWebブラウザで動作する標準技術であるため、特別な実行環境を用意しなくても動作を確認できる手軽さも魅力です。さらにHTMLを理解することはWebの仕組みを根本から理解することにつながり、CSSやJavaScriptといった関連技術の学習もスムーズに進みます。
WebデザイナーやWebディレクターなどWeb系の職種を目指す方にとっても、HTMLの基礎知識はほぼ必須といえます。
WordPressなどのCMSを使う現場でも、バナー設置やテキスト修正などHTMLの知識が求められる場面は多く、身につけておくことで業務の幅が広がるでしょう。
HTMLを使用するデメリット
HTMLにはいくつかの制限もあります。まずHTMLだけではWebサイトに動きや双方向の機能を持たせることができず、ユーザーの操作に応じてページが変化するような動的な処理にはJavaScriptが必要です。
また複雑なデザインの実現にはCSSとの組み合わせが前提であり、HTMLのみで見栄えのよいサイトを作るのは困難といえます。さらにHTMLのコードはブラウザで誰でも閲覧できる仕様のため、HTMLだけではセキュリティ面での対策はできず、個人情報の扱いなどにはサーバーサイドの技術との連携が必要になります。
加えて、HTMLは構造の定義に特化しているため、フォームの入力内容をデータベースに保存したり、ユーザーに合わせてコンテンツを切り替えたりといった処理も単独では実現できません。
こうした制限を知ったうえで、必要に応じてCSSやJavaScript、PHPなど他の言語と組み合わせることが、現代のWebサイト制作では基本的な考え方となっています。
HTMLのタグの種類とは？
HTMLの代表的なタグの種類を紹介します。
<title>タグ
そのページのタイトルを指定するタグです。
<h1>〜<h6>タグ
文中の見出し（heading）を指定するタグです。
<p>
段落（paragraph）を指定するタグです。
<img>
画像（image）を指定するタグです。
<br>
改行を指定するタグです。
上記はほんの一部にすぎません。このように、さまざまなタグによって指定することでコンピュータに文書構造を理解させます。
この文書構造をコンピュータにとってわかりやすくコーディングすることで、Googleやyahooなどの検索エンジンのクローラーからも読み込みやすくなり、検索結果で上位になりやすくなるSEO効果も期待できます。
HTMLが使われているものは？
それでは、HTMLはいったいどのようなものに使われているのかを説明します。
Webサイト
先ほどから述べているように、WebサイトはHTMLで構築されています。HTMLを確認する方法はとても簡単です。
今見ている画面でWindowsのパソコンを使っている方は「CtrlとU」、Macの方は「⌘とOptionとU」を同時に押してみてください。現在表示しているページのソースコードのHTMLを誰でも閲覧できます。
メール
電子メールでもHTMLが使用されています。HTMLを使うことで装飾ができたり、見出しや小見出しを作れたりと、読者にとって見やすいメールを作ることができます。
アプリ
スマートフォンで使うモバイルアプリにおいてもHTMLが使用されています。アプリの場合はJavaScriptやPHPなどのプログラミング言語も使用されていますが、HTMLも組み合わせて使われています。このように、HTMLはあらゆるデジタル媒体の基礎となっているのです。
HTMLにできないこと
HTMLはWebサイトを構築するうえで礎となる言語ではありますが、できないこともあるので、理解しておきましょう。
動的な表現はできない
HTMLは文字の色や大きさなどの単純な意味を与えることしかできないです。
ですから、ヌルヌルと動く動的なウェブサイトをつくりたいのであればJavaScriptを使用する必要があります。
Webサイトの装飾をするにはHTMLだけでは難しい
Webサイトの装飾部分などをより凝ったデザインにするには、HTMLだけでは不可能です。
装飾やスタイルを指定するにはCSSというまた別の言語をマスターしておく必要があります。
HTMLだけではごくかんたんなシンプルなWebサイトしか構築できません。
このように、HTMLを学ぶときは、あわせてCSSやJavascriptもセットで学んでおくとよいでしょう。
HTMLができることは？
HTMLをコーディングすることでどのようなことができるようになるかを解説します。
リンクがつけられる
HTMLでは外部のサイトや別のページへ移動するリンクをつけることができます。
見出しを作れる
<h1>から<h6>まで、「見出し」を作ることができます。見出しタグがないと、コンピュータは通常のテキストとして認識してしまいます。
ユーザー目線としても、見出しがあることでその文章で強調したい箇所や伝えたい内容がわかりやすくなります。
表を作れる
HTMLでは表も簡単に作ることができます。わかりやすく文書をまとめたいときにも便利です。
| フルーツの名前 | いちご | バナナ |
|---|---|---|
| 値段 | 300円 | 200円 |
このようにHTMLを使えばさまざまな表現ができるようになります。
HTMLの書き方の基本
開始タグや終了タグなど、実際にHTMLを記述するうえでの基本的な構文やルールについて解説します。
HTML5、CSS3とは？特徴・新機能や書き方について解説！
HTMLの基本構文
HTMLには118のタグが存在していますが、いずれのタグを利用するうえでも基本的に以下の要素が必要となります。
- <!DOCTYPE html>：HTML5で制作したファイルだと宣言する。
- <head></head>：画面表示はされないものの、必要なタイトルや情報が入力されている箇所。ページ内で最初に読み込まれる記述であり、そのページの基本情報が書かれている。
- <body></body>：コンテンツが記載される箇所。
- <h○></h○>：見出しが記述される箇所。h1〜h6まである。
- <p></p>：段落が記述される箇所。
<!doctype 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とはどのようなものなのか、タグ・要素・属性の基本的な概念、CSSやプログラミング言語との違い、歴史と種類、メリット・デメリット、できること・できないこと、具体的な記述方法について解説してきました。
今後はますます世の中のデジタル化が進み、HTMLを見て内容を理解できることはどんどん当たり前になってくるでしょう。
タグや細かい記述を覚えていくのは一朝一夕ではありませんが、コツコツ学習していき、自分の思い描いたWebサイトが完成したときの喜びは格別です。HTMLはWebを学ぶうえでの出発点であり、ここから学習を広げることでCSSやJavaScript、さらにはWordPressなどのCMSまでスムーズにステップアップできます。
ぜひ自分の手でWebサイト構築にチャレンジしてみてください。
この記事におすすめのオンライン講座
