こんにちは！駆け出しエンジニアのまるです👓🦍
今回は 「HTMLってなに？」 という初心者の方向けに、わかりやすく解説していきます。
HTMLとは？
HTML（エイチティーエムエル）は Webページを作るための土台 になる言語です。
ページに書かれた文章や文字列が「見出しなのか」「段落なのか」「リンクなのか」といった意味を、コンピュータに伝える役割を持っています。
👉言いかえると、HTMLは「Webページの骨組みを作るための設計図」のような存在なんです。
お家を建てるなら、まずは骨組み！Webページも同じで、HTMLはその“柱”になるんだよ！
タグとは？HTMLの基本の書き方
HTMLは「タグ」と呼ばれる特殊な記号を組み合わせてコードを書きます。
たとえば次のコードを見てください。
<p>こんにちは！これがはじめてのコードです。</p>
ここで<p>は「段落」を表すタグ、</p>はその段落の終わりを表すタグです。
このように、タグで文字を囲むことで「ここは段落ですよ」とコンピュータに伝えることができます。
タグを書くときの基本ルールは次のとおりです。
- タグは半角英数字で書く
- タグの中にさらにタグを入れることがあり、これを「入れ子」と呼ぶ
- タグに追加の情報を与えることができ、その情報を「属性」という
HTMLファイルの作り方とルール
以前のこちらの記事で「hello.html」というファイルを作ったのを覚えていますか？
実は、この ファイル名の付け方にもルール があります。
たとえば、
- ファイル名には必ず「．html」という拡張子をつける
- 日本語や空白は使わない
- 記号は基本的に「-」か「_」だけにする
- 大文字と小文字を区別する環境もあるので、小文字で統一する
さらに、Webサイトの最初に表示させるファイルは特別に 「index.html」 という名前にします。これによってURLを入力するときに「/index.html」と書かなくても自動で表示されるんです。
こうしたルールを守ることで、作ったファイルが正しくWebブラウザに表示されるようになります。
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″> … 文字コードをUTF-8に指定（文字化け防止のため）
- <title>はじめてのコード</title> … ページタイトル。検索結果にも表示される
- <body>〜</body> … 実際にブラウザに表示される本文部分
まとめ：HTMLはWeb制作の第一歩
ここまで学んだ内容を整理すると、
- HTMLは Webページの骨組み を作る言語
- タグを使って「見出し」「段落」「リンク」などを指定する
- ファイル名にはルールがあり、トップページは「index.html」にする
- HTMLの基本構造は <html>, <head>, <body> でできている
ということがわかります。
今日は“骨組み”を学んだね！次は“家具やインテリア（タグの種類）”を置いて、ページをもっと飾っていこう！
コメント