HTMLとは？初心者向けにCSSとの違いやタグの基本を解説します

近年、パソコンやスマートフォンの普及により、インターネットを介したオンラインでの企業活動がますます重要になっています。中でも、Webの仕組みの根幹を成している「HTML」を理解しておくことは大切です。

HTMLとは、ホームページなどのWebサイトをつくる上で欠かせない言語ですが、その内容について「何から学べばよいのか」と課題を抱えている企業や、「わかりそうでわからない」と難しく感じている担当者も少なくないでしょう。

本記事では、初心者でも簡単に学べるHTMLの基本やその活用シーンについて、また、理解しておきたい「HTMLタグ」や「CSS」の基礎構造も、わかりやすく解説します。

関連記事：Web(ウェブ)とは？初心者でも分かるよう意味や仕組みを解説します

人事・経営層のキーパーソンへのリーチが課題ですか？
BtoBリード獲得・マーケティングならProFutureにお任せ！

今すぐ無料相談

HTMLとはどんなもの？

HTMLとは、Webサイトの骨格を形成するマークアップ言語です。「Hyper Text Markup Language」の略称であり、Webページに表示されるテキスト、画像、リンクなどのコンテンツの構造を定義するために使用されます。簡単に言えば、Webページを構成する各要素が「何であるか」をコンピューターに伝えるための指示書のようなものです。

「マークアップ言語」と聞くと難しく感じるかもしれませんが、HTMLの役割は、文書の構造を明確にすることにあります。例えば、どこが見出しで、どこが本文の段落なのか、といった情報を定義します。これにより、Webブラウザは情報を正しく解釈し、ユーザーに見やすい形で表示することができます。Webサイトの見た目を整えるためには、「HTMLタグ」と呼ばれる目印を使い、コンピューターに指示を出します。このタグの組み合わせによって、Webページは構築されています。Webページのソースコードは、ブラウザ上で右クリックし、「ページのソースを表示」を選択することで、誰でも簡単に確認できます。HTMLは、インターネットの発展と共に進化を続け、現在では最新バージョンであるHTML5が広く使われています。

Webページのソースは簡単に見ることができる

すべてのWebページは、インターネット上で情報を閲覧できるようにするためにHTMLという言語で記述されています。このHTMLで書かれたソースコードは、Webブラウザを使用することで誰でも簡単に表示させることができます。Webサイトがどのように構成されているのか、その構造を理解する第一歩として、ソースコードの確認は非常に有効です。

以下に、Google ChromeブラウザでのHTMLソースの表示方法を具体的に解説します。

1. まず、お使いのGoogle Chromeブラウザを起動してください。
2. 次に、HTMLのソースコードを確認したい任意のWebページを開きます。
3. 開いたWebページ上の任意の場所で右クリックを実行し、表示されるコンテキストメニュー（右クリックメニュー）を呼び出します。
4. コンテキストメニューの中に「ページのソースを表示」という項目がありますので、それをクリックしてください。
5. すると、新しいタブまたはウィンドウが開かれ、そのWebページのHTMLソースコードが詳細に表示されます。

この手順で、Webサイトの構造や記述内容を直接確認できるようになります。

HTML誕生の背景

HTMLの歴史は、1980年代に標準化されたSGML（Standard Generalized Markup Language：標準汎用記述言語）から遡ります。SGMLは表現の自由度が高い反面、専門知識がないと使いこなすのが難しいという課題がありました。そこで、より多くの人々が容易に利用できるよう、SGMLの機能性を基盤としながらも、シンプルで分かりやすい構造を持つ言語としてHTMLが誕生しました。

HTMLの直接的なルーツは、1989年にCERN（欧州原子核研究機構）のプログラマーであったティム・バーナーズ=リー氏が開発したインターネットシステム「WWW（World Wide Web）」の一部として登場した初期バージョン「HTML0」にあります。この革新的なシステムは、異なる機種やソフトウェア環境でもサーバー上の情報を閲覧可能にすることを目指していました。

その後、Webページを表現する言語としてのHTMLの重要性が高まり、1994年にはバーナーズ=リー氏が設立に関わった国際団体W3C（World Wide Web Consortium）によって、HTMLは国際標準技術として策定されました。これにより、HTMLは世界中で広く普及する礎が築かれました。

HTMLは進化を続け、1993年にHTML1.0、1995年にHTML2.0、1997年にはHTML3.2と、着実にバージョンアップを重ねてきました。そして2014年には、現在の最新バージョンであるHTML5が勧告され、よりリッチなコンテンツ表現やオフライン機能など、Webの可能性を大きく広げています。

