HTMLでできること一覧！特徴やCSSとの関係も解説

Web系のプログラミングを学ぶ際に、避けては通れないのが「HTML」です。
しかし、「名前はよく聞くけど、具体的に何ができるのかよくわからない」という方も多いのではないでしょうか。

そこでこの記事では、HTMLでできることや、CSSとの関係などについて詳しく解説していきます。

Web制作やWeb開発に興味のある方にとっては大いに役立つ内容ですので、是非参考にしてください。

HTMLとは

HTMLはWeb制作の出発点であるため、その役割や特徴を正しく理解することが学習の近道です。

ここでは、HTMLの基本的な特徴や、Webページをリッチにするために欠かせないCSSやJavaScriptとの関係性について、わかりやすく解説します。

HTMLの特徴

HTMLは「HyperText Markup Language」の略称で、Webページの文章構造を定義するためのマークアップ言語です。
誤解されやすいのですが、HTMLはプログラミング言語ではありません。

HTMLは、プログラミング言語のように複雑な処理を記述するものではなく、テキストや画像などのコンテンツが、「これは見出し」「これは段落」といったように、どのような役割を持っているのかをコンピューターが理解できるように「意味付け」を行うのが主な役割です。

この意味付けには「タグ」と呼ばれる目印が使われます。

例えば、見出しには<h1>、段落には<p>といったタグでテキストを囲むことで、ブラウザはその指示に従って適切に表示します。

このように構造が整理されていることは、検索エンジンがページの内容を正しく評価するためにも非常に重要です。

HTMLは、誰でも比較的簡単に学べるシンプルさを持ちながら、すべてのWebページの土台となる、非常に重要な言語と言えるでしょう。

HTMLとCSSの関係

HTMLとCSSは、Webページを作成する上で切っても切れない関係にあります。

HTMLがWebページの「骨組み」を作る役割だとすれば、CSSは「装飾」を担当する言語です。
この役割分担を理解することが、Web制作・開発を学ぶ上で非常に重要になります。

例えば、HTMLだけで書かれたWebページは、文字と画像が上から順番に並んでいるだけの、非常に簡素な見た目になってしまいます。

そこでCSSの出番です。
CSSを使うことで、以下のようなデザインの調整が可能になります。

つまり、HTMLで「ここにタイトルを置く」「ここに本文を置く」といったように構造を決め、CSSで「タイトルの文字は青色で大きく」「本文は読みやすいフォントで」といったように見た目の指定をするのです。

この二つを組み合わせることで、初めて我々が普段目にするような、デザイン性の高いWebサイトを作ることができるようになります。

HTMLとJavaScriptの関係

HTMLとCSSがWebページの「静的」な見た目を担当するのに対し、ページに「動的」な機能や動きを加えるのがJavaScriptの役割です。

HTMLが骨組み、CSSが装飾だとすれば、JavaScriptは「機能・設備」のようなものです。

例えば、Webサイト上で以下のような動きを見たことがあるでしょう。

これらはすべてJavaScriptによって実現されています。

HTMLで設置した要素に対して、JavaScriptが「このボタンがクリックされたら、この動作をしなさい」といった命令を与えることで、ユーザーのアクションに応じた動きを実現できます。

HTMLとCSSだけでもWebページは作れますが、JavaScriptを加えることで、よりユーザーにとって使いやすく、魅力的なサイトを構築できるのです。

HTML/CSSと表記されることが多い理由

Web制作の求人情報や学習教材で「HTML/CSS」のように、二つがセットで表記されているのを頻繁に見かけるかと思います。

これは、前述の通り、HTMLとCSSがWebページ制作において密接な関係にあり、事実上セットで使われるのが当たり前だからです。

HTMLだけでWebサイトを完成させることは稀で、実務では必ずと言っていいほどCSSによるデザイン調整が必要になります。
HTMLで構造を作り、CSSで見た目を整えるという一連の流れが、Webサイト制作の基本中の基本です。

そのため、Webデザイナーやコーダー、フロントエンドエンジニアといった職種では、HTMLとCSSの両方のスキルを持っていることが必須条件とされることがほとんどです。

学習する際も、HTMLの基本を学んだら、次はCSSを学ぶという流れが最も効率的であり、多くの学習カリキュラムもそのように構成されています。

HTMLでできること一覧

HTMLはWebページの土台ですが、具体的にどのようなことができるのでしょうか。

ここでは、Webページ制作で日常的に使われるHTMLの具体的な機能を、一覧で紹介します。

