HTML入門講座（初心者向け） HTMLとは何か・基本構造・書き方をわかりやすく解説

HTMLは、Webサイトを作るための基本となる言語です。
インターネット上に表示されるほぼすべてのWebページは、HTMLによって構造が作られています。

「HTMLとは何か？」
「HTMLで何ができるの？」
「初心者でも理解できる？」

本記事では、これからWeb制作を始める初心者の方向けに、以下の内容を体系的に解説します。

HTMLの意味
HTMLの役割
HTMLでできること
HTMLとCSS・JavaScriptの違い

まずはHTMLの基礎を理解することが、Web制作の第一歩です。

HTMLとは？初心者向け基礎解説

HTMLの意味

HTMLとは HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略です。
日本語に直訳すると、以下のような意味になります。

HyperText（ハイパーテキスト）
Markup（マークアップ）
Language（言語）

HTMLは、Webページの構造を定義するためのマークアップ言語です。
プログラミング言語とは少し異なり、「処理を書く言語」ではなく「意味づけをする言語」です。

例えば、次のようにタグで囲みます。


            <h1>HTML入門講座</h1>
            

            <p>HTMLはWeb制作の基礎です。</p>

このように記述することで、以下のことをブラウザに伝えています。

これは見出し
これは段落

HTMLはWebページの"骨組み"を作る言語なのです。

HTMLの役割

HTMLの最大の役割は、Webページの構造を定義することです。
Webページは単なる文字の集合ではありません。以下のような要素で構成されています。

見出し
本文
画像
リスト
リンク
表

HTMLは、それぞれの要素に意味を持たせる役割を担っています。
家づくりで例えるなら、以下のような関係になります。

HTML → 骨組み
CSS → デザイン（色やレイアウト）
JavaScript → 動き

つまりHTMLは、Web制作における最も重要な土台です。

これからWebデザインを学ぶ方は、Webデザインコースをご覧ください！

ハイパーテキストとは

「ハイパーテキスト」とは、別のページへリンクできる仕組みを持つテキストのことです。
例えば、「こちらをクリック」という文字を押すと、別ページへ移動できることがあります。
これはHTMLのリンク機能によって実現されています。

<a href="proxy.php?url=https://example.com">こちらをクリック</a>

このように記述することで、別ページへ移動できるリンクを作れます。
インターネットが世界中のページとつながっているのは、このハイパーテキストの仕組みがあるからです。

マークアップとは

「マークアップ」とは、文章に意味を付けることを指します。
例えば、以下のような意味づけを、タグで囲んで表現します。

見出しにする
強調する
リストにする

重要

このようにタグを使うことで、「これは重要なテキストです」と意味を伝えられます。
マークアップは、見た目だけでなく、検索エンジンや支援技術にも意味を伝える重要な役割を持っています。

HTMLとCSS・JavaScriptの違い

Web制作では、HTMLのほかにCSSやJavaScriptも使用します。
それぞれの違いを整理すると、次のようになります。

HTML → Webページの構造を作る
CSS → デザインを整える（色・フォント・レイアウト）
JavaScript → 動きをつける（クリック処理・アニメーションなど）

HTMLだけでもページは作れますが、装飾や動きはありません。
実際のWebサイトでは、HTMLを土台にCSSとJavaScriptを組み合わせて制作します。
まずはHTMLを理解することが、Web制作の基礎固めになります。

HTMLでできること

HTMLを学ぶことで、どのようなことができるのでしょうか。
ここでは、HTMLで実現できる代表的な機能を紹介します。

Webページ作成

HTMLを使えば、Webページをゼロから作ることができます。
以下のような基本的な構造はすべてHTMLで記述します。

見出しを作る
段落を表示する
リストを作る
表を作る

企業サイト、ブログ、ニュースサイト、ECサイトなど、あらゆるWebサイトの基礎はHTMLです。

リンク・画像設置

