HTMLとは？初心者向けにタグの基本から書き方までわかりやすく解説

WEBサイト制作やWEBデザインを学ぶとき、よく目にするのが「HTML」です。

「結局なにができるの？」「難しそう…」「プログラミングと違うの？」と感じている人も多いかもしれません。

この記事では、HTMLの基本的な役割や書き方を、初心者の方にも分かりやすく解説していきます。

まずはHTMLの基礎から、一つずつ理解していきましょう。

HTMLとは？

HTML（HyperText Markup Language）とは、WEBページの構造を作るための言語です。

文章や画像、見出し、リンクなどに「これは見出し」「これは本文」といった意味を持たせることで、WEBページ全体の骨組みを整えます。

私たちが普段見ているほとんどのWEBサイトは、このHTMLをもとに作られています。

一見ただ文字や画像が並んでいるように見えても、裏側ではHTMLによって情報の役割が細かく指定されています。

HTMLの特徴は、情報に役割を与えることです。

たとえば、HTMLでは次のように情報を整理します。

このように役割を分けることで、「見出しとして目に入りやすくする」「本文として読みやすくする」といった調整が可能になります。

HTMLは、WEBページの見た目を直接変えるというよりも、WEBサイトの土台を作る役割を担う存在です。

HTML・CSS・JavaScriptの違いと役割

WEBサイトは、HTML・CSS・JavaScriptの3つが組み合わさって作られています。

それぞれ役割が異なり、よく家づくりにたとえられます。

HTMLだけでもページは表示されますが、文字と画像が並んだだけのシンプルな状態になります。

そこにCSSを加えることで見た目が整い、JavaScriptを使うことで動きのあるWEBサイトになります。

このように、HTMLは土台、CSSは見た目、JavaScriptは動きと考えると、それぞれの違いが分かりやすくなります。

HTMLはプログラミング言語ではない？

結論から言うと、HTMLはプログラミング言語ではありません。

HTMLは「マークアップ言語」と呼ばれ、文章や画像に役割をつけて整理するための言語です。

プログラミング言語は、計算をしたり、条件によって動きを変えたりといった「処理」を行います。

一方HTMLは、「ここは見出し」「ここは本文」「ここに画像を表示する」といった、ページの構造を決めることが役割です。

HTMLでは複雑な計算や命令を書く必要はないため、WEB制作の入り口として学びやすい言語だと言えるでしょう。

【図解】これだけ覚えればOK！HTMLの基本構造

HTMLの基本構造は、「タグ・要素・属性」の3つを理解すればOKです。

この3つの役割を押さえるだけで、HTMLの仕組みが一気に分かりやすくなります。

HTMLは一見むずかしく見えますが、やっていることはとてもシンプルです。

「どこが見出しで、どこが文章か」「画像やリンクはどこか」といった情報を、ルールに沿って整理しているだけです。

下の図では、タグ・要素・属性がどのようにつながっているのかをまとめています。

全体像をイメージしながら読み進めてみてください。

1. タグ：命令を出すための「目印」

タグとは、HTMLで「この情報は何か」を伝えるための目印です。

文章や画像をそのまま書くだけでは、ブラウザはそれが見出しなのか、本文なのかを判断できません。

そこで使われるのがタグです。

タグは < > で囲まれた英単語で表され、それぞれ役割が決まっています。

HTMLでは、タグで囲まれたひとかたまりを「要素」と呼び、タグの中に追加で書かれる設定情報を「属性」といいます。

たとえば、次のようなコードを見てみましょう。

<a href=”URL”>こんにちは</a>

この例では、以下のような役割になっています。

この場合、「こんにちは」という文字がリンクとして表示され、クリックすると指定したURLに移動します。

このように、HTMLではタグ・属性・中身が組み合わさることで、WEBページの動きや構造が決まります。

次の章では、ここで触れた「要素」と「タグ」について、それぞれ詳しく説明していきます。

2. 要素：タグで囲まれた「中身」

要素とは、タグで囲まれた中身全体のことです。

HTMLでは、開始タグと終了タグで囲まれたひとかたまりを1つの要素として扱います。

たとえば、<p>こんにちは</p>という書き方では、<p>と</p>に囲まれた「こんにちは」まで含めて1つの要素になります。

見出しや段落、リンクなど、WEBページに表示される内容は、すべてこの要素の集まりで構成されています。

HTMLは、要素を正しく使い分けることで、ページの構造を分かりやすく整理できます。

要素の役割がはっきりしているほど、読みやすく、伝わりやすいWEBページになります。

3. 属性：タグに機能を追加する「設定」

属性とは、タグに追加情報を与えるための設定です。

タグだけでは伝えきれない細かな指示を補う役割を持っています。

たとえば、リンクを作るaタグでは、hrefという属性を使って「どこに移動するか」を指定します。

