はじめに
HTML（HyperText Markup Language）は、ウェブページを作成するための基本的なマークアップ言語。初心者でも理解しやすく、実際に手を動かしながら学ぶことができるため、ウェブ制作の第一歩として最適な学習言語です。
この記事では、HTMLの基本構造、よく使うタグ、セマンティックな記述方法、そして実践的なサンプルコードを紹介します。
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>こんにちは、HTMLの世界へようこそ！</h1> <p>このページでは、HTMLの基本を学びます。</p> </body> </html>
1. DOCTYPE宣言
最初の行にある<!DOCTYPE html>は、HTML5であることを宣言します。これにより、ブラウザは文書を正しく解釈します。
（HTML4まではいくつかのバージョンがあり、HTML5で簡潔に１つの書き方に纏まりました）
2. <html>タグ
<html>タグはHTML文書の開始を示し、全体を囲む役割を果たします。lang属性を使って、文書の言語を指定することができます。
3. <head>タグ
<head>タグ内には、文書のメタ情報が含まれます。
<meta charset=”UTF-8″>は文字エンコーディングを指定し、<meta name=”viewport”>はレスポンシブデザインに必要な設定です。
4. <body>タグ
<body>タグ内には、実際に表示される内容が含まれます。ここにテキストや画像、リンクなどを配置します。
HTMLタグ一覧：よく使うタグを徹底解説
HTMLには多くのタグがありますが、特に初心者がよく使うタグを以下に示します。
1. 見出しタグ
見出しを作成するためのタグは、<h1>から<h6>までの6種類があります。数字が小さいほど重要度が高くなります。
<h1>これは見出し1です</h1> <h2>これは見出し2です</h2> <h3>これは見出し3です</h3>
2. 段落タグ
段落を作成するためには、<p>タグを使用します。
<p>これは段落です。HTMLを使ってウェブページを作成することができます。</p>
3. リストタグ
リストを作成するためには、順序付きリスト（<ol>）と順序なしリスト（<ul>）を使用します。
<h2>好きな果物</h2> <ul> <li>りんご</li> <li>バナナ</li> <li>オレンジ</li> </ul>
4. リンクタグ
リンクを作成するためには、<a>タグを使用します。href属性でリンク先のURLを指定します。
<a href="https://hajimete.org">こちらをクリック</a>
5. 画像タグ
画像を表示するためには、<img>タグを使用します。src属性で画像のURLを指定し、alt属性で代替テキストを設定します。
<img src="image.jpg" alt="サンプル画像">
HTML文書の作成方法：実践的なサンプルコード付き
HTML文書を作成する際の基本的な手順は以下の通りです。
テキストエディタを開く
Sublime TextやVSCodeなどのテキストエディタを使用します。
HTMLコードを記述する
以下のような基本的なコードを入力します。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>サンプルページ</title> </head> <body> <h1>私のサンプルページ</h1> <p>これはサンプルの段落です。</p> <a href="https://www.example.com">リンク先へ</a> <img src="image.jpg" alt="サンプル画像"> </body> </html>
ブラウザで表示する
作成したHTMLファイルをブラウザで開くことで、実際にどのように表示されるかを確認します。
セマンティックなHTMLの重要性
セマンティックHTMLとは、HTMLの要素を意味に基づいて適切に使用することを指します。
これにより、検索エンジンやスクリーンリーダーが文書の構造を理解しやすくなります。
以下は、セマンティックな要素の例です。
<article>
<header>
<h1>記事のタイトル</h1>
<p>投稿日: 2024年12月24日</p>
</header>
<p>この記事では、HTMLの基本について説明します。</p>
<footer>
<p>著者: エンデ・バタロー</p>
</footer>
</article>
このように、<article>、<header>、<footer>などのセマンティック要素を使用することで、文書の意味を明確にし、SEOやアクセシビリティの向上につながります。
HTMLの作法と注意点
HTMLを書く際には、いくつかの作法や注意点があります。
入れ子構造
タグは正しく入れ子構造にする必要があります。開始タグと終了タグの位置に注意しましょう。
<div> <h2>見出し</h2> <p>段落の内容。</p> </div>
属性の使用
タグには属性を追加することで、より詳細な情報を指定できます。例えば、<img>タグにはsrcやalt属性を使います。
<img src="image.jpg" alt="サンプル画像">
コメントアウト
コード内にコメントを追加することで、後から見返したときに理解しやすくなります。コメントは次のように記述します。
<!– この中に書かれたテキストは、表示されません。 –>
<!-- ここにコメント -->
コメント