Webページに欠かせないリンクや画像も、HTMLで簡単に設置できます。


            <a href="proxy.php?url=https://ninjacode.work">公式サイト</a>
            

            <img src="proxy.php?url=image.jpg" alt="サンプル画像">

aタグ → リンク作成
imgタグ → 画像表示

これらを組み合わせることで、情報をわかりやすく伝えるページを作れます。

フォーム作成

HTMLではフォームの作成も可能です。
以下のようなフォームもHTMLが土台になっています。

お問い合わせフォーム
会員登録フォーム
ログイン画面


            <form>
            

            　<input type="text" placeholder="名前">
            

            　<button>送信</button>
            

            </form>

Webサービスやアプリの多くは、このフォーム機能を活用しています。

SEOとの関係

HTMLはSEO（検索エンジン最適化）と深く関係しています。
検索エンジンは、HTMLの構造を読み取り、以下のような要素を解析しています。

見出しタグ（h1〜h6）
titleタグ
metaタグ
alt属性

正しくHTMLを記述することで、以下のような効果につながります。

検索順位の向上
読みやすい構造
アクセシビリティ向上

つまりHTMLは、Web制作の基礎であると同時に、SEOの基礎でもあるのです。

＼HTMLについてもっと詳しく知りたい方必見！／

これからWEB制作を学ぶ方には、Web制作コースの独学プランがおすすめです!

WEB制作コースの詳細はこちら

HTMLの開発環境

HTMLやCSSでWebサイトを制作する際に必要なものは、テキストエディタというツールとインターネットが繋がったパソコン（ブラウザが必要）が必要となります。この2つがあればWebサイトが制作できます。こちらでは、テキストエディタとブラウザについて解説していきます。

テキストエディタ

Webサイトは、Webデザインしたものをコーディングすることによって完成させます。HTMLはコーディングの際に使用されるもので、これをマークアップ言語といいます。皆さんがインターネット上で見ているWebサイトは基本的にHTMLを使用しハイパーリンクやマークアップを使用して作られています。HTMLは初学者の方でも比較的覚えやすい言語ですので一つ一つ学習をしていきましょう。

これからWebデザインを学ぶ方は、Webデザインコースをご覧ください！

ブラウザ

スマートフォンの普及に伴いブラウザというワードを聞く事が多くなりました。でも「ブラウザって何？」と聞かれると答えられる方は多くないかもしれません。ある調査ではブラウザについて説明ができると回答したのは総数の約50％というデータもあります。それでは、ブラウザとは何なのか。

ブラウザとはインターネットでWebサイトなどを閲覧するために使われるソフトの事を言います。パソコンやスマートフォンにはMicrosoft Edgeやsafariが最初から入っていたり、Google Cromeも多くの方に使われているブラウザですね。ブラウザごとにブックマークや拡張機能などが異なりますので、使いやすいブラウザを選びましょう。

＼HTMLについてもっと詳しく知りたい方必見！／

これからWEB制作を学ぶ方には、Web制作コースの独学プランがおすすめです!

WEB制作コースの詳細はこちら

HTMLの基本構造

Webサイトを制作する際は、HTMLを正しく（ルールに従って）記述する必要があります。HTMLの構造は、まず文書がHTMLで作成されたものであることを宣言するために使われるDOCTYPEを記述し、その下にHTML宣言から始まりHTMLタグで終わります。こちらでは分かりやすい様に画像なども用いて解説をします。

DOCTYPE

WebサイトがHTML5で作成されたものである事を宣言するために、サイトのトップ（一番上）に下の図の様なタグを記述します。こちらはHTMLタグではありませんが、一番最初に記述する必要があります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>忍者CODEです</title>
</head>
<body>
<p>初心者に分かりやすく説明します！</p>
</body>
</html>

HTMLタグ