属性は、次のように開始タグの中に記述します。

<a href=”https://japan-design.jp/no1-design-school/“>リンク</a>

この例では、以下のような役割があります。

この設定により、「リンク」という文字がクリック可能になり、指定したURLへ移動します。

画像を表示するimgタグでは、画像の場所を示すsrcや、画像の内容を説明するaltなど、複数の属性を組み合わせて使います。

このように属性を設定することで、HTMLは表示内容や意味、リンク先などを明確に指定でき、WEBページの構造がより分かりやすくなります。

初心者が最初におさえるべき基本のHTMLタグ一覧

HTMLには多くのタグがありますが、初心者が最初に覚えるべきものは多くありません。

ここでは、WEBページを作るうえで特によく使う基本タグを厳選し、それぞれの役割と使い方を分かりやすく解説します。

見出しを作る「h1〜h6タグ」

hタグは、文章の見出しを作るためのタグです。

h1からh6まであり、数字が小さいほど重要度が高い見出しになります。

一般的に、ページ全体のタイトルにはh1、章の見出しには、章の中の小見出しにはを使います。

見出しを正しく使うことで、文章構造が整理され、読みやすいWEBページになります。

なお、この記事内の各章タイトル「見出しを作るh1〜h6タグ」は、タグを使用しています。

文章の段落を作る「pタグ」

pタグは、文章の段落を作るためのタグです。

1つの話題や内容のまとまりごとに使うことで、文章を読みやすく整理できます。

たとえば、説明文や本文はpタグで囲むのが基本です。

段落ごとにpタグを使うことで、ブラウザ上でも自然に改行され、視認性が向上します。

文章の構造を意識してpタグを使うことで、読み手にも検索エンジンにも内容が伝わりやすくなります。

リンクを設置する「aタグ」

aタグは、別のページやWEBサイトへ移動するリンクを設置するためのタグです。

aタグでは、hrefという属性を使って移動先のURLを指定します。

テキストをクリックすると指定したページに移動する仕組みです。

たとえば、関連記事や参考ページへの案内にリンクを設置すると、読者の理解を深めることができます。

画像を表示する「imgタグ」

imgタグは、WEBページに画像を表示するためのタグです。

imgタグでは、画像の場所を指定するsrc属性と、画像の内容を説明するalt属性を設定します。

特にalt属性は、画像が表示されない場合や、検索エンジン・音声読み上げにも使われる重要な情報です。

imgタグは、画像表示だけでなく、情報を正しく伝えるためにも欠かせないタグです。

箇条書きリストを作る「ul・ol・liタグ」

ul・ol・liタグは、箇条書きのリストを作るためのタグです。

情報を整理して並べたいときに使うことで、内容が一目で理解しやすくなります。

ulタグは順番のないリスト、olタグは順番のあるリストを作成します。

それぞれのリストの中身は、liタグで1項目ずつ記述します。

たとえば、手順の説明やポイントの列挙など、情報を簡潔に伝えたい場面で活躍します。

改行をするための「brタグ」

brタグは、文章の途中で改行を入れたいときに使うタグです。

改行のみを目的としたタグで、段落を作るpタグとは役割が異なります。

たとえば、住所や詩のように、意味の区切りではなく見た目上の改行が必要な場合に使われます。

brタグは終了タグが不要な点も特徴です。

次の行に表示されます

表を作成する「tableタグ」

tableタグは、表形式で情報を整理して表示するためのタグです。

料金表や比較表など、複数の情報を分かりやすくまとめたいときに使います。

tableタグの中では、行を作るtr、見出しセルを作るth、データを入れるtdを組み合わせて表を構成します。

グループ化する「div・spanタグ」

divタグとspanタグは、要素をグループ化するためのタグです。

これ自体に意味はなく、レイアウトやデザインを整えるための「箱」として使われます。

divタグはブロック要素で、段落のようにまとまりを作りたいときに使います。

spanタグはインライン要素で、文章の一部だけを装飾したい場合に使われます。

CSSと組み合わせることで、特定の範囲に色を付けたり配置を調整したりできます。

メモを残す「コメントアウト」

コメントアウトは、HTML内にメモを残すための書き方です。

コメントとして記述した内容は、ブラウザ上には表示されません。

コードの説明を書いたり、一時的に処理を無効にしたりしたいときに使います。

あとから見返したときに内容を理解しやすくなるため、開発や修正時に便利です。

HTMLでは、<!– と –> で囲むことでコメントアウトできます。

【実践】HTMLを書いてWebページを表示させてみよう

HTMLの基本を理解したら、実際に手を動かしてWEBページを表示してみましょう。

ここでは、特別なツールを使わず、パソコンに入っているメモ帳だけでHTMLを作成します。

