HTMLの基本

はじめに

この記事では、HTMLの基本的な要素について、具体的なコードを交えながら解説する。

見出し (h1~h6)

<h1>から<h6>までの見出しタグがある。数字が小さいほど大きな見出しになる。

<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>

段落と改行 (p, br)

<p>タグは段落を表し、<br>タグは改行を表す。

<p>これは、サンプルのWebページである。</p>
<p>途中で改行することも<br>
できる</p>

整形済みテキスト (pre)

<pre>タグは、スペースや改行をそのまま表示したい場合に使用する。主にコードの表示に利用される。

<pre>
def func():
    print("これはサンプルのpreタグである。")
    print("&lt;pre&gt;タグで記述する。")
</pre>

水平線 (hr)

<hr>タグは、水平線を表示する。

<hr>

ブロック要素とインライン要素 (div, span)

<div>タグはブロック要素で、<span>タグはインライン要素である。これらは主にCSSでスタイルを適用するために使用される。

<div>
    <p>&lt;div&gt;タグ</p>
    <p>で</p>
    <p>囲われた</p>
    <p>コンテンツ</p>
    <p>見た目はなにも変わらない</p>
</div>
<p>ここから→<span>このなか</span>←ここまで&lt;span&gt;タグで囲われたコンテンツ、見た目はなにも変わらない</p>

リンク (a)

<a>タグは、他のページへのリンクを作成する。href属性にリンク先のURLを指定する。

<a href="https://www.google.com/">Googleのリンク</a>

リスト (ul, ol, li)

<ul>タグは順序なしリスト、<ol>タグは順序付きリストを作成する。各リスト項目は<li>タグで記述する。

番号なしリスト

<ul>
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
</ul>

番号付きリスト

<ol>
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
</ol>

テーブル (table, thead, tbody, tr, th, td)

<table>タグは表を作成する。<thead>はヘッダー、<tbody>はボディを表す。<tr>は行、<th>はヘッダーセル、<td>はデータセルを表す。

<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Mail</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>山田 太郎</td>
            <td>[e-mail]</td>
        </tr>
        <tr>
            <td>2</td>
            <td>田中 花子</td>
            <td>[e-mail]</td>
        </tr>
        <tr>
            <td>3</td>
            <td>松田 幸子</td>
            <td>[e-mail]</td>
        </tr>
    </tbody>
</table>

フォーム (form, input, textarea, select, option, label)

フォームは、ユーザーからの入力を受け付けるための要素である。

テキストフィールド

<input type="text" size="40">

パスワード入力フィールド

<input type="password" size=100>

隠しフィールド

<input type="hidden">

数値入力フィールド

<input type="number" min=0 max=100>

ファイル選択

<input type="file">

色選択

<input type="color">

チェックボックス

<input type="checkbox"><br>
<input type="checkbox">
<label>ただのラベル</label><br>
<input type="checkbox" id="checkbox0">
<label for="checkbox">チェックボックスのidと紐づいたlabel</label>

ラジオボタン

<input type="radio" id="radio0"><br>
<input type="radio" id="radio1">
<label>IDに紐づかないラベル</label><br>
<input type="radio" id="radio2">
<label for="radio2">IDに紐づくラベル</label>

テキストエリア

<textarea cols=200 rows=10>デフォルトのテキスト</textarea>

選択リスト(コンボボックス)

<select>
    <option>項目0</option>
    <option>項目1</option>
    <option>項目2</option>
</select>

選択リスト

<select size=3>
    <option>項目0</option>
    <option>項目1</option>
    <option>項目2</option>
</select>

ボタン

<input type="submit" value="submit">