HTMLタグは、その文書がHTMLで作成されている事を宣言し、サイト制作の際は、上記のDOCTYPEの次にHTMLの宣言をしなければなりません。Webサイトを制作する際は、HTMLを宣言し、最後にHTMLタグで終わる、と覚えておきましょう。下の図を見て頂くと分かりますが、HTMLタグの中に記述しているlangはHTMLがどの国の言葉に対応しているのかについて書きます。すなわち日本語の場合はjaと記述することで、このWebサイトは日本語に対応したHTMLファイルであることを表します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>忍者CODEです</title>
</head>
<body>
<p>初心者に分かりやすく説明します！</p>
</body>
</html>

headタグ

headタグは、Google等の検索エンジンに伝える情報や、利用するファイルなどを記述する際に使用します。例えば、このページのタイトルが「HTML入門者向け情報サイト」だったとします。執筆している私は、このページをできるだけ多くの方に見てもらいたいわけですが、そのためにはGoogle検索などを行った際に検索結果のページに表示されていなければなりません。Googleの検索エンジンに、このページはHTML入門者向けページですよ、教えてあげなければなりませんのでその際に、このheadタグを用います。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>忍者CODEです</title>
</head>
<body>
<p>初心者に分かりやすく説明します！</p>
</body>
</html>

metaタグ

metaタグはWebサイトを制作する際に文書の情報を記述するタグの役割があります。具体的には、下の図の様に属性にcharsetを記述し、使用する文字コードを決めます。初心者の方はとりあえず「UTF-8」に設定をしておいてください。また、ディスクリプションといってページの内容を簡潔にまとめたものを設定する際にもmetaタグが使われます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>忍者CODEです</title>
</head>
<body>
<p>初心者に分かりやすく説明します！</p>
</body>
</html>

titleタグ

Webサイトを制作する目的は、「その情報を必要とする人に見てもらうこと」です。そのためにはGoogleやYahooなどの検索エンジンでの検索結果に、分かりやすくタイトルを表示させなければなりません。そこで使われるのがtitleタグです。下の様に、

<title>から始まり</title>

から始まり</title>で締めくくりますが、その間にサイトのタイトルを記入します。ここで記入された文字が検索結果一覧にも表示されますので、SEO対策としても非常に重要な役割があります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>忍者CODEです</title>
</head>
<body>
<p>初心者に分かりやすく説明します！</p>
</body>
</html>

bodyタグ

bodyタグは実際にユーザーに見える情報を記述する際に使います。このページでheadタグを説明しましたが、headタグはユーザーに見える情報ではなく検索エンジンに伝えたい情報や利用するファイルなどを記述する際に使います。

<body>で始まり</body>

で締めくくる部分に関してはインターネット上に公開されるので、サイトの設定などユーザーに見せる目的でないものは記述しないようにしてください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>忍者CODEです</title>
</head>
<body>
<p>初心者に分かりやすく説明します！</p>
</body>
</html>

HTMLについてもっと詳しく知りたい方は、無料問題集をご覧ください！

HTMLの書き方ルール

HTMLはルールに沿って記述することで、正しくWebページとして表示されます。ここでは、初心者が必ず押さえておくべきHTMLの書き方の基本ルールを解説します。

タグの書き方

HTMLは「タグ」と呼ばれる記号で囲んで記述します。基本形は次の通りです。 ここに文章を書きます このように、 <開始タグ>　内容　</終了タグ> という形で記述します。
多くのタグは「開始タグ」と「終了タグ」のセットで構成されます。
例：
<h1>見出し</h1> 強調 一方で、終了タグが不要なものもあります。 <img src="proxy.php?url=image.jpg" alt="画像"> このようなタグは「空要素」と呼ばれます。
HTMLの基本は、「タグで意味づけをすること」です。

入れ子構造

HTMLでは、タグの中に別のタグを入れることができます。
これを「入れ子（ネスト）構造」と呼びます。

例：

これは重要な文章です。

この場合、以下のような構造になっています。

pタグの中に
strongタグが入っている

正しい入れ子構造は次のようになります。

重要な文章

間違った例：

重要な文章

終了タグの順番が逆になると、正しく表示されない場合があります。
HTMLでは「後に開いたタグを先に閉じる」が原則です。

属性とは