Webページの骨組みを作る

HTMLの最も基本的かつ重要な役割は、Webページの骨組み、つまり「構造」を作ることです。
文章をただ書き連ねるのではなく、「ここからここまでが見出し」「この部分は段落」といったように、各コンテンツに意味と役割を与えます。

例えば、<h1>というタグで囲まれたテキストは「このページで最も重要な見出し」として扱われ、<h2>、<h3>と数字が大きくなるにつれて、より階層の低い小見出しとなります。
また、<p>タグは段落を示します。（タグについての詳細は後述します）

このように文書構造を正しく定義することは、2つの大きなメリットをもたらします。

一つは、Webブラウザが構造を理解し、見出しを大きく表示するなど、適切に画面表示してくれる点です。

もう一つは、検索エンジンがページの内容を正確に把握しやすくなる点です。
これにより、検索結果で上位に表示されやすくなるなど、SEO（検索エンジン最適化）においても非常に重要な役割を果たしているのです。

画像を表示する

文章だけのWebページは単調になりがちですが、HTMLを使えば簡単に画像を表示させることができます。

画像表示には<img>というタグを使用します。
<img>タグに、表示したい画像の場所（URLやファイルパス）をsrc属性で指定するだけで、Webページ上に画像が埋め込まれます。

さらに、alt属性を使って画像の代替テキストを指定することも重要です。
alt属性は、何らかの理由で画像が表示されなかった場合に代わりに表示されるテキストであり、目の不自由な方が利用するスクリーンリーダー（音声読み上げソフト）が画像の内容を読み上げる際にも使われます。

このように、ただ画像を表示するだけでなく、それが何であるかを補足情報として伝えられるのもHTMLの機能の一つです。

リストを使って見やすくする

情報を整理してわかりやすく伝えたい時、箇条書きや番号付きのリストが役立ちます。
HTMLでは、こうしたリスト表示も簡単なタグで実現可能です。

リストには主に2つの種類があります。
（↓なお、これもまさにリストです）

例えば、料理のレシピで手順を説明する際には番号付きの<ol>リストを、持ち物リストのように順序が関係ない場合には箇条書きの<ul>リストを使う、といった使い分けができます。

これらのリストタグを使うことで、情報を構造化し、ユーザーにとって格段に読みやすいコンテンツを提供できるようになります。

別のWebページへリンクを設置する

Webサイトが単なる情報の集合体ではなく、「Web（クモの巣）」と呼ばれる所以は、ページ同士が相互に繋がっているからです。
この繋がりを実現しているのが、HTMLのハイパーリンク機能です。

リンクの設置には<a>タグを使用します。
<a>タグでテキストや画像を囲み、href属性に遷移先のURLを指定することで、ユーザーがクリックすれば別のページへジャンプできるリンクを作成できます。

この機能により、サイト内の別ページへ案内したり、参考にした外部サイトを紹介したりすることが可能になります。

Webの根幹をなすこのリンク機能は、言うまでもなくHTMLが持つ最も強力で重要な機能の一つであり、リンク機能なくして現在のインターネットは成り立たないでしょう。

テーブルを作成する

複雑なデータを分かりやすく整理して見せたい場合には、HTMLでテーブル（表）を作成するのが効果的です。
テーブルは、行と列からなる格子状の形式でデータを表示する機能です。

テーブルの作成には、主に以下のタグを組み合わせて使用します。
（↓なお、これもまさにテーブルです）

タグ	役割
<table>	テーブル全体を囲む
<tr>	テーブルの行（横列）を定義する
<th>	見出しセルを定義する（太字・中央揃えで表示されることが多い）
<td>	データセルを定義する

これらのタグを駆使することで、商品スペックの比較表、料金プランの一覧、営業時間の案内など、さまざまな情報を整然とユーザーに提示できます。

単にテキストを並べるよりも格段に視認性が高まり、ユーザーは目的の情報を素早く見つけ出せるようになります。

メールの文章を装飾する

HTMLはWebページだけでなく、メールの作成にも活用されています。

画像やロゴを挿入したり、文字の色や大きさを変えたりして装飾されたメールマガジンを受け取ったことがあるでしょう。
このようなメールは「HTMLメール」と呼ばれ、HTMLを使って作成されています。

通常のテキストだけで構成される「テキストメール」とは異なり、HTMLメールではWebページを作るのと同じように、見出しやリスト、リンク、画像などを駆使して、視覚的に訴求力の高いコンテンツを届けることが可能です。

