一般的なHTMLタグの一覧とそれらの解説を示します。
各タグには、使用方法と共に、必要に応じて実際のソースコードと画像も見ていきましょう！
html タグ
まずは基本のHTMLタグ！！わざわざ記述することも少ないかもしれませんが・・・・
<html>タグは、HTMLドキュメントのルート要素であり、Webページの全体のコンテンツを囲むために使用されます。
<!DOCTYPE html>
<html>
<head>
<title>ページタイトル</title>
</head>
<body>
<h1>見出し</h1>
<p>本文</p>
</body>
</html>
head タグ
<head>タグは、HTMLドキュメントのメタデータを含むために使用されます。このタグは、ページのタイトル、スタイルシート、スクリプト、キーワードなどを定義するために使用されます。
<!DOCTYPE html>
<html>
<head>
<title>ページタイトル</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>見出し</h1>
<p>本文</p>
</body>
</html>
title タグ
<!DOCTYPE html>
<html>
<head>
<title>ページタイトル</title>
</head>
<body>
<h1>見出し</h1>
<p>本文</p>
</body>
</html>body タグ
<body>タグは、HTMLドキュメントの本文を含むために使用されます。
<!DOCTYPE html>
<html>
<head>
<title>ページタイトル</title>
</head>
<body>
<h1>見出し</h1>
<p>本文</p>
</body>
</html>h1 – h6 タグ
<h1>から<h6>タグは、見出しを定義するために使用されます。<h1>が最も大きな見出しであり、<h6>が最も小さな見出しです。
<!DOCTYPE html>
<html>
<head>
<title>ページタイトル</title>
</head>
<body>
<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>
</body>
</html>
p タグ
<p>タグは、段落を定義するために使用されます。
<!DOCTYPE html>
<html>
<head>
<title>ページタイトル</title>
</head>
<body>
<p>これは段落の例です。</p>
<p>これはもう1つの段落です。</p>
</body>
</html>a タグ
<a>タグは、リンクを定義するために使用されます。href属性を使用して、リンク先のURLを指定します。
<!DOCTYPE html>
<html>
<head>
<title>ページタイトル</title>
</head>
<body>
<a href="https://example.com">リンクの例</a>
</body>
</html>img タグ
<img>タグは、画像を表示するために使用されます。src属性を使用して、画像のファイルパスまたはURLを指定します。
<!DOCTYPE html>
<html>
<head>
<title>ページタイトル</title>
</head>
<body>
<img src="image.jpg" alt="画像の説明">
</body>
</html>
ul タグ
<ul>タグは、順序のないリストを定義するために使用されます。<li>タグを使用して、リストの各項目を定義します。
<!DOCTYPE html>
<html>
<head>
<title>ページタイトル</title>
</head>
<body>
<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
</body>
</html>ol タグ
<ol>タグは、順序付きリストを定義するために使用されます。<li>タグを使用して、リストの各項目を定義します。
<!DOCTYPE html>
<html>
<head>
<title>ページタイトル</title>
</head>
<body>
<ol>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ol>
</body>
</html>table タグ
<table>タグは、テーブルを定義するために使用されます。<tr>タグを使用して、テーブルの行を定義し、<td>タグを使用して、各セルを定義します。
<!DOCTYPE html>
<html>
<head>
<title>ページタイトル</title>
</head>
<body>
<table>
<tr>
<td>セル1-1</td>
<td>セル1-2</td>
</tr>
<tr>
<td>セル2-1</td>
<td>セル2-2</td>
</tr>
</table>
</body>
</html>ここでは、2つの行と2つの列を持つ非常に単純なテーブルが作成されます。テーブルの各行は、<tr>タグで定義され、各セルは、<td>タグで定義されます。このテーブルには、4つのセルがあります。最初のセルは、”セル1-1″というテキストを含み、次のセルは、”セル1-2″というテキストを含みます。同様に、2番目の行の最初のセルには、”セル2-1″というテキストが含まれ、次のセルには”セル2-2″というテキストが含まれます。
テーブルには他にも多くの属性がありますが、これらは初心者には少し複雑かもしれません。
テーブルを詳しく学びたい場合は、W3SchoolsのHTML Tablesを参照してください。
これら基本のhtmlタグを使ってみよう
これらの基本的なHTMLタグを使用して、単純なWebページを作成することができます。以下は、非常にシンプルなWebページの例です。
<!DOCTYPE html>
<html>
<head>
<title>私のWebページ</title>
</head>
<body>
<h1>私のWebページ</h1>
<p>私の名前はJohn Doeです。</p>
<h2>趣味</h2>
<ul>
<li>読書</li>
<li>旅行</li>
<li>スポーツ観戦</li>
</ul>
<h2>好きな食べ物</h2>
<ol>
<li>ピザ</li>
<li>寿司</li>
<li>ステーキ</li>
</ol>
<h2>写真</h2>
<img src="my_photo.jpg" alt="私の写真">
</body>
</html>このページでは、<h1>タグを使用してページのタイトルを表示し、<p>タグを使用して自己紹介を表示します。また、<h2>タグを使用して、趣味と好きな食べ物を示す見出しを表示し、<ul>タグと<ol>タグを使用して、それぞれのリストを表示します。最後に、<img>タグを使用して、ページに自分の写真を表示します。
この例は非常にシンプルなものですが、これらのタグを使うことで、さまざまな種類のコンテンツを表示することができます。より複雑なWebページを作成するには、CSSとJavaScriptといった別のテクノロジーを組み合わせることができます。