HTMLには「属性（attribute）」という仕組みがあります。
属性とは、タグに追加情報を与えるものです。

例：

<a href="proxy.php?url=https://example.com">リンク</a>

この場合、以下のような構成になります。

aタグ
hrefが属性
"https://example.com"が属性値

画像タグの例：

<img src="proxy.php?url=image.jpg" alt="サンプル画像">

src → 画像の場所
alt → 画像の説明文

属性はSEOにも重要です。
特にalt属性は検索エンジンが画像内容を理解するために使われます。
正しい属性の使い方は、SEO対策としても重要なポイントです。

よくあるミス

初心者がやりがちなHTMLのミスを紹介します。

終了タグの閉じ忘れ

文章

→ 正しくは

文章

タグのスペルミス

<storong>重要</storong>

→ 正しくは

重要

属性の引用符忘れ

<a href=https://example.com>

→ 正しくは

<a href="proxy.php?url=https://example.com">

HTMLはブラウザがある程度補正してくれますが、正しい書き方を身につけることが大切です。

HTMLでよく使うタグ

ここでは、初心者がまず覚えるべき基本タグを紹介します。これらを理解することで、簡単なWebページは作れるようになります。

pタグ

pタグはWebサイト上のテキストを見やすくする際に使われるタグで、具体的には

・・・

の様にpタグで挟んだ文字が、その段落として画面上に表示されます。皆さんがいつも目にしている記事に関しても段落が付いていると、文章のまとまりが出て分かりやすく読みやすいですよね。それはWeb制作においても同じことと考えてもらえれば分かりやすいかもしれません。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>忍者CODEです</title>
</head>
<body>
<p>初心者に分かりやすく説明します！</p>
</body>
</html>

これからWeb制作を学ぶ方は、Web制作コースをご覧ください！

brタグ

brタグは「改行」をする際に使われるもので、pタグとの使い分けが少し分かりにくいですが、以下の様に覚えてもらうと良いと思います。

pタグは「段落」を表す際に使用し、伝えたいことに区切りをつけて表示する事

brタグは「改行」をする際に使用し、文章を読みやすくするために使われる

Webサイトを制作する際は、できる限りpタグの使用をおすすめしています。理由はSEOの内部対策になるのですが、Googleの検索エンジンなどはクローラーと呼ばれる情報を探すロボットの様なものがサイトを巡回していて情報を集めています。
Webサイトを制作する際は、このクローラーに正確な情報を早く見つけてもらうことが必要となります。そのためにはbrタグよりもpタグを利用した方が良いとされています。

h1～h6タグ

hタグとは、Webサイトに見出しを示す際に使用するHTMLタグです。「h」はheadingの略で見出しという意味を持っています。hタグは、h1～h6まであります。
このhタグはSEOの内部対策としても非常に重要な役割を持っており、ページのタイトルはh1タグを使用します。例えば、「HTML入門者向け情報」というページがあったとすると、そのページタイトルをh1とし、HTML入門者向けに届けたい情報の見出しをh2とします。さらに、h2タグで設定したコンテンツの詳細説明をする場合、h3を使用するという流れになります。このように、hタグの中に次の数字の大きいhタグを設定することがルールとなります。

実際にWebサイトを開いて、Ctrl+uでそのページのコードを見る事ができますので一度確認してみると分かりやすいです。

strongタグ

strongタグは、重要なテキストを強調します。 重要なポイント 見た目は太字になりますが、本来の意味は「重要であることを示す」ことです。 SEO的にも意味のある強調になります。

spanタグ

Webサイトを作成する際は、そのサイトを見る人にとって見やすく、そして分かりやすく作成する必要があります。そこで、よく使われるのが画像。Webサイトはテキストだけでなく、そのテキストを画像で表すことによって非常に分かりやすくなりますよね。HTMLでは画像ファイルを表示する際にimgタグを使用します。imgタグは、表示させたいファイル名、また画像の大きさ、そしてalt属性の設定などを行います。altの設定はHTML5で必須ではなくなりましたが、設定されている事が多いので覚えておきましょう。