XMLやXHTMLとの違い

HTMLを学ぶ上で、よく比較されるのが、同じくマークアップ言語である「XML」や「XHTML」です。XMLはHTMLと同様にSGMLの機能をベースにした言語になります。

HTMLとは「人間側にとって見やすい情報表示を行うためのもの」ですが、XMLは「機械側にとってわかりやすく情報伝達するためのもの」で、それぞれがまったく異なる特徴を持っていることがポイントです。

XMLはプログラム仕様であるため、HTMLよりも拡張性が高く、データの並べ替えや交換、重要度を認識・管理させる作業に活用されていると理解しましょう。

一方、XHTMLは、XMLの機能をベースにしながらHTMLの特性も併せ持っている、ちょうど中間的な言語だといえます。記述のルールがHTMLよりも厳密なため、手順は多くなりますが、表現の自由度が高いことがポイントです。

HTMLとは異なり、XHTMLはXMLの厳格な構文規則に従うため、より堅牢な構造を持つWebページを作成することが可能です。HTMLよりもはるかに認知度が低く、十分な学習機会がないことから、普及は進んでいない状況です。開発自体は2009年に終了しているため、新しいXHTMLが今後誕生することはおそらくありません。

Webサイトを作成する場合にどちらを使うか迷った場合には、一般的なHTMLを使用するとよいでしょう。

HTMLの用語

HTMLを理解する上で、いくつかの重要な用語があります。これらはWebページを構成する要素を指し示し、コンピュータがその構造や意味を正しく解釈するために不可欠です。

タグ

タグはテキストの意味や内容をコンピューターへ理解させるために使用する目印のような存在です。テキストは人間が見ると理解できますが、そのままの状態ではコンピューターが理解できません。

そこでタグという目印を使用し、コンピューターがテキストの意味を理解できるように変換してあげます。一般的に「開始タグ＝<>」と「終了タグ＝</>」の間にテキストを挿入することで、当該テキストの意味をコンピューターが理解できるようになります。

例えば、見出しであることを示すタグや、段落であることを示すタグなどがあり、これらを適切に用いることで、Webページの内容が構造化され、検索エンジンなどにも正しく解釈されるようになります。これは、Webサイトが検索結果に表示されるためのSEO対策においても非常に重要な役割を果たします。HTMLのタグは、Webサイトを構成する上で欠かせない基本的な要素となります。

要素

要素とは、HTMLにおいて、開始タグと終了タグ、そしてその間に含まれるコンテンツ（テキストや画像など）をすべて含んだ一連のまとまりを指します。これは、Webページ上の特定の情報や構造を定義する基本的な単位となります。

例えば、「<h1>HTMLとは何か？</h1>」というコード全体が、一つの見出し要素となります。この要素は、ブラウザに対して「ここに大きな見出しを表示し、その内容は『HTMLとは何か？』である」という指示を伝えます。

HTMLの要素は、個々の情報に意味を持たせ、Webページ全体の構造を整理するために不可欠な構成要素です。各要素は、その内容や役割に応じて適切なタグで囲まれることで、検索エンジンや開発者にとって理解しやすい形になります。

属性

属性によって、HTMLの要素に補足の情報や設定を与えることができます。一般的に開始タグに属性を記述することで、当該要素に補足の情報や設定を付加できます。例えば以下のタグに囲まれた「href=””」が属性にあたる部分で、さらにその中の”（ダブルクォーテーション）で挟まれたURLの部分が属性値となります。HTMLの属性は、要素に付加的な情報や機能を与えるためのもので、SEO対策においても重要な役割を担います。

この例では、「href」が属性、「https://www.profuture.co.jp/mk/」が属性値です。href属性はリンク先を指定するために使用され、<a>タグ（アンカータグ）と組み合わせてWebページ間の移動を可能にします。このように、属性を適切に設定することで、Webページの機能性や情報伝達の精度を高めることができます。

HTMLタグの基本とは？

ホームページなどのWebサイトを作成する際に活用するHTMLタグとは、文章の構造をコンピューターに指示し、見出しや段落、画像の表示や他の文書へのリンクなどを指定する言語です。具体的にどのようなものなのか、Webサイトの骨格を形成するHTMLタグの基本構造を確認していきましょう。HTMLタグは、文章に意味を持たせ、Webページを構築するための基本的な要素となります。

