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

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

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

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

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

HTMLとはどんなもの？

HTMLとは、簡単に表すと、インターネットで閲覧しているWebサイトに表示される画面をつくっている言語です。

「Hyper Text Markup Language（ハイパーテキストマークアップ言語）」を略したもので、わかりやすくいえば、Web上で公開しているページのテキスト（文書）やレイアウトなどの構造を定義している書式となります。

「マークアップ言語」というと難しく感じられますが、Webサイト内のどこにタイトルや本文を配置し、段落のどこまでをひとまとまりにするかなど、文章の構造を明確にする役割で、基本的には世界中の作成者にとって使いやすい仕様を目指しているものです。

Webサイトの見た目を変化させるために「HTMLタグ」という目印を使って、作成者がコンピューターに指示を出しているものと理解しておきましょう。

● Webページのソースは簡単に見ることができる
● HTML誕生の背景
● XMLやXHTMLとの違い

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

すべてのWebページはHTMLで書かれており、このHTMLのソースはブラウザ上で簡単に表示できます。以下でGoogle ChromeでのHTMLソースの表示方法を解説します。

1. Google Chromeを起動します
2. HTMLのソースを表示させたい任意のWebページを開きます
3. Webページ上で右クリックしコンテキストメニューを表示させます
4. コンテキストメニューにある「ページのソースを表示」をクリックします
5. 新規タグにて当該WebページのHTMLソースが表示されます

HTML誕生の背景

HTMLとは、1980年代にその前身である「SGML（Standard Generalized Markup Language：標準汎用記述言語）」から生まれた言語です。

当時ISO（国際標準化機構）で標準化されていたSGMLは、表現の自由度は高いものの使いこなすのが難しく、さまざまな環境で多くの人々が簡単に利用できるような、わかりやすい構造を定義していく必要がありました。そこで誕生したのがSGMLの機能をベースにしたHTMLです。

1989年、世界規模の技術研究所「CERN（欧州原子核研究機構）」にプログラマーとして勤めていたティム・バーナーズ=リー氏（以下、バーナーズ=リー氏）が、どのような機種・ソフトからでもサーバーにある情報を閲覧可能にするインターネットシステム「WWW(World Wide Web)」を開発。そのシステムの一部が、HTMLの初期バージョンである「HTML0」でした。

1994年には、バーナーズ=リー氏によって設立された国際団体「W3C（World Wide Web Consortium)」において、Webページを表現する言語「HTML」を国際標準技術として策定。世界中で広く普及されることになりました。

HTMLは1993年にHTML1.0、1995年にはHTML2.0、1997年はHTML3.2と、年々進化し続け、2014年には現在の最新バージョンであるHTML5が勧告されています。

XMLやXHTMLとの違い

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

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

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

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

HTMLよりもはるかに認知度が低く、十分な学習機会がないことから、普及は進んでいない状況です。開発自体は2009年に終了しているため、新しいXHTMLが今後誕生することはおそらくありません。Webサイトを作成する場合にどちらを使うか迷った場合には、一般的なHTMLを使用するとよいでしょう。

HTMLの用語

以下ではHTMLの用語について解説します。

● タグ
● 要素
● 属性

タグ

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

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

要素

要素とは、タグを含めた開始タグと終了タグに挟まれたテキスト部分全体のひとかたまりを指します。例えば以下の「<strong>」と「</strong>」はそれぞれタグですが、このタグにテキスト部分を含めた全部を要素と言います。

属性

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

HTMLタグの基本とは？

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

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

HTMLタグは100種類以上あり、上表のような目印（タグ）を使って、表示する文字に意味を持たせることができます。

HTMLタグ使用例

以下にHTMLタグの使用例を紹介します。

● 「HTMLとは何か？」という見出しを作成する場合
● 「HTMLタグ」というボタンを作成したい場合

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

例えば、「HTMLとは何か？」という見出しを作成する場合は以下となります。

HTMLタグ「<h1>」を使って、見出しだとわかるように開始と終了部分を囲みます。見出しは「<h1>〜<h6>」まで、表したい文字の大きさによって選定可能です。

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

