HTMLとは？初心者向けにHTMLタグの基本を簡単に解説

Webページを作成したいけれど、「HTMLとは何？」という段階の方へ。この記事では、HTMLの仕組みとタグの基本を、初めての方にもわかりやすく解説します。

HTML（エイチティーエムエル）は「HyperText Markup Language」の略で、Webページの構造を作るための基本的な言語です。IT業界の専門用語に感じるかもしれませんが、実は0からでも始めやすく、ネット上のほぼすべてのページで使われています。

そもそもHTMLとは？Webページ作成の土台となる言語

HTMLとは、Webページの「骨格」を作るためのマークアップ言語です。私たちがネットで見る文章・画像・リンクなどは、すべてHTMLのタグで定義されています。

• HTMLの「タグ」で文章や画像に意味を与える

• ブラウザがそのタグを読み取り、見やすく表示する

• HTMLファイルがWebページとしてネット上に公開される

つまりHTMLの仕組みは、人が書いた文章をブラウザが理解できる形にする技術です。タグは文章の構造を明確にするための“印”のようなもので、ITの基礎を支える重要な概念といえます。

HTMLを学ぶと、Webページを構成する「子要素（親子関係）」の考え方も理解できるようになります。これは「見出し → 段落 → リスト」といったように、構造的に整理された情報をブラウザに伝えるための大切な考え方です。

WebページにおけるHTMLの役割

HTMLの役割をわかりやすく言えば、Webページという建物の骨組みを作る仕事です。文章や画像の配置、リンクの設定など、すべての基礎構造をHTMLで作ります。

Webサイト制作では、HTMLが「構造」を、CSSが「デザイン（見た目）」を、そしてJavaScriptが「動き」を担当します。この3つを組み合わせることで、ITサービスや企業サイトなど、今のネット上のページは成り立っています。

HTMLは静的な構造を記述する言語であり、JavaやJavaScriptのように動作を制御するプログラミング言語とは違います。Javaはシステムやアプリ開発で使う「プログラム言語」、一方でJavaScriptはWebブラウザ上での動きを制御する「スクリプト言語」です。HTMLとはこの点で明確に異なり、表示構造を定義することに特化した言語です。

文章構造を作るHTMLと見た目を整えるCSS

HTMLとCSSはよくセットで登場しますが、その役割には明確な違いがあります。

HTMLで構造を作り、CSSで見た目を整えることで、保守性と拡張性の高いWebページになります。たとえばサイト全体のデザインを変更したいときは、HTMLを触らずCSSファイルを更新するだけで済みます。この考え方はHTML5でも重視されており、デザインと構造を分けることがWeb制作の基本になっています。

動きを加えるJavaScriptとの関係性

HTMLとCSSでWebページの見た目を整えたあと、JavaScriptを使うと“動き”をつけられます。たとえば以下のような動作は、HTMLだけでは実現できません。

• ボタンをクリックするとメニューが開く

• 画像がスライドショー形式で切り替わる

• スクロールに合わせて要素がアニメーション表示される

これらはJavaScriptの働きによるものです。HTMLが「構造」、CSSが「見た目」、JavaScriptが「動き」を担当することで、ネット上のページがインタラクティブになります。3つを組み合わせることで、ユーザーが気持ちよく使えるWeb体験が生まれます。

Webページの骨格！HTMLの基本的な書き方

HTMLは0からでも学べるシンプルな構文が特徴です。最初に覚えたいのは、「タグ」「要素」「属性」という3つのルール。どれもWebページを正しく作成・表示するための基本です。

「< >」で囲まれた「タグ」がHTMLの基本

HTMLでは、タグを使って文章に意味を持たせます。タグは半角の不等号「< >」で囲んで記述し、ブラウザがそれを解釈して表示します。

<p>これは段落です。</p>

この例では、<p>が段落の開始タグ、</p>が終了タグです。このセット全体を「p要素」と呼び、文章構造を作る基本となります。HTMLの仕組みでは、こうしたタグを積み重ねることでWebページ全体を構成します。

開始タグと終了タグで構成される「要素」

ほとんどのHTMLタグは、開始タグと終了タグのペアで1つの要素を作ります。要素の中にさらに別の要素を含めることもでき、これを「入れ子構造」といいます。

たとえば次のようなコードです。

<ul>
  <li>会社概要</li>
  <li>サービス紹介</li>
  <li>お問い合わせ</li>
