HTMLの基本
ウェブページは、HTML（HyperText Markup Language）と呼ばれる言語で構築されます。
HTMLはウェブコンテンツの構造や意味を定義するためのマークアップ言語であり、ウェブ開発の基本となります。
この記事では、HTMLの基本について初心者向けに解説していきます。
HTMLとは？
HTMLの役割
HTMLは、ウェブページの基本的な構造を記述する言語です。
テキスト、画像、リンク、表、フォームなど、ウェブページ上に表示されるほとんどの要素はHTMLによって記述されます。
HTMLは構造を示す「タグ」を使用して文書をマークアップし、ブラウザに対してコンテンツの意味や構造を伝えます。
HTMLの構文
HTML文書は基本的に以下のような構文に従います。
<!DOCTYPE html>
<html>
<head>
<title>ページのタイトル</title>
</head>
<body>
<h1>見出し1</h1>
<p>段落のテキスト。</p>
<img src="画像のURL" alt="代替テキスト">
<a href="リンク先のURL">リンクのテキスト</a>
</body>
</html><!DOCTYPE html>: HTML5を使用することをブラウザに伝える宣言。<html>: HTML文書のルート要素。<head>: ページに関するメタ情報やスタイル、スクリプトなどを含む要素。<title>: ページのタイトルを定義。<body>: ページの実際のコンテンツを含む要素。<h1>,<p>,<img>,<a>: それぞれ見出し、段落、画像、リンクの要素。
HTMLの基本要素
見出し（Heading）
見出しは、ページ内でセクションを区切るための重要な要素です。
<h1>から<h6>までのタグがあり、数字が大きいほど重要度が低く、表示されるテキストのサイズが小さくなります。
<h1>これは見出し1です</h1>
<h2>これは見出し2です</h2>
<h3>これは見出し3です</h3>段落（Paragraph）
段落はテキストのまとまりを表す要素です。
<p>タグを使用します。
<p>これは段落です。ウェブページ上でテキストを構造化するのに使用します。</p>リスト（List）
リストは順序あり（番号つき）と順序なし（マークつき）があります。
順序ありリストには<ol>、順序なしリストには<ul>を使用し、各リストアイテムには<li>を使います。
<ol>
<li>項目1</li>
<li>項目2</li>
</ol>
<ul>
<li>アイテムA</li>
<li>アイテムB</li>
</ul>リンク（Link）
リンクは他のページへの移動や外部リソースへのリンクを作成するための要素です。
<a>タグを使用します。
<a href="https://www.example.com">Visit Example.com</a>画像（Image）
画像を表示するには<img>タグを使用します。
src属性には画像のURLを、alt属性には代替テキストを指定します。
<img src="image.jpg" alt="美しい風景の画像">表（Table）
表を作成するには<table>、行は<tr>、ヘッダーセルは<th>、通常のセルは<td>を使用します。
<table>
<tr>
<th>名前</th>
<th>年齢</th>
</tr>
<tr>
<td>太郎</td>
<td>25</td>
</tr>
</table>
HTML文書の基本構造
HTML文書は基本的に上述のような基本要素を含みますが、以下は一般的なHTML文書の構造の例です。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
</header>
<nav>
<ul>
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
</ul>
</nav>
<main>
<section id="section1">
<h2>Section 1</h2>
<p>This is the content of section 1.</p>
</section>
<section id="section2">
<h2>Section 2</h2>
<p>This is the content of section 2.</p>
</section>
</main>
<footer>
<p>© 2024 My Website</p>
</footer>
</body>
</html>この例では、基本的なHTML文書の骨格が示されています。
<header>はページのヘッダー、<nav>はナビゲーション、<main>はメインコンテンツ、<footer>はフッターを表します。
<section>や<article>なども使用して、ページを適切に構造化することが重要です。
終わりに
HTMLはウェブページを構築する上での基本的な言語であり、これを理解することはウェブ開発の第一歩です。
HTMLの基本構文や要素を覚え、実際に手を動かしながら試してみることで、徐々に理解が深まります。
次はCSSやJavaScriptなどを学び、より豊かなウェブ体験を構築していきましょう。