第一回HTML解説（初級編）
adminまず、HTML（HyperText Markup Language）は、Webページを作成するための基本的な言語です。HTMLを使うことで、文章や画像、リンク、フォームなどをWebページ上に配置することができます。この記事では、HTMLの基礎について説明します。
1. HTMLの基本構造
HTML文書は、決まった構造に従って書かれます。以下はHTML文書の基本的な構造です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTMLの基本構造</title>
</head>
<body>
<h1>こんにちは、世界！</h1>
<p>これはHTMLの基本的な構造の例です。</p>
</body>
</html>
- 各要素の説明
<!DOCTYPE html>: HTML5であることを宣言します。<html lang="ja">: 文書が日本語で書かれていることを示します。lang="ja"の部分で言語を指定します。<head>: メタ情報（タイトルや文字エンコードなど）を指定する部分です。<meta charset="UTF-8">: 文字エンコーディングを指定します。UTF-8はほぼすべての文字を扱える標準的なエンコーディングです。<meta name="viewport" content="width=device-width, initial-scale=1.0">: レスポンシブデザインを考慮した設定です。モバイルデバイスに対応させるために使います。<title>: ブラウザのタブに表示されるタイトルを指定します。<body>: 実際に表示されるコンテンツを配置する部分です。<h1>: 見出しを表します。h1は最も重要な見出しで、以降h2、h3と続きます。<p>: 段落（パラグラフ）を表します。
2. 基本的なHTMLタグ
HTMLには多くのタグ（要素）がありますが、ここではよく使われる基本的なものをいくつか紹介します。
見出しタグ
見出しは<h1>から<h6>まであります。数字が小さいほど重要度が高く、大きい文字で表示されます。
<h1>これはh1見出しです</h1>
<h2>これはh2見出しです</h2>
<h3>これはh3見出しです</h3>
段落タグ
段落は<p>タグで囲みます
<p>これは段落です。</p>
リンクタグ
他のページへのリンクを作成するには、<a>タグを使います。リンク先のURLはhref属性で指定します。
<a href="https://www.example.com">例のページへ</a>
画像タグ
画像を表示するには、<img>タグを使用します。画像のパスはsrc属性で指定し、alt属性には画像が表示できない場合の代替テキストを設定します。
<img src="image.jpg" alt="画像の説明">
リストタグ
リストは順序付き（番号付き）リストと順序なしリストの2種類があります。
- 順序付きリスト（番号付き）:
<ol>タグと<li>タグを使います。 - 順序なしリスト（箇条書き）:
<ul>タグと<li>タグを使います。
<ol>
<li>最初の項目</li>
<li>次の項目</li>
</ol>
<ul>
<li>最初の項目</li>
<li>次の項目</li>
</ul>
3. 属性とその使い方
HTMLタグには属性を追加して、より詳細な指定をすることができます。属性はタグの開始部分に書き、属性名="値"の形式で指定します。
例：リンクにターゲットウィンドウを指定
リンクを新しいタブで開くには、target="_blank"属性を使います。
<a href="https://www.example.com" target="_blank">新しいタブで開くリンク</a>
例：画像の幅と高さを指定
画像の幅や高さはwidthとheight属性で指定できます。
<img src="image.jpg" alt="画像の説明" width="300" height="200">
4. HTMLコメント
コードの中にコメントを追加するには、<!-- コメント内容 -->の形式で書きます。コメントはブラウザに表示されませんが、後からコードを見返したり、他の開発者に説明を加えるときに便利です。
<!-- ここはコメントです -->
5. HTMLのネスト構造
HTMLはネスト（入れ子）構造をとることができます。つまり、タグの中に別のタグを入れることができます。
<p>この段落には<a href="https://www.example.com">リンク</a>があります。</p>
まとめ
HTMLはWebページの基礎を作るために非常に重要な言語です。基本的なタグや構造を理解することで、簡単なWebページを作成できるようになります。HTMLを学ぶ上で大切なことは、実際に手を動かしてコードを書いてみることです。最初は小さなページから始め、少しずつ複雑な構造にチャレンジしてみましょう。
