この記事では、HTMLの基本的な構造やタグの役割を丁寧に説明しています。
初心者がつまずきやすいポイントもクリアにしながら、一歩ずつ自分のWebページを作れるようになるサポートをします。
例えば、以下のような疑問に答えます：
- HTMLの基本構造ってどうなっているの?
- タイトルや本文はどこに書くの？
- 見出しや段落のタグって何？
記事の中で紹介するサンプルコードをそのまま試せば、すぐに「自分だけのWebページ」を作れるようになります！
ぜひ一緒に、HTMLの最初の一歩を踏み出してみましょう！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>はじめてのHTML</title>
</head>
<body>
<h1>Hello World！</h1>
<p>これが最初のHTMLページです。</p>
</body>
</html>
各部分の説明
-
<!DOCTYPE html>
- これはHTML5で書かれていることをブラウザに知らせる宣言です。
- 常にHTML文書の一番上に記述します。
-
<thtml>と</html>
- 常にHTML文書全体を囲むタグです。
- すべてのHTMLコードはこの中に書きます
-
<thead>と</head>
- Webページの「頭」にあたる部分で、タイトルや文字コードなどの情報を記述します。
- 直接ページに表示されない設定情報をここに書きます。
-
<meta charset="UTF-8>;
- ページで使用する文字コードを指定します。
- UTF-8を指定すると、日本語など多言語に対応できます。
-
<title>と</title>
- ブラウザのタブに表示されるページのタイトルを指定します。
- サイトのテーマや内容を簡潔に表現します。
-
<h1>と</h1>
- 見出しを表すタグです。h1は一番大きな見出しを表します。
-
<p>と</p>
- 段落（パラグラフ）を表すタグです。
- テキストを整理して表示するのに使用します。
実際にやってみよう
このコードをコピーして、テキストエディタ（例: メモ帳やVS Code）に貼り付けて「index.html」として保存します。
そのファイルをブラウザで開くと、以下の内容が表示されます。
初心者向けのポイント：
- タグ（<タグ名>）は「開く」と「閉じる」ペアで使う。
- タグの中に内容を書くと、それがブラウザに表示される。
- 必ず一つ一つのタグの役割を確認しながら進める。
次のステップとして、[CSS]を学ぶとさらに楽しくなります！
次のステップはこちら:初心者でもすぐできる！簡単CSS入門
初心者講座:目次
- 初心者大歓迎！HTMLを使ってWebページを作ってみよう
- 初心者でも簡単！HTML基本構文
- 初心者でもすぐできる！簡単CSS入門
- CSSのClassとIDを完全理解！違いと使い分けを解説
- 初心者必見！HTMLの<div>タグとは？基本と使い方を解説
- 初心者向け！HTML見出しタグでコンテンツを整理する方法
- 段落タグ<p>とは？基本の使い方から注意点まで
- Webデザインの第一歩！文字と背景を自由にカスタマイズしよう
- 初心者必見！marginとpaddingの違いを徹底解説
- marginとpaddingを完全理解！CSSで余白を自在に操る方法
- HTMLの<a>タグをマスターしよう！リンクの基本と応用テクニック
- HTMLで画像を表示しよう！<img> タグの基本と使い方
- HTMLのリストタグを学ぼう！箇条書き・番号付きリスト・定義リストの使い方
- HTMLで表を作ろう！基本の<table>タグをマスターしよう
- 「初心者大歓迎！HTMLを使ってWebページを作ってみよう」のまとめ
![[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]](https://hbb.afl.rakuten.co.jp/hgb/0fb3a2a7.a3eac612.0fb3a2a8.1146eb94/?me_id=1213310&item_id=21161259&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fbook%2Fcabinet%2F8469%2F9784815618469_1_5.jpg%3F_ex%3D400x400&s=400x400&t=picttext "[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]")
