HTMLコード一覧

HTML（HyperText Markup Language）は、ウェブページの構造を記述するための標準言語です。

以下に、基本的なHTMLコードの要素とその使用例を一覧にまとめました。

基本的なHTMLの構造

<!DOCTYPE html>
<html>
<head>
    <title>ページのタイトル</title>
</head>
<body>
    <h1>見出し1</h1>
    <p>これは段落です。</p>
    <a href="https://www.example.com">リンクのテキスト</a>
    <img src="image.jpg" alt="画像の説明">
    <ul>
        <li>リストアイテム1</li>
        <li>リストアイテム2</li>
    </ul>
    <ol>
        <li>番号付きリストアイテム1</li>
        <li>番号付きリストアイテム2</li>
    </ol>
    <table>
        <tr>
            <th>ヘッダー1</th>
            <th>ヘッダー2</th>
        </tr>
        <tr>
            <td>データ1</td>
            <td>データ2</td>
        </tr>
    </table>
    <form action="/submit" method="post">
        <label for="name">名前:</label>
        <input type="text" id="name" name="name">
        <input type="submit" value="送信">
    </form>
</body>
</html>

HTMLタグの一覧

1. メタデータ

<head>: ドキュメントのメタデータを含むコンテナ。
<title>: ページのタイトルを定義。
<meta>: メタデータを設定。

2. テキストフォーマット

<h1>〜<h6>: 見出しを定義。
<p>: 段落を定義。
<br>: 改行を挿入。
<hr>: 水平線を挿入。
<strong>: 重要なテキストを強調。
<em>: 強調したテキストを斜体で表示。
<blockquote>: 引用を定義。
<pre>: 整形済みテキストを定義。

3. リスト

<ul>: 順序なしリストを定義。
<ol>: 順序付きリストを定義。
<li>: リストのアイテムを定義。

4. リンクとメディア

<a>: ハイパーリンクを定義。
<img>: 画像を表示。
<video>: ビデオを埋め込む。
<audio>: 音声を埋め込む。

5. テーブル

<table>: テーブルを定義。
<tr>: テーブル行を定義。
<th>: テーブルヘッダーを定義。
<td>: テーブルデータを定義。

6. フォーム

<form>: フォームを定義。
<input>: 入力フィールドを定義。
<label>: 入力フィールドのラベルを定義。
<button>: ボタンを定義。
<select>: ドロップダウンリストを定義。
<option>: ドロップダウンリストのオプションを定義。
<textarea>: 複数行のテキスト入力を定義。

7. セマンティック要素

<header>: ページやセクションのヘッダーを定義。
<nav>: ナビゲーションリンクのセクションを定義。
<main>: ドキュメントのメインコンテンツを定義。
<section>: セクションを定義。
<article>: 自己完結型のコンテンツを定義。
<aside>: サイドバーなど、補足コンテンツを定義。
<footer>: ページやセクションのフッターを定義。

8. スクリプトとスタイル

<script>: JavaScriptコードを埋め込む。
<link>: 外部スタイルシートやその他のリソースをリンク。
<style>: 埋め込みスタイルを定義。

具体的な例

見出しと段落

<h1>これは見出し1です</h1>
<p>これは段落です。</p>

リスト

<ul>
    <li>アイテム1</li>
    <li>アイテム2</li>
    <li>アイテム3</li>
</ul>

<ol>
    <li>アイテム1</li>
    <li>アイテム2</li>
    <li>アイテム3</li>
</ol>

テーブル

<table>
    <tr>
        <th>名前</th>
        <th>年齢</th>
    </tr>
    <tr>
        <td>太郎</td>
        <td>30</td>
    </tr>
    <tr>
        <td>花子</td>
        <td>25</td>
    </tr>
</table>

フォーム

<form action="/submit" method="post">
    <label for="username">ユーザー名:</label>
    <input type="text" id="username" name="username">
    <input type="submit" value="送信">
</form>

画像とリンク

<a href="https://www.example.com">Example</a>
<img src="image.jpg" alt="説明文">

これらの基本的なHTMLタグを組み合わせて、Webページを作成することができます。

HTMLを学ぶ際には、まずこれらの基本的なタグの使い方を理解し、実際にコードを書いてみることが重要です。