imgタグ

spanタグは、文章の一部を指定するときに使います。

この部分は色を変えられます

主にCSSと組み合わせて使用します。 spanタグ自体に意味はなく、装飾目的で使われます。

aタグ

aタグとは、「Anchor（アンカー）」の略で、リンクを設置する際に使われるHTMLです。aタグを使いリンク先のURLを設定します。aタグは、主に二つの方法にて用いられることが多く、同画面にてリンク先を飛ばす場合と、別画面にてリンク先を飛ばす場合があり、それぞれ記述するコードが異なります。

liタグ

liタグはリストの項目を表します。
単体では使わず、ulやolとセットで使用します。

ulタグ

ulタグは、番号のないリストを作ります。

りんご
みかん

箇条書きに便利なタグです。

olタグ

olタグは、番号付きのリストを作ります。

手順1
手順2

手順説明などに使われます。

HTML入門講座（12問）

よくある質問（FAQ）

HTMLは難しい？

結論から言うと、HTMLはプログラミング初心者でも比較的学びやすい言語です。
HTMLは「処理を書く言語」ではなく、「文章に意味づけをする言語」です。そのため、難しい計算や複雑なロジックを理解する必要はありません。

基本的には、以下のようなシンプルな仕組みです。

タグで囲む
構造を理解する
ルールに従って書く

最初はタグの種類が多く感じるかもしれませんが、実際によく使うタグは限られています。
見出し（hタグ）、段落（pタグ）、リンク（aタグ）、画像（imgタグ）など、基本的なものから覚えていけば問題ありません。
「HTMLは難しい」と感じるよりも、「慣れが必要」という表現の方が正確です。

何日で習得できる？

HTMLの基礎は、早ければ数日〜1週間程度で理解できます。
例えば、以下のようなレベルであれば、集中的に学習すれば短期間で身につきます。

基本構造を覚える
よく使うタグを理解する
簡単なWebページを作る

ただし、「習得」の定義によって期間は変わります。

基本タグを使えるレベル → 数日〜1週間
実務レベルで使いこなす → 1〜2か月程度
SEOやアクセシビリティまで理解する → 数か月

HTMLは継続して触れることで自然と身についていく言語です。
まずは簡単なページを作ることから始めましょう。

独学は可能？

HTMLは独学でも十分に習得可能な言語です。
理由は次の通りです。

文法が比較的シンプル
書いた結果がすぐ画面に反映される
無料の学習教材が豊富

実際、多くのWeb制作者がHTMLを独学で学んでいます。
ただし、独学の場合は以下のような課題もあります。

学習の順番がわからない
モチベーションが続かない
間違いに気づきにくい

効率よく学びたい場合は、以下のことが重要です。

体系的にまとまった教材を使う
実際に手を動かしてページを作る
小さな作品を積み重ねる

HTMLはWeb制作の第一歩です。
独学でも十分可能ですが、正しい順序で学ぶことで習得スピードは大きく変わります。

HTMLの基礎が身についたら

HTMLの基礎が身に付いたら次はCSSの入門にも目を通しておきましょう!

CSSとは、HTMLを装飾するために用意されたスタイルシート言語です。この入門講座で学習したタグを指定して、様々な装飾（デザイン）を行なうことができます。

CSSの学習も終えたら一旦HTMLとCSSを使った模写コーディングを行なうことがおすすめです。まずは以下のリンクからCSS入門講座を確認してみましょう!

CSS入門講座へ進む

まとめ

こちらではWebサイトを制作する際に必須となるHTMLについて、基本構造やタグの使い方について解説をしました。HTMLは、これからWeb制作を始めようとする初心者の方でも分かりやすく、一つひとつ勉強すれば必ず身についていきます。忍者CODEではHTML入門講座から上級コースまで問題集を揃えておりますので、学習に役立てて頂ければと思います。

これからWeb制作を学ぶ方は、Web制作コースをご覧ください！

プログラミング入門講座へ戻る