HTMLはウェブサイトやブログを作成する際に不可欠な言語です。WordPressユーザーにとっても、HTMLを理解していると、テーマのカスタマイズや投稿の編集時に非常に便利です。この記事では、WordPressユーザーが知っておくべき基本的なHTMLタグとその使い方について説明します。
1.
タグ
HTMLドキュメントの最初に記述するタグです。このタグは、使用しているHTMLのバージョンをブラウザに伝えます。現代のウェブサイトでは、を使用することが一般的です。

htmlhtml>
2.
タグ
タグは、HTMLドキュメントの開始と終了を示すタグです。これにより、HTMLドキュメントがどこから始まり、どこで終わるかをブラウザに示します。
html<html>
html>
3.
タグ
タグは、HTMLドキュメントのメタデータ(文字コード、ページタイトル、スタイルシート、スクリプトなど)を含む部分です。このタグ内には、ページに必要な情報を挿入します。
html<head>
<meta charset="UTF-8">
<title>ページタイトルtitle>
<link rel="stylesheet" href="styles.css">
head>
4.
タグ
タグは、ウェブページのコンテンツ部分を囲むタグです。ページ上に表示されるテキスト、画像、リンクなどすべての内容はこのタグ内に記述されます。
html<body>
<h1>ウェルカムページh1>
<p>このページへようこそ。p>
body>
5. 見出しタグ(
~
)
~
タグは、ページの見出しを表します。
は最も重要な見出しであり、
は最も小さな見出しとなります。WordPressでコンテンツを作成する際、適切な階層で見出しを使うことでSEOに有利になります。
html<h1>メイン見出しh1>
<h2>サブ見出しh2>
<h3>さらに小さな見出しh3>
6. 段落タグ(
)
<h1>メイン見出しh1>
<h2>サブ見出しh2>
<h3>さらに小さな見出しh3>
)タグは、テキストの段落を作成するために使用します。文章を意味のあるブロックに分けるために非常に重要です。
html<p>これは段落です。p>
7. リストタグ(
,
,
)
リストを作成するには、順不同リスト(
- )や順序付きリスト(
- 順不同リスト(点付きリスト):
)を使用します。リスト項目は
タグで定義されます。
html<ul>
<li>項目1li>
<li>項目2li>
<li>項目3li>
ul>
- 順序付きリスト(番号付きリスト):
html<ol>
<li>最初の項目li>
<li>次の項目li>
<li>最後の項目li>
ol>
8. リンクタグ(
)
タグは、ウェブページ間のリンクを作成するために使用します。
href
属性を使用してリンク先を指定します。
html<a href="https://example.com">こちらをクリックa>
9. 画像タグ(![]()
)
タグは、ウェブページに画像を挿入するために使用します。src
属性で画像のパスを指定し、alt
属性で代替テキストを設定することが推奨されます。
html<img src="image.jpg" alt="画像の説明">
10. 強調タグ(
および
)
タグは、テキストを強調するために使います。通常、太字で表示されます。
タグは、テキストを強調する際に使い、通常は斜体で表示されます。
html<p><strong>強調されたテキストstrong> と <em>斜体のテキストem>p>
11. テーブルタグ(
,
,
,
)
タグは、テーブルを作成するために使用します。テーブルの行は
タグで定義し、セルは
タグ、ヘッダーセルは
タグを使います。
html<table>
<tr>
<th>名前th>
<th>年齢th>
tr>
<tr>
<td>田中td>
<td>25td>
tr>
<tr>
<td>佐藤td>
<td>30td>
tr>
table>
12. コメントタグ(
)
HTMLでは、コメントを挿入する際に
という形式で記述します。コメントはコードの中で説明やメモを残すために使用します。ブラウザでは表示されません。
html
13. フォームタグ(
,
,
)
ユーザーからデータを入力してもらうためのフォームを作成する際に使用するタグです。
タグでテキストボックスやボタンを作成し、
タグで長文入力フィールドを作成できます。
html<form action="submit_form.php" method="post">
<label for="name">名前:label>
<input type="text" id="name" name="name">
<label for="message">メッセージ:label>
<textarea id="message" name="message">textarea>
<button type="submit">送信button>
form>
14. スタイルタグ(
)
,
|