●目次
HTMLは、ウェブ制作における基礎となる言語です。
この記事では、HTMLの基本文法を初心者向けに詳しく解説し、見出しや段落、リンク、画像、リスト、フォーム、テーブルといった、よく使われる要素を分かりやすく紹介します。
この記事を読むことで、HTMLの基礎をしっかりと理解し、次のステップに進む準備を整えましょう。
HTMLの基本構造
HTML文書は、<!DOCTYPE html>宣言から始まり、<html>、<head>、<body>という3つの主要なセクションに分かれています。
以下は基本的な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>これは段落です。</p>
</body>
</html><!DOCTYPE html>: HTML5文書であることを宣言します。<html>: HTML文書のルート要素です。<head>: メタデータやタイトル、スタイルシートなどが含まれます。<body>: 実際のコンテンツが含まれます。
基本的なHTML要素（タグ）
HTMLには数多くのタグがありますが、ここではよく使われるタグをいくつか紹介します。
見出しタグ：<h1></h1>〜<h6></h6>
<h1>から<h6>までのタグは、文書の見出しを定義します。
<h1>が最も重要な見出しで、<h6>が最も小さな見出しです。
HTML
<h1>This is a Heading 1</h1>
<h2>This is a Heading 2</h2>段落タグ：</p></p>
<p>タグは、段落を定義します。
HTML
<p>This is a Paragraph</p>リンクタグ：<a></a>
<a>タグは、ハイパーリンクを作成します。
HTML
<a href="https://www.example.com">Visit Example</a>画像タグ：<img>
画像タグ：<img>タグは、画像を表示します。src属性で画像のURLを指定し、alt属性で画像の説明を追加します。
HTML
<img src="image.jpg" alt="A beautiful scenery">リストタグ：<ul></ul>, <ol></ol> , <li></li>
リストタグ：順序付きリスト（<ol>）と順序なしリスト（<ul>）があります。各リスト項目は<li>タグで囲まれます。
HTML
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ol>
<li>First item</li>
<li>Second item</li>
</ol>フォーム要素：<form></form>
HTMLには、ユーザーからの入力を受け取るためのフォーム要素があります。
以下は、シンプルなフォームの例です：
HTML
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Submit">
</form>テーブル（表）要素：<table></table>
データを表形式で表示するには、<table>タグを使用します。
HTML
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>まとめ
初心者がHTMLを学ぶ際には、まずは基本的なタグを覚え、段階的に学習を進めることが重要です。簡単なWebページを作成してみて、どう表示されるか確認しながら進めましょう。CSSやJavaScriptと組み合わせて使うことで、さらにインタラクティブなページを作成できるようになります。