</ul>

<ul>は「箇条書きリスト」を作るタグ、<li>はその中の「子要素（項目）」を表します。このようにタグの親子関係を意識して書くと、構造の理解が深まり、整理されたHTMLコードになります。

タグに補足情報を与える「属性」

タグの機能を広げたいときは「属性」を使います。属性は開始タグの中に記述し、タグの動作や表示を細かく指定します。

<a href="<https://example.com>">詳細はこちら</a>

この場合、href属性がリンク先のURLを指定しています。また、画像タグではsrcで画像のパスを、altで代替テキストを設定します。これにより、ネット環境が不安定でも正しく情報を伝えることができます。

これだけは覚えたい！基本的なHTMLタグ一覧

HTMLには数多くのタグがありますが、初心者がまず理解すべき「基本タグ」は次の通りです。

これらを組み合わせるだけで、基本的なWebページの形を作成できます。特に<li>はナビゲーションメニューや商品一覧など、多くのWebサイトで使われる重要なタグです。HTML5では、これらのタグに加えて、<header>や<footer>など構造を明確にする要素も追加されました。

<h1>〜<h6>：見出しを設定するタグ

見出しタグは、h1からh6までの6種類があり、html文書において文章の階層構造を定義する際に使用します。

h1タグが最も重要度の高い大見出しを示し、h6タグが最も重要度の低い小見出しを示します。これらのタグを適切に用いることで、ブラウザは文章の構造を正確に理解し、検索エンジンもコンテンツのテーマを把握しやすくなります。

例えば、ページの主題はh1で記述し、その下の小項目をh2、さらに詳細な内容をh3とすることで、読み手にも分かりやすい情報構造を提供できます。

見出しレベルのスキップや不適切な使用は、検索エンジンの評価を下げたり、ユーザーの利便性を損ねる可能性があるので注意が必要です。

<p>：文章の段落を作るタグ

<p>タグは「Paragraph（段落）」の略で、文章のひとまとまりのブロックを作成するために使用します。 Webサイトのブログ記事や説明文など、テキストの大部分はこのタグで囲まれます。 ブラウザはタグで囲まれた部分を一つの段落として認識し、タグの前後で自動的に改行と余白を設けて表示します。 そのため、文章の区切りが明確になり、可読性が向上します。 複数の段落を作成する場合は、その数だけタグを繰り返し使用します。

<a>：他のページへのリンクを貼るタグ

<a>タグは「Anchor」の略で、他のWebページや同一ページ内の特定の場所へ移動するためのハイパーリンクを作成します。 リンク先はhref属性（HypertextReferenceの略）で指定し、例えばテキストのように記述します。 この場合、「テキスト」部分がクリック可能なリンクになります。 また、href属性の値にmailto:アドレスと記述することで、指定したメールアドレス宛のメール作成画面を起動させることも可能です。 Webサイトのナビゲーションを構築する上で不可欠なタグです。

<img>：画像を表示するタグ

<img>タグはImageの略で、Webページ上に画像を表示するために使います。 このタグは終了タグを必要としない空要素です。 画像を表示するには、src属性で画像の場所（URLやファイルパス）を指定する必要があります。 また、何らかの理由で画像が表示できない場合に代わりに表示されるテキストをalt属性で指定することが推奨されます。 このalt属性は、視覚障がいのあるユーザーが利用するスクリーンリーダーによって読み上げられるため、アクセシビリティの観点からも重要な役割を果たします。

<ul>, <ol>, <li>：箇条書きリストを作成するタグ

箇条書きのリストを作成するには、ul、ol、liの3つのタグを組み合わせて使用します。 ulは順序のないリスト（UnorderedList）で、各項目の先頭に黒丸などの記号が表示されます。 一方、olは順序のあるリスト（OrderedList）で、各項目に1、2、3といった連番が自動的に振られます。 どちらのリストも、個々のリスト項目はli（ListItem）タグで囲んで表現します。 これらのタグは、複数の項目を並べて表示する際に、情報を整理し見やすくするために役立ちます。

3ステップで簡単！HTMLファイルを作成してブラウザで表示する方法

HTMLは、プログラミング経験がない初心者でも0から作成できる言語です。
特別な開発ツールを使わなくても、パソコンに入っているテキストエディタがあればすぐに始められます。