一つずつ手順を進めれば、初心者の方でも簡単にWEBページを表示できますので、ぜひ一緒に試してみてください。

Step1：テキストエディタ（メモ帳）を開く

まずは、HTMLを書くためのテキストエディタを開きます。

Windowsの場合は「メモ帳」、Macの場合は「テキストエディット」を使用します。

スタートメニューやアプリ一覧から起動し、まっさらな画面を表示しましょう。

Step2：HTMLの基本コードを記述する

次に、メモ帳にHTMLの基本コードを入力します。

HTMLは、決まった構造に沿って記述することで正しく表示されます。

以下のコードを、そのまま入力してみてください。

このコードが、WEBページの土台になります。

Step3：「.html」の拡張子で保存する

コードを書き終えたら、ファイルを保存します。

「ファイル」→「名前を付けて保存」を選び、ファイル名を「index.html」などに設定してください。

このとき、拡張子を必ず「.html」にすることが重要です。

文字コードはUTF-8を選び、保存場所は分かりやすいデスクトップがおすすめです。

Step4：ブラウザでファイルを開いて確認する

保存したHTMLファイルを、ブラウザで開いてみましょう。

ファイルをダブルクリックするか、ブラウザにドラッグ＆ドロップすると表示されます。

見出しや文章が表示されていれば成功です。

これで、HTMLを使ってWEBページを表示することができましたね！

未経験からHTMLを習得する効率的な学習方法

HTMLは独学でも学べますが、学び方によって理解の深さや継続しやすさが大きく変わります。

ここでは、未経験からHTMLを習得する代表的な学習方法と、それぞれの特徴を紹介します。

Webサイトや書籍で独学する

HTMLは、無料の学習サイトや入門書を使って独学することも可能です。

費用をかけずに始められ、スキマ時間で自分のペースで学べる点がメリットです。

一方で、分からない部分が出てきたときにすぐ質問できず、理解が止まってしまうこともあります。

また、HTMLの書き方は学べても、WEBデザインや実務での使い方まで理解するのは難しく、途中で挫折してしまう人も少なくありません。

プロの指導が受けられるスクールで学ぶ

効率よくHTMLを身につけたい場合は、スクールやセミナーで学ぶ方法があります。

体系的に整理されたカリキュラムに沿って学べるため、「何から学べばいいか分からない」という状態になりにくいのが特徴です。

また、課題に対してフィードバックを受けられることで、理解が浅いまま学習が進んでしまうリスクも減らせます。

未経験からWEBデザイナーを養成する「日本デザインスクール」では、HTMLなどのコーディングを必須スキルとは考えていません。

HTMLやCSSの基本構造を理解したうえで、「実装を意識したデザインができること」を重視しています。

体系的なカリキュラムとフィードバックを通して、自分に合った分野を見極めながら学べるため、「コーディングが苦手で挫折しそう」という人でも、安心して学習を続けられます。

HTMLに関するよくある質問

HTMLの独学に必要な勉強時間は？

基礎的な内容であれば、数週間〜1か月ほどで理解できる人が多いです。

HTMLは「書き方を覚える」というより、「役割や構造を理解する」ことが大切です。

毎日少しずつ触れながら、実際にコードを書いて確認することで、無理なく身につきます。

ただし、独学では疑問点をそのままにしてしまい、挫折するケースもあります。

必要に応じて、解説記事やスクールを併用するのも一つの方法です。

スマホでもHTMLは書ける？

スマホでもHTMLを書くことは可能ですが、学習効率は高くありません。

専用のコードエディタアプリや学習サイトを使えば、簡単なコードを書くことはできます。

ただし、画面が小さく操作もしづらいため、長時間の学習や実践には不向きです。

HTMLをしっかり理解したい場合は、パソコンでテキストエディタとブラウザを使って学ぶのがおすすめです。

WebデザイナーになるにはHTMLだけで十分？

HTMLだけでは充分とは言えませんが、基礎としての理解はとても重要です。

WEBデザイナーには、デザインツールの操作やレイアウト設計など、幅広いスキルが求められます。

その中でHTMLは、「実装を意識したデザイン」を考えるための土台となります。

必ずしもコーディングができる必要はありませんが、HTMLの仕組みを理解しておくことで、デザインの質や仕事の進めやすさが大きく変わります。

まとめ

本記事では、HTMLの基本的な役割や仕組み、初心者が押さえておきたいタグについて解説しました。

HTMLは、WEBページに表示する情報へ役割を与え、サイト全体の構造を整えるための言語です。

タグ・要素・属性の考え方を理解することで、HTMLの仕組みが分かりやすくなります。

最初から完璧を目指さず、基本構造とよく使うタグから少しずつ慣れていくことが大切です。

ぜひ実際に手を動かしながら、HTMLに触れてみてください。