HTMLタグの代表的な種類
<h1>～<h6>	見出しを作成するタグ（数字が小さいほど大きい見出し）
<a>	リンクを埋め込むタグ（他のページへリンク先の指定）
<p>	段落指定するタグ
<br>	改行指定するタグ
<hr>	罫線を水平方向に引くタグ
<img>	画像を挿入するタグ
<button>	ボタンを作成するタグ

HTMLタグは100種類以上あり、上表のような目印（タグ）を使って、表示する文字に意味を持たせることができます。これらのタグを組み合わせることで、複雑なWebページも構築可能です。

HTMLタグ使用例

HTMLタグは、Webページに表示されるコンテンツの構造を定義するために不可欠な要素です。ここでは、具体的なHTMLタグの使用例として、「HTMLとは何か？」という見出しを作成する場合と、「HTMLタグ」というボタンを作成する場合について解説します。これらの例を通じて、HTMLタグがどのように機能し、Webページにどのような情報や要素を組み込むことができるのかを理解しましょう。

「HTMLとは何か？」という見出しを作成する場合

「HTMLとは何か？」という見出しをWebページに表示したい場合、<h1>から<h6>までの見出しタグを使用します。これらのタグは、コンテンツの階層構造を示すために重要であり、検索エンジン最適化（SEO）においても重要な役割を果たします。一般的に、<h1>タグはページ全体の主要な見出しとして一度だけ使用され、<h2>以降はサブセクションの見出しとして使用されます。

例えば、このセクションで「HTMLとは何か？」を最も重要な見出しとして表示したい場合は、以下のように記述します。

このように、開始タグ（<h1>）と終了タグ（</h1>）で囲むことで、その間のテキストが「<h1>」レベルの見出しとして認識されます。見出しのレベルによって文字の大きさや重要度が異なり、Webサイトのナビゲーションやコンテンツの構造をユーザーに分かりやすく伝えるために役立ちます。

「HTMLタグ」というボタンを作成したい場合

次に、「HTMLタグ」というテキストを持つボタンを作成する例を見てみましょう。ボタンは、ユーザーの操作を促すためのインタラクティブな要素として、Webサイトで頻繁に使用されます。ボタンを作成するには、<button>タグを使用します。

また、ボタンのタイプ（種類）は「type=””」で表しましょう。例えば、汎用ボタン（クリック時の動作が決まっていないもの）で「ボタン」を作成する場合は以下となります。

表したいボタンをタイプで指定することがポイントです。

囲みの終了タグには、基本的に</h1>や</button>のようなバックスラッシュが入ります。ただし「HTML5」の場合、「br」「hr」「img」などの「空要素」と呼ばれるタグはバックスラッシュをつけなかったり、「p」のバックスラッシュは省略可能だったりと、記述方法が異なるため注意しましょう。

HTMLタグでSEO対策

HTMLタグの記述に多少の誤りがあったとしても、GoogleやYahoo!などの検索エンジンから直接的な罰則を受けることは基本的にありません。これは、Googleの巡回プログラムである「クローラー」が、インターネット上のWebサイトや画像、PDFなどの様々な情報を日々収集する際に、HTML構造のエラーやミスをある程度補正して理解できる能力を持っているためです。

しかし、検索結果の表示は、クローラーがHTML内のリンクを辿って解析し、データベース化した情報に基づいています。そのため、作成したWebページを検索エンジンに正しく認知してもらうことが非常に重要です。クローラーに認識されなければ、自社のWebサイトが検索結果に表示されることはありません。したがって、作成したサイトが検索結果の上位に表示され、より多くのユーザーに見てもらうためには、HTMLの最適化を通じて効果的なSEO（検索エンジン最適化）対策を施すことが不可欠です。

具体的には、見出しタグ「h1」から「h4」にかけて、適切なキーワードをバランス良く配置すること、クローラーの回遊率を高めるために「aタグ」で埋め込むリンクには内容を的確に表すキーワードを含めること、そしてリンク切れを注意深く管理することなどが、効果的なSEO対策として挙げられます。

hタグ1～4の各役割
h1	大見出し（タイトル）
h2	中見出し（章・目次など）
h3	小見出し（各章のポイント）
h4	超小見出し（h3よりも小さい補足）

ユーザーと検索エンジンの両者にとって、見出しタグ（h1～h4）はWebサイトの内容を理解するための重要な手がかりとなります。これらの見出しには、頻繁に検索されるキーワードや、ユーザーが情報を見つけやすいようなキーワードを盛り込むことが大切です。同様に、「aタグ」のリンクにおいても、そのリンク先の内容が理解できるような適切なキーワードを設定することが、検索エンジンによる評価を高める上で有効です。