「HTMLタグ」というボタンを作成したい場合は以下となります。

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

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

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

HTMLタグでSEO対策

HTMLタグに間違いがあったとしても、基本的に検索エンジン（GoogleやYahoo!などの検索プログラム）から罰則等はありません。

例えば、Googleの巡回プログラムである「クローラー」は、インターネット上にあるWebサイト・画像・PDFなどのさまざまな情報を日々取得しており、HTML構造のエラーやミスも補正して判断できるといわれています。

ただし、クローラーがHTML内のリンク間を移動して解析・データベース化した情報をもとに、検索エンジンの結果が表示されているため、作成したページを正しく認知してもらうことは重要です。

クローラーに認識されなければ、自社のWebサイトを検索結果として表示してもらうことはできません。作成したサイトが検索結果の上位に表示され、多くの人に見てもらうためにはHTMLの最適化を行い、効果的なSEO対策を施すことが必要となります。

具体的には、「h1～h4」に適切な配分でキーワードを入れること、また、クローラーの回遊率を上げるために「タグ」の埋め込みリンクには適切なキーワードを入れること、リンク切れに注意すること、などが挙げられます。

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

ユーザーと、検索エンジンの両者にとって重要なのが見出しのタグ「h1～h4」です。そのWebサイトの内容を知るために、見出しは重要な手がかりとなります。よく検索されているキーワードや、ユーザーが見つけやすいキーワードを見出しに入れておきましょう。「<a>タグ」のリンクも同様に、内容がよくわかる適切なキーワードを入れ込むことが大切です。

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

HTMLのデメリット

HTMLのデメリットは、少しの記述ミスでも影響範囲が大きいことが挙げられます。例えばHTMLで必要不可欠な「タグ」は、「開始タグ＝<>」と「終了タグ＝</>」でワンセットですが、終了タグの「/」が抜けているだけでも表示が崩れたり、文字化けしたりして自分の狙った構成にすることができなくなります。

また簡素的なデザインしか構築できず、動的な表現もできません。HTMLではこういったデメリットもあるため、他のさまざまな言語で補う必要があるのです。

CSSとは？

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

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

CSSの概要と歴史

<a href=” https://www.profuture.co.jp/mk/words/css ” target=”_blank”> CSS </a>とは「Cascading Style Sheets」の略称で、HTMLと同様、W3Cにより勧告された「文章のスタイルを指定する言語」です。1994年にホーコン・ウィウム・リー氏が初めて提案し、1996年に「CSS1」が誕生。その後「CSS2」「CSS2.1」を経て、現在は「CSS3」が最新のものとなります。

HTMLが文章構造自体を指定する言語なのに対し、CSSは文章にどのような装飾（デザイン）を行うかを指定できる言語です。わかりやすくいえば、文章の内容を表すのがHTML、その文章の色やサイズなどを指示するのがCSS。

HTMLタグやHTMLファイル（HTMLタグで囲んだ文章を集めたファイル）に直接記述したり、CSSファイル（外部に作ったファイル）に記述したりして作成します。

CSSでできること

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

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

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

HTMLファイルの作成手順

以下では身近なテキストエディタアプリを使用してHTMLファイルを作成する手順を解説します。

● テキストエディタアプリでタグを使って文字を書く
● ファイル名を「.html」にする
● 「Google Chrome」などのブラウザで確認する

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

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

● タイトルや各見出しに指定する場合に使用する「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」にする

タグを使用して文字を書いたら一度ファイルを保存します。その際に「上書き保存」ではなく、「名前を付けて保存」を選択します。保存ファイル名を入力したら拡張子をテキストの「.txt」から「.html」に変更して保存します。

すると「拡張子を変更すると、ファイルが使えなくなる可能性があります。変更しますか？」という警告文が表示されますので「はい」をクリックして変更します。

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

拡張子を「.html」に変更して保存すると、次回ファイルを開くときテキストではなくWebブラウザで表示されるようになります。ファイルを開くと「メインで使用する」に設定してあるWebブラウザが自動的に起動し作成した内容が表示されますので、どのような見栄えになっているか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を習得していきましょう。