これにより、商品の魅力を写真付きで伝えたり、クリックされやすいデザインのボタンを設置したりするなど、マーケティング効果を高めることができます。

HTMLは「タグ」と「要素」で構成される

HTMLの正体は、突き詰めると「タグ」と「要素」という二つの概念に行き着きます。
これを理解することが、HTMLを書き進める上での基礎となります。

「タグ」とは、<と>で囲まれたキーワードのことで、コンテンツに意味付けをするための目印です。
多くのタグは、<p>のような「開始タグ」と、スラッシュが入った</p>のような「終了タグ」のペアで構成されます。

そして、「要素（element）」とは、開始タグ、終了タグ、そしてその間に挟まれたコンテンツ（中身のテキストなど）全体を指します。

例えば、<p>こんにちは、世界！</p>という記述があった場合、

Webページは、このような様々な役割を持つ要素を組み合わせて、一つの大きな構造物として成り立っています。

この基本ルールさえ覚えてしまえば、どんなに複雑に見えるWebページも、実は単純な要素の集合体であることが理解できるでしょう。

HTMLでよく使われるタグ

HTMLには100種類以上のタグが存在しますが、実際のWeb制作で頻繁に使用されるものは限られています。

ここでは、Webページを作る上で最低限知っておきたい、基本的かつ重要なタグを紹介します。
これらのタグを使いこなすことが、HTML学習の第一歩となるでしょう。

タグ名	役割
<h1>〜<h6>	見出しを定義します。<h1>が最も重要度が高い大見出しです。
<p>	段落（Paragraph）を定義します。文章のまとまりを作る際に使います。
<a>	リンク（Anchor）を設置します。href属性にURLを指定します。
<img>	画像（Image）を表示します。src属性で画像の場所を指定します。
<ul>, <ol>, <li>	<ul>は順序なしリスト、<ol>は順序ありリスト、<li>は各リスト項目です。
<table>, <tr>, <td>, <th>	テーブル（表）を作成するための一連のタグです。
<div>	特に意味を持たないブロックレベル要素。レイアウト目的で複数の要素をグループ化する際によく使われます。
<span>	特に意味を持たないインライン要素。文章の一部分だけ色を変えるなど、部分的な装飾に便利です。

これらのタグの役割を覚え、適切に配置していくことで、Webページの骨格が組み上がっていきます。
最初は難しく感じるかもしれませんが、実際に使いながら覚えていくのが最も効果的です。

HTMLの書き方

HTMLを書くのは、実はそれほど難しいことではありません。

ここでは、実際にHTMLファイルを作成し、ブラウザで表示するまでの基本的な手順を3つのステップで解説します。

必要なツールを準備する

まずは、HTMLを書くためのツールを準備しましょう。

なお、HTMLを書くのに特別な高価なソフトは必要ありません。
最低限、以下の2つがあれば誰でもすぐに始められます。

まず1つ目は「テキストエディタ」です。
Windowsなら「メモ帳」、Macなら「テキストエディット」が標準でインストールされています。
より本格的にコーディングするなら、無料で高機能な「Visual Studio Code」などがおすすめです。色分け表示や入力補完機能があり、格段に作業しやすくなります。

もう1つが、「Webブラウザ」です。
作成したHTMLファイルを確認するためのソフトです。「Google Chrome」や「Microsoft Edge」、「Safari」など、普段使っているもので問題ありません。

テキストエディタとWebブラウザは、ほとんどのパソコンに最初から入っているか、無料で入手できるものばかりです。
特別な準備なしに始められる手軽さが、HTMLの魅力の一つです。

基本的なHTMLファイルを作成する

ツールが準備できたら、早速HTMLファイルを書いてみましょう。

テキストエディタを開き、以下のサンプルコードをコピー＆ペースト、または手で入力してみてください。
これは、HTMLファイルの最も基本的な構造を示すテンプレートです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>私の最初のページ</title>
</head>
<body>
    <h1>こんにちは！</h1>
    <p>これは私の最初のWebページです。</p>
</body>
</html>

ファイルを保存してブラウザで確認する

コードが書けたら、ファイルを保存します。
この時、重要なポイントが2つあります。

まずは「ファイル名」です。

ファイル名の末尾は、必ず「.html」という拡張子にしてください。
例えば「index.html」のようにします。
これにより、コンピューターはこのファイルをHTML文書として認識します。

そして、「文字コード」です。

保存する際の文字コードは、「UTF-8」を選択してください。
これにより、日本語などの多言語が正しく表示され、文字化けを防ぐことができます。