ここでは、実際にHTMLファイルを作成し、ブラウザでWebページとして表示させるまでの手順を3ステップで解説します。
これを一度体験するだけで、「HTMLとは何か」「HTMLの仕組み」「タグがどのように表示に関係するのか」がぐっと理解しやすくなります。

ステップ1：テキストエディタでHTMLコードを書く

まず、HTMLを記述するためのテキストエディタを開きます。
Windowsなら「メモ帳」、macOSなら「テキストエディット」でOKです。
（※macOSの場合は「フォーマット」メニューから「標準テキストにする」を選んでおくと安全です。）

エディタが開いたら、以下のコードをそのまま入力してみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>はじめてのHTML</title>
</head>
<body>
  <h1>こんにちは、HTML！</h1>
  <p>これはHTML5で作った最初のWebページです。</p>
  <ul>
    <li>HTMLとは何かを学ぶ</li>
    <li>タグの基本を理解する</li>
    <li>ブラウザで表示して確認する</li>
  </ul>
</body>
</html>

このコードは、HTML5の最も基本的な構造です。

• <!DOCTYPE html>：HTML5であることを宣言します。

• <html lang="ja">：Webページ全体を囲むタグで、言語を日本語に指定しています。

• <head>：ページ情報（文字コードやタイトルなど）を設定する部分。

• <body>：実際にブラウザに表示される内容。見出し・文章・リストなどがここに入ります。

「タグ」というのは、<h1>や<p>のように、角かっこで囲まれた命令文のことです。
ブラウザはこのタグを読み取り、「どこが見出しか」「どこが段落か」を理解して画面に表示します。
これがHTMLの基本的な仕組みです。

ステップ2：拡張子を「.html」にして保存

次に、書いたコードを保存します。
このときに注意してほしいのが「ファイル名」と「文字コード」です。

1. ファイル名の最後を .html にする（例：index.html）

2. 文字コードを UTF-8 に設定する

UTF-8はHTML5で標準の文字コードです。これを設定しておくことで、ブラウザが正しく日本語を認識し、ネット上でも文字化けせずに表示されます。
Windowsのメモ帳なら「名前を付けて保存」時に、文字コードの欄で「UTF-8」を選択します。
Macの場合も同様にUTF-8を選ぶことができます。
保存する場所は、デスクトップなどわかりやすい位置で問題ありません。

これで、あなたのパソコン上に“はじめてのWebページ”の元となるHTMLファイルが完成しました。

ステップ3：ブラウザで開いてWebページとして表示する

最後に、そのファイルをブラウザで開いてみましょう。
保存したindex.htmlをダブルクリックすると、Google Chrome、Microsoft Edge、Safariなどのブラウザが起動し、先ほど入力した内容が画面に表示されます。

もし次のような表示になっていれば成功です。

こんにちは、HTML！

これはHTML5で作った最初のWebページです。

・HTMLとは何かを学ぶ

・タグの基本を理解する

・ブラウザで表示して確認する

もし、画面が真っ白だったり、文字化けしている場合は次の点をチェックしてみてください。

• ファイル名がindex.htmlなど「.html」で終わっているか

• <html>や<body>などのタグを閉じ忘れていないか

• <meta charset="UTF-8">の記述が抜けていないか

ブラウザはHTMLを上から順に読み取り、構造を解釈してWebページとして表示します。
つまり、あなたが書いたHTMLのタグ1つ1つが、そのまま画面上の要素に反映されているということです。

このように、HTMLは特別なソフトを使わなくても、ファイル1枚でネットの仕組みを体験できる言語です。
まずは「書く → 保存 → 表示」の流れを試してみるだけで、Webの構造を自分の手で理解する第一歩になります。

まとめ

HTMLとは、Webページの構造を定義する基本言語であり、CSS・JavaScriptとともに現代のネットを支える基礎技術です。HTMLのタグを理解すると、Webの仕組みが見えるようになり、ITの世界で使われている多くの概念がスムーズに理解できます。

初心者の方でも、0からHTML5の基本を学び、タグを使いこなせば、自分でWebページを作成しブラウザで表示するところまで到達できます。

株式会社デパートでは、こうしたHTMLやWeb構造を熟知し、さらにアクセシビリティやコンポーネント設計に至るまで、構築だけでなく運用や改修も効率化しています。「サイトの構造を見直したい」等、まずはお気軽にご相談ください。