ホーム > 記事一覧 > 【初心者向け】HTMLの基本を徹底解説｜初心者が最初に覚えるタグと書き方

【初心者向け】HTMLの基本を徹底解説｜初心者が最初に覚えるタグと書き方

投稿日：2025/3/12

最終更新日：2025/3/12

HTMLはWebサイトを作る上で基本中の基本で必要となってくる知識です。
全てのWebサイトでHTMLが使われています。

しかし、HTMLはプログラミングではなくWebサイトの形を整えるためのマークアップ言語と言われるジャンルです。

つまり、プログラミングでよくあるような変数に代入したりfor文を使ってコードを書くといったことはありません。

Webサイトを作る場合で初心者であってもとっつきやすい言語となっています。ちなみにこのサイトもHTMLが使われています。

今回の記事では以下の項目について解説します。

HTMLファイルの作り方
HTMLの基本構造とその考え方
初心者がはじめのうちはよくしてしまうミス

HTMLとは？全体像を解説

HTML（HyperText Markup Language）は、Webページを作るための基本的な言語です。文章の構造や見出し、段落、リンク、画像などの要素をマークアップ（タグで囲む）することで、ブラウザが内容を正しく表示できるようにします。

HTMLは単独でデザインや動きを作ることはできませんが、CSSで見た目を整えたり、JavaScriptで動きを加えることで、ユーザーの行動に伴った魅力的なWebサイトを作れます。

Yama

私の場合、最初は難しく見えたのですが、すぐに理解できるようになりました。

HTMLファイルの作り方・HTMLの基本構造

HTMLファイルは、Webページの基本となるファイルで、まずテキストエディタ（VS Codeなど）で新規ファイルを作り、「.html」という拡張子で保存します。基本構造は決まっており、まず最初に !DOCTYPE html を書き、HTML5であることを宣言します。

次に html タグで文書全体を囲み、 head タグ内にタイトルや文字コードを指定します。ページのタイトルは title タグで設定します。

本文は body タグ内に書き、見出しは、段落は p タグで作ります。リンクは aタグ、画像は img タグを使います。これらの基本を押さえると、簡単なWebページを作成してブラウザで表示できるようになります。

初心者である場合はまず、この基本構造を覚えて少しずつタグを試すと理解が早まります。文字だけではわかりにくい部分があるので、画像で説明いたします。

Yama

実際にHTMLファイルを作成し、コードも書いていきましょう。

[前提]

・VSCode内でLive Serverの立ち上げ方を知っている

まずはデスクトップにフォルダを作りましょう。名前は「テスト」で作成します。

次にVS Codeを開きましょう。以下の画像のようなものが出てくるはずです。

では次に先ほど作成した「テスト」という名前のフォルダを開きましょう。開く方法としては、command + o を押すとショートカットでフォルダを開くことができますが、他の方法もあります。

マウスをパソコンの画面の上にすると「ファイル」という名前が表示されます。それをクリック、

それから「開く」をクリックしましょう。

それから「デスクトップ」を探すと「テスト」というフォルダを見つけることができます

すると先ほどと同じような画面が出てくるはずです。

ではHTMLを書くためにHTMLファイルを作成してみましょう。まず左上にあるファイルのマークをクリック。このような画像が出てくるはずです。
ここで左上に「テスト」と表示されていたら、ちゃんとファイルを開くことができています。

次にファイル作成ボタンを押します。ファイルの形をしたものにプラスマークがあるボタンです。

するとこんなものが表示されます。

この状態ではファイルの名前を決めることができるので「index.html」と入力しましょう。それからenterを押すとこのような画面が表示されます。

それから「html」とファイル内に書いてみましょう。以下のような選択肢が出てくるはずです。

html:5を選択してenterを押すと以下のようなコードが自動で記述されるはずです。

            
      <!DOCTYPE html>
      <html lang="ja">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
      </head>
      <body>
        
      </body>
      </html>

Yama

次のステップは「タグ」を利用してコードを書き加えます。

ここまできたらHTMLのコードを書く準備は完了です。画像をなんでも良いので「テスト」に保存し、以下のコードを記述してみましょう。

              
      <!DOCTYPE html>
      <html lang="ja">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>ここにタイトルを表示</title>
      </head>
      <body>
        <h1>h1タグです</h1>
        <p>pタグです</p>
        <a href="">これはリンクです</a>
        <img src="./HTML5_Logo_256.png" alt="HTMLのロゴです">
        
      </body>
      </html>

いよいよLive Serverを立ち上げる時です。右下のGo Liveというボタンを押して起動してみると以下のような画面が表示されます。

Yama

初めてのHTMLコードの作成です！おめでとうございます！

よく使われるタグ一覧

h1タグはWebサイトのタイトルなどによく使われます。

                
        <h1>こんにちは!</h1>