関連記事
・【2024年度版】SEOとは？基礎知識と具体的な施策を詳しく解説
・SEO対策をまずは自分でやるには？初心者がすぐに取り組める手法を解説！
・クローラーとは? 検索エンジンの仕組みを解説します！

HTMLのデメリット

HTMLのデメリットとして、わずかな記述ミスでもWebページ全体の表示に大きな影響を及ぼす可能性がある点が挙げられます。例えば、HTMLの基本構造を定義する「タグ」は、「開始タグ」と「終了タグ」で一組となりますが、終了タグにスラッシュ「/」が抜けているだけで、意図したレイアウトが崩れたり、文字化けが発生したりして、期待通りの表示が困難になることがあります。

また、HTML単体では、複雑で洗練されたデザインや、動的な表現を実装するには限界があります。このため、Webサイトの魅力を最大限に引き出し、ユーザー体験を向上させるためには、HTMLのデメリットを補うために、CSSやJavaScriptといった他の言語と組み合わせて活用することが不可欠となります。

CSSとは？

HTMLを理解する上で、「CSSとは何か」「CSSとHTMLの違いはどこにあるのか」といった疑問を持つ人は多いでしょう。CSSの基礎や具体的な活用例は以下になります。

● CSSの概要と歴史
● CSSでできること

CSSの概要と歴史

CSSとは「Cascading Style Sheets」の略称で、HTMLと同様、W3Cにより勧告された「文章のスタイルを指定する言語」です。Webサイトのデザインやレイアウトを定義するために使用されます。

1994年にホーコン・ウィウム・リー氏が初めて提案し、1996年に「CSS1」が誕生。その後、「CSS2」、「CSS2.1」を経て、現在は「CSS3」が最新のものとなります。

CSSを学ぶことで、Webサイトの見た目を大きく変えることが可能になります。 HTMLが文章構造自体を指定する言語なのに対し、CSSは文章にどのような装飾（デザイン）を行うかを指定できる言語です。

わかりやすくいえば、文章の内容を表すのがHTML、その文章の色やサイズ、配置などを指示するのがCSSです。CSSは、HTMLタグやHTMLファイル（HTMLタグで囲んだ文章を集めたファイル）に直接記述したり、外部に作成したCSSファイルに記述したりして作成します。

HTMLとCSSを組み合わせることで、より魅力的でユーザーフレンドリーなWebサイトを構築することができます。

CSSでできること

CSSを活用すれば、見出しを吹き出しや帯（リボン）の形にすること、背景にグラデーション効果を施すこと、Webサイトに動きを加えるアニメーションを作ることなども可能です。1文字ずつ時間差で登場するテキストアニメーションや、波紋のように円が広がるアニメーション、さまざまな種類の回転や紙吹雪もCSSで指定することができます。

アニメーションでさらに動きを出したいときは、JavaScript（動作を定義するプログラム）と組み合わせて表現するとよいでしょう。Webサイト（ホームページ）の多くはHTML、CSS、画像、JavaScriptのデザインで作られています。競合企業のHTMLやCSSを参考にしながら、自社のオリジナルデザインを構築しましょう。

関連記事
・CSSとは？基本や書き方を初心者にもわかりやすく解説
・CSSとは？基礎から基本的なコード例まで初心者向けに解説します
・JavaScriptとは！初心者でも分かる基本的な概念と仕組みを解説！
・JavaScriptの意味とは？Web開発で欠かせない基本を解説！
・ホームページの構成の考え方・手順とは？押さえたいポイントも解説

HTMLファイルの作成手順

Webサイトの基礎となるHTMLファイルを作成する手順は、意外とシンプルです。特別なソフトウェアは必要なく、普段お使いのテキストエディタアプリで簡単に作成できます。ここでは、その基本的な流れを解説します。

テキストエディタアプリでタグを使って文字を書く

テキストファイルにタグを使用して文字を書いていきます。以下にそれぞれタグを用いた場合の書き方について解説します。

● タイトルや各見出しに指定する場合に使用する「hタグ」
● 文章に段落を指定する場合に使用する「pタグ」
● 箇条書きを行う場合に使用する「liタグ」
● リンクを挿入する場合に使用する「aタグ」

タイトルや各見出しに指定する場合に使用する「hタグ」

● タイトル：「HTMLとは？」に設定
● 大見出し：「HTMLファイルの作成手順」に設定
● 小見出し：「テキストエディタアプリでタグを使って文字を書く」に設定

上述の場合タグを用いて書くと以下のようになります。

