HTMLとは？初心者向けにやさしく解説する超入門ガイド

HTML
2025.09.24

こんにちは！
駆け出しエンジニアのまるです👓🦍

今回は 「HTMLとは 初心者の方が最初に知っておきたい基本」を、
はじめて学ぶ方向けに、わかりやすく解説していきます。

こちらの記事「はじめてのプログラミング体験｜HTMLで「こんにちは」を表示する超入門ガイド」では、HTMLを書いて「こんにちは」と画面に表示する体験をしました。
しかし、「そもそもHTMLって何をしているの？」と疑問に思った方も多いはずです。

そこでこの記事では、
HTMLの役割・基本の考え方・最低限知っておきたいルールを整理していきます💡

HTMLとは？初心者が最初に知るWebページの土台

HTML（エイチティーエムエル）は、
Webページを作るための”土台（骨組み）”になる言語です。

たとえば、ページに書かれている文章が、
・見出しなのか
・段落なのか
・リンクなのか
といった「意味」を、コンピュータに伝える役割を持っています。

 👉言いかえると、HTMLは
「Webページの設計図」や「骨組み」のような存在です。

お家を建てるなら、まずは骨組み！
Webページも同じで、HTMLはその“柱”なんだよ！

HTMLとは何かを理解するための基本｜タグとはなに？

HTMLでは、「タグ」と呼ばれる特別な記号を使ってコードを書きます

たとえば、次のコードを見てください👇️

<p>こんにちは！これがはじめてのコードです。</p>

ここで使われている<p>は「段落」を表すタグです。
そして</p>は、その段落の終わりを意味します。

このように、タグで文字を囲むことで
「ここは段落ですよ」とコンピュータに伝えることができます。

HTMLタグを書くときの基本ルール

HTMLのタグには、いくつかの基本ルールがあります。

  • タグは半角英数字で書く
  • タグの中に別のタグを入れることがある（これを「入れ子」と呼ぶ）
  • タグに追加情報を与えることができ、それを「属性」という

最初はすべて覚えなくて大丈夫です。
「こういう決まりがあるんだな」と知っておくだけでOKですよ。

HTMLとは？初心者向けHTMLファイルの作り方とルール

以前のこちらの記事で「hello.html」というファイルを作ったのを覚えていますか？

実は、HTMLファイルの名前の付け方にもルールがあります。

たとえば👇️

  • ファイル名には必ず .html をつける
  • 日本語や空白は使わない
  • 記号は「-」か「_」を使う
  • 大文字・小文字を区別する環境もあるので、小文字で統一する

これらを守ることで、
ブラウザが正しくファイルを読み込めるようになります。

index.htmlってなに？

Webサイトの中で、特別な意味を持つファイル名があります。
それが index.html です。

index.html は、
そのフォルダを開いたときに最初に表示されるページになります。

つまり、URLを入力するときに
/index.html と書かなくても,自動で表示される仕組みです。

そのため、トップページには
index.htmlを使うのが一般的です。

HTMLファイルの基本構造を見てみよう

では、実際のHTMLコードをもう一度見てみましょう👇️

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>はじめてのコード</title>
</head>
<body>
  <p>こんにちは！これがはじめてのコードです。</p>
</body>
</html>

このコードは、一見すると難しそうですが、
それぞれにちゃんと役割があります。

  • <!DOCTYPE html>
    → この文書がHTMLで書かれていることを宣言
  • <html>〜</html>
    → HTML文書の全体
  • <head>〜</head>
    →ページ情報を書く場所
  • <meta charset=”UTF-8″>
    → 文字コード化けを防ぐ設定
  • <title></title>
    →ページのタイトル。（検索結果にも表示される）
  • <body>〜</body>
    →実際に画面に表示される内容

まずは「HTMLはこういう形なんだな」と
全体の構造を掴むことが大切です。

このように、HTMLとは初心者にとってはWeb制作の入口となる大切な存在です。

まとめ：HTMLはWeb制作の第一歩

ここまでの内容を整理してみましょう。

  • HTMLはWebページの骨組みを作る言語
  • タグを使って意味をコンピュータに伝える
  • ファイル名にはルールがある
  • 基本構造は <html> <head> <body>

今日は「骨組み」を学びました。

次は“家具やインテリア（タグの種類）”を置いて、
ページをもっと楽しくしていこう！

もっと学びたい人へ

この記事では、HTMLとは何か・基本の考え方を中心に解説しました。
もし「実際に手を動かしながら学んでみたい」と感じた方は、
次の学習サービスも参考になります。

Progate（プロゲート）
👉️https://prog-8.com/

Progateは、スライドを見ながらコードを書いて進められる学習サービスです。
僕自身も、HTMLを学び始めたころはProgateを使って基礎を身に着けました。

「いきなり難しい本や動画は不安…」という初心者の方でも、
HTMLのタグや構造を感覚的に理解しやすいのが特徴です。

まずは「HTMLってこういうものなんだ」と体験する目的で、軽く触ってみるだけでも十分勉強になりますよ。

コメント