そして、保存したHTMLファイルをダブルクリックすると、自動的にWebブラウザが起動し、作成したページが表示されます。

画面に「こんにちは！」という大きな見出しと、「これは私の最初のWebページです。」という文章が表示されていれば成功です。

このように、書いて、保存して、確認するというサイクルを繰り返しながらWebページ制作は進んでいきます。

HTMLを身に付けるだけで仕事はできる？

HTMLスキルが実際の仕事でどのように活かせるのか、またHTMLだけで仕事を得ることができるのか、という疑問を持っている方もいるでしょう。

ここでは「就職」と「フリーランス・副業」という二つの視点から、その可能性と現実について解説します。

就職の場合

結論から言うと、HTMLのスキル「だけ」でWeb系の企業に正社員として就職することは非常に困難です。

Webデザイナーやフロントエンドエンジニアといった職種では、HTMLはできて当たり前の基礎スキルと位置づけられています。

実際の求人では、HTMLとあわせて以下のスキルが求められることがほとんどです。

もちろん、HTMLはこれらのスキルを習得するための第一歩であり、非常に重要であることに変わりはありません。

しかし、就職を目指すのであれば、HTMLを入り口として、CSS、JavaScriptへと学習を進め、複数のスキルを掛け合わせて自分の価値を高めていく必要があるでしょう。

フリーランスや副業として案件を獲得する場合

フリーランスや副業の場合、CSSのスキルもある程度あれば、案件によっては受注することが可能です。

特にクラウドソーシングサイトならば、初心者でも対応できる案件がありますので、案件の受注も可能でしょう。

具体的には、以下のような仕事が考えられます。

これらの案件は、単価が数千円から数万円程度のものが多く、最初の一歩として実績を積むには最適です。

ただし、これらの案件で安定して稼ぎ続けることや、高単価を目指すことはほぼ不可能です。
より高度な案件や高収入を目指すのであれば、就職の場合と同様に、JavaScriptやPHP、デザインスキルといった付加価値となるスキルを身に付けていくことが重要になります。

HTMLを学習する方法

自分に合った学習方法を見つけることが、スキル習得を継続させる鍵です。
ここでは、HTMLを学ぶための代表的な3つの方法と、それぞれのメリット・デメリットを紹介します。

書籍を中心に勉強する

書籍での学習は、体系的な知識を順序立てて得られるという大きなメリットがあります。
第一線で活躍するプロフェッショナルが執筆・監修している本も多いので、信頼性の高い情報を網羅的に学べます。

また、数千円程度で購入できるため、コストを抑えたい方にも最適な方法です。

一方で、疑問点が出てきたときにすぐに質問できないというデメリットもあります。
コードがうまく動かないときに自力で解決する必要があるため、問題解決能力が鍛えられるとも言えますが、初心者にとっては挫折の原因にもなりかねません。

学習サイトを中心に勉強する

近年、HTML学習の主流となっているのが、オンラインの学習サイトを利用する方法です。
代表的なサイトとして「Progate」や「ドットインストール」などが挙げられます。

これらのサイトは、ゲーム感覚で進められるカリキュラムや、短い動画でテンポよく学べる形式など、初心者が飽きずに続けられる工夫が凝らされています。

基本的なコースは無料で提供されていることも多く、手軽に試せる点もメリットです。

ただし、基礎的な内容が中心のため、応用力を身に付けるには、サイトでの学習を終えた後にさらに本格的な学習が必要となるでしょう。

プログラミングスクールを利用する

独学での挫折が不安な方や、HTMLだけでなくエンジニア転職が可能なレベルにまでスキルを高めたい方には、プログラミングスクールがおすすめです。

・・・などなど、スクールの利用には、数多くのメリットがあります。

ただし、学習サイトや書籍での独学と比べると、高額な費用がかかるという点がデメリットです。

数十万円という費用を「自分への投資」と考えられる人には、スクールが最適でしょう。

なお、初心者におすすめのプログラミングスクールについては、以下の記事で詳しくまとめていますので、是非参考にしてください。

HTMLでできることを詳しく効率的に学ぶには

HTMLやCSSでできることを詳しく知り、スキルを高めたい場合は、「WPHack講座」がおすすめです。

WPHack講座のメリットは、主に以下の通りです。

格安料金でHTMLを中心としたスキルを高めたい場合には最適なので、「月数千円の出費で効率的にスキルを身に付けられる」という点にメリットを感じる方は、「WPHack講座」の利用を検討してみてもいいかもしれません。