● タイトル：<h1> HTMLとは？</h1>
● 大見出し：<h2> HTMLファイルの作成手順</h2>
● 小見出し：<h3>テキストエディタアプリでタグを使って文字を書く</h3>

文章に段落を指定する場合に使用する「pタグ」

文章の段落を指定する場合のタグは「pタグ」を使用します。「p」は「Paragraph」の略で段落を意味します。「文章の内容が変わる」「一段落して次の話題に移る」など、シーンが変わるタイミングでマークアップします。例えば以下のような使い方をします。

箇条書きを行う場合に使用する「liタグ」

文章や単語を箇条書きにしたい場合は「liタグ」を使用します。「li」は「list item」の略でリスト項目を意味します。例えば、よく使用されている黒丸アイコンでのリストを作成したい場合は、以下のように「type属性」に「disc」を指定して「liタグ」を構築します。

※「liタグ」は<ul>～</ul>または<ol>～</ol>の間で使用します。

すると以下のように表示されます。

リンクを挿入する場合に使用する「aタグ」

テキストにハイパーリンクを挿入したい場合は「aタグ」を使用します。「a」は「Anchor＝アンカー」の略で「いかりを下ろす」「船舶を固定する」などの意味があります。主に属性値にURLを指定して使用します。

また、別画面を開いて表示させる場合は以下のように、2番目の属性である「target」を指定します。

2番目の属性「target」に属性値「_blank」を指定することにより、別画面にリンク先が表示されます。

関連記事：brタグとは！HTMLタグの中でpタグとの違いも解説します！

ファイル名を「.html」にする

タグを使って文章を記述し終えたら、そのファイルを保存します。この際、ファイル名の末尾に.html（または.htm）を付けて保存することが非常に重要です。例えば、「index」という名前で保存する場合、「index.html」というファイル名にします。この拡張子によって、コンピューターはファイルがHTMLファイルであることを認識し、Webブラウザで正しく表示できるようになります。

「Google Chrome」などのWebブラウザで確認する

作成したHTMLファイルを保存したら、実際にWebブラウザ（Google Chrome、Safari、Firefoxなど）で開いて、表示を確認してみましょう。ファイルをダブルクリックするか、ブラウザの「ファイルを開く」機能を使って、作成した.htmlファイルを指定します。正しく記述されていれば、意図した通りの見出しや段落などが表示されているはずです。もし表示がおかしい場合は、タグの記述ミスや閉じ忘れがないか、再度確認しましょう。この繰り返し作業によって、Webページは形作られていきます。

関連記事：ブラウザ（browser）とは？意味や種類、仕組みをわかりやすく解説

WebマーケターにHTML知識は必要？

WebマーケターはHTMLの知識は必要無いように思われるかもしれませんが、以下の理由から簡単なHTMLの知識は身につけておいた方がよいと言えます。

● 制作側とのやりとりがスムーズになる
● HTMLメールが扱えるようになる

制作側とのやりとりがスムーズになる

Webマーケターの作業場所は主にWebサイト上であり、Webサイトの更新や内容変更なども頻繁に行います。そのためWebサイトをいかに使いやすくできるかは効率化の面から非常に重要な課題です。

こういったときに「ここはこのように変更してほしい」とか「デザインはこのようにしてほしい」といったやり取りが制作側とスムーズに行えれば、コミュニケーションも円滑に取ることができ、お互い効率的に作業を進めることができます。簡単なHTMLの知識があるだけでも、こういった注文を分かりやすく制作側に伝えられるのです。

関連記事：Webマーケティングとは？基礎知識や仕事内容、担当者に求められることをわかりやすく解説

HTMLメールが扱えるようになる

簡単なHTMLの知識があればHTMLメールも自在に扱えるようになります。HTMLメールはHTML言語をそのままメールに使用できます。従来のように変化の乏しい文章ではなくフォントの大きさを変えたり、文字色を変えたりできます。また画像の埋め込みや表の使用などもでき、視覚的に多くの情報をユーザーに伝達できます。

関連記事
・HTMLメールとは！作成方法やテキストメールとの違いも解説！
・CMS＋MAツール「Switch Plus」がSalesforceと連携開始！営業効率最大化が可能に

まとめ

Webの仕組みの根幹となるHTMLとは、文章の構造を指定するための言語です。Webサイト（ホームページ）の作成方法を学ぶ際には、HTMLタグの基本やHTMLとCSSの違いを理解すること、また、閲覧するユーザーや検索エンジンを意識しながらSEO対策を行うことがポイントになります。さまざまなWebサイトの基礎構造を参考に、HTMLを習得していきましょう。