HTML入門

HP開発日記

初心者のための基本ガイド

導入

Webサイトの仕組みを理解する上で欠かせないのが「HTML（HyperText Markup Language）」です。HTMLは、Webページの構造を記述するための言語であり、見出し・段落・画像・リンクなど、ページに表示される要素を定義する役割を担っています。この記事では、これからWeb制作を学ぶ方のために、HTMLの基本をステップごとに解説します。

※使用環境：Windows 11 / MacOS 最新版、ブラウザはGoogle Chrome、テキストエディタはVisual Studio Codeを想定

手順解説

HTMLを理解するためには、以下の流れで学ぶのが効率的です。

  1. HTMLファイルの作り方を理解する
  2. 基本構造を知る（doctype宣言、head要素、body要素）
  3. 代表的なタグを学ぶ（見出し・段落・リンク・画像など）
  4. 実際にブラウザで表示して確認する

これらを一つずつ具体例を交えながら解説します。

HTMLの基本構造

まずはHTMLの骨組みを理解しましょう。

ここからコード（HTMLの基本構造を示すサンプル）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>はじめてのHTML</title>
</head>
<body>
  <h1>こんにちは、HTML！</h1>
  <p>これは最初のWebページです。</p>
</body>
</html>

ここまでコード

はじめてのHTML

こんにちは、HTML！

これは最初のWebページです。

ポイント解説

  • <!DOCTYPE html> はHTML5であることを宣言します。
  • <html> はページ全体を囲むタグです。
  • <head> 内にはページの情報（タイトルや文字コードなど）を記述します。
  • <body> 内に実際に画面に表示される内容を書きます。

よく使う基本タグ

次に、実際にWebページでよく使うタグを紹介します。

見出しタグ


<h1>大見出し</h1>
<h2>中見出し</h2>
<h3>小見出し</h3>

大見出し

中見出し

小見出し

段落タグ

<p>これは段落です。文章を区切るときに使います。</p>

これは段落です。文章を区切るときに使います。

リンクタグ

<a href="https://www.example.com">サンプルサイトへ移動</a>
サンプルサイトへ移動

画像タグ

<img src="sample.jpg" alt="サンプル画像">
サンプル画像

動作確認／実用方法

  1. 上記コードをテキストエディタにコピーして「index.html」として保存します。
  2. 保存したファイルをブラウザ（Chromeなど）で開くと、自分が書いたHTMLが反映されます。
  3. コードを少しずつ書き換えることで、見出しや画像がどのように表示されるかを確認できます。

実用的な活用例

  • 自己紹介ページを作成して名刺代わりに使う
  • 画像やリンクを組み合わせて簡単なポートフォリオを作成
  • CSSやJavaScriptと組み合わせて、よりデザイン性・機能性のあるWebページに発展

まとめ

この記事ではHTMLの基本的な書き方と代表的なタグについて紹介しました。HTMLはWeb制作の出発点であり、CSSやJavaScriptと組み合わせることでより豊かな表現が可能になります。まずは基本構造とタグをしっかり理解し、実際に手を動かしてWebページを作成してみましょう。

実際にコードを使うならここから↓
オンラインHTML/CSS/JSエディタ

コメント