pタグは文章を書く場合に使われます。

                
        <p>唐揚げ</p>

aタグとはリンクを貼ることができます。href=""のところにリンク先を書きます。例えばYouTubeにリンクを飛ばせたかったら、href="https://www.youtube.com/"という風に書かなくてはいけません

                
        <a href="https://www.youtube.com/">YouTubeへ移動</a>

brタグを使うとpタグの中で改行することができます。これだけで改行することができます。

                
        <br>

divタグはレイアウトに使用されます。

                
        <div>divタグです</div>

        <div>
          <h1>タイトル</h1>
          <p>このように使います</p>
        </div>

imgタグは画像を貼る際に使われます。src=""に画像のリンク先を貼ります。
またaltはその画像を説明に利用されます。以下は画像がフォルダの中で/img/天気.pngに位置する場合を想定しています。

                
        <img src="/img/天気.png" alt="天気の画像です">

Classとidの違いとは

補足：CSSとはHTMLで書いたページにデザインを施すために使用される言語です。

HTMLやCSSにおけるclassとidの違いは、主に「使い回し」と「一意性」にあります。classは同じデザインや役割を複数の要素に適用したいときに使います。

たとえばボタンや見出しなど、共通のスタイルを持たせたい場合に便利で、1つの要素に複数のclassを指定することも可能です。これはとても便利です。一度CSSでデザインを考えて、HTML内でclassを指定するだけでそのデザインが適応されます。

以下の例はclass名をadにした例です。つまりこのクラスはad = 広告を表示させたいため名付けたclass名です。class名は自分にとってわかりやすい名前をつけましょう

                
        <div class="ad">
          <h1>コンテンツ</h1>
          <p>広告を表示</p>
        </div>

一方、idはページ内で一意（1回のみ）でなければならず、その要素を特定するために使われます。例えばページ内リンクで使用されるのが、このidです。またJavaScriptで特定の要素を操作したり、ページ内リンクの移動先として指定する場合によく用いられます。ページ内リンクとは記事にある目次をクリックするとその内容の部分に移動する動作を意味します。

またCSSの優先順位はidの方がclassより高く、同時に指定された場合はidが優先されます。基本的には、デザインや共通処理にはclass、特定要素の識別にはidを使うのが適切です。

以下の例はこの部分が目次の上から3つ目の内容であると想定しています。そのためidを3と書きました。これだけではページ内リンクを実装できません。

                
        <div id="3">
          <h1>上から3つ目のタイトル</h1>
          <p>ページ内リンクとは記事にある目次をクリックするとその内容の部分に移動する動作を意味します</p>
        </div>

Yama

同じようなデザインを適用したい場合は「class」、ページ内リンクのようなそのページの1つだけ存在する要素に特定のスタイルや操作を適用したい場合は「id」を使用しましょう。

初心者がつまずきやすいポイント

HTMLやCSSを学び始めた初心者がつまずきやすいポイントはいくつかあります。

まず多いのが、タグの役割を正しく理解せず、div ばかり使ってしまうことです。見た目は整っても、構造や意味が分かりにくくなり、SEOやアクセシビリティに悪影響を与えます。

具体的にどんな使い方をすればいいかとページ間を移動するためのナビゲーションをheaderタグで作成したり、コンテンツのメイン部分にはmainタグを使用し、Footerタグを使用することでWebサイトページの1番下にある、著作権についてやその他のページのリンクを貼ることに適しています。

次に、classとidの使い分けです。idは一意である必要があるのに、複数の要素に同じidを付けてしまうケースがよくあります。

classはデザインのために、idはデザイン以外のために

と考えるとこの部分でエラーを起こしてしまう可能性を減らすことができます。

また、余白の調整でmarginとpaddingの違いに混乱しやすく、意図しないレイアウト崩れを招きます。これを発生させないためにはmarginとpaddingに関する画像を検索して、イメージで覚えるとどっちがどっちかを覚えることができます。

これらのつまづきやすいポイントは気をつけていてもミスをしてしまうことはあるので、もし自分が思っているものとは違うものが表示されていたら、これらのポイントをまず確認することをお勧めします。

Yama

これらを意識するだけでも、ミスをする回数を減らすことができ、作業効率が上がります。

まとめ

以上がHTMLの基本です。初めてのプログラミングや初めてHTMLに触れる場合だと戸惑う部分があると思います。これらは自分で実際に試してみることで身に付けることができます。1回や2回でできるようになることは非常に稀な例です。完全に身につけるためには、時間が解決してくれます。何度も自分で作ってみることでその技術を身につけることができます。

最後までお読みいただきありがとうございました。以下のリンクではHTML中級レベルに必要な知識を解説しています。是非ご確認ください。