【HTML Living Standard】sub要素の使い方
sub要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
subオブジェクトは、テキストを下付き文字として表示するHTML要素を表すオブジェクトです。この要素は、主に化学式、数学式、著作権表示など、特定のテキストが通常のベースラインよりも少し下に配置され、かつ小さいフォントで表示されることに意味がある場合に使用されます。
例えば、水の化学式「H₂O」の「2」や、数学における変数「x₁」の「1」のように、文字が固有の役割を持つ場合に適用されます。sub要素を使用することで、単なる見た目の変更ではなく、そのテキストが下付き文字であるという構造的な意味をブラウザや検索エンジン、スクリーンリーダーなどのユーザーエージェントに正確に伝えることができます。
この意味的な付与は、コンテンツのアクセシビリティを向上させ、セマンティックなマークアップを促進します。視覚的にテキストを下付きにしたいだけで、意味的な区別がない場合は、このsub要素ではなく、CSSのスタイル指定（例：vertical-align: sub;）を用いることが推奨されます。sub要素は、上付き文字を表すsup要素と対になり、文書における特定の情報の表現に貢献します。
構文(syntax)
1<p>H<sub>2</sub>O</p>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTMLフォームで送信する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>フォーム送信のサンプル</title> 7</head> 8<body> 9 <h1>会員登録フォーム</h1> 10 <!-- 11 <form>要素は、ユーザーからの入力を収集し、サーバーへ送信するために使用します。 12 action属性には、フォームのデータが送信されるURLを指定します。 13 method属性には、フォーム送信に使われるHTTPメソッド（通常はGETまたはPOST）を指定します。 14 --> 15 <form action="/register" method="post"> 16 <label for="username">ユーザー名:</label><br> 17 <input type="text" id="username" name="username" required><br><br> 18 19 <label for="email">メールアドレス:</label><br> 20 <input type="email" id="email" name="email" required><br><br> 21 22 <label for="password">パスワード:</label><br> 23 <input type="password" id="password" name="password" required><br><br> 24 25 <!-- 26 <input type="submit">要素は、フォームの内容をサーバーに送信するためのボタンを作成します。 27 value属性には、ボタンに表示されるテキストを指定します。 28 --> 29 <input type="submit" value="登録する"> 30 </form> 31</body> 32</html>
このサンプルコードは、ウェブサイトでユーザーが情報を入力し、それをサーバーへ送信するための「フォーム」の基本的な仕組みを示しています。
まず、<form>要素がフォーム全体を定義し、ユーザーからの入力をまとめます。action属性には、フォームのデータが送信されるサーバーのURLを指定します。method属性には、データ送信に使われるHTTPメソッド（通常はPOSTやGET）を指定し、この例ではpostメソッドが使われています。
次に、ユーザーが情報を入力するための要素が配置されています。<input type="text">はユーザー名のような一般的なテキスト入力欄、<input type="email">はメールアドレス専用の入力欄、<input type="password">はパスワードのような秘匿性の高い情報を入力するための欄です。これらの要素には、それぞれid属性で一意の識別子を、name属性でサーバーへ送られるデータの名前を設定します。required属性は、その入力欄が必須であることを示します。
そして、フォームの入力を締めくくる重要な要素が<input type="submit">です。これは、ユーザーがフォームに入力した内容をサーバーへ送信するための「登録する」といったボタンを作成します。value属性には、ボタンに表示されるテキストを指定します。このボタンがクリックされると、フォームに入力されたデータがaction属性で指定されたURLにmethod属性で指定された方法で送信されます。
HTMLの要素は、一般的なプログラミング言語の関数やメソッドとは異なり、直接的に引数を取ったり戻り値を返したりする仕組みはありません。今回のリファレンス情報にある「sub」要素のように、HTMLの要素は属性やその内容によってウェブページの構造や振る舞いを定義するものです。
このサンプルコードは、HTMLフォームによるデータ送信の基本を示しています。<form>要素のaction属性で送信先のURLを、method属性でHTTPメソッド（通常はGETかPOST）を正しく指定することがサーバーとの連携に不可欠です。機密性の高い情報や大量のデータを送信する際は、セキュリティの観点からmethod="post"を使用することが一般的です。<input type="submit">はフォームを送信するボタンを作成し、value属性でボタンに表示されるテキストを設定します。各入力フィールドには、サーバー側でデータを受け取るためのname属性を忘れずに設定してください。また、required属性で必須入力項目を指定できますが、これはクライアントサイドでの簡易的な検証に過ぎません。悪意のある入力を防ぎ、データの完全性を保証するためには、必ずサーバーサイドでの厳格な入力値検証とセキュリティ対策（クロスサイトリクエストフォージェリ対策など）を実施することが非常に重要です。
HTML submitでフォームを送信する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>HTML Submit サンプル</title> 6 <style> 7 body { font-family: sans-serif; margin: 20px; } 8 form { background-color: #f9f9f9; padding: 20px; border-radius: 8px; max-width: 400px; margin: 20px 0; } 9 label { display: block; margin-bottom: 5px; font-weight: bold; } 10 input[type="text"], input[type="email"] { width: calc(100% - 20px); padding: 8px 10px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 4px; } 11 input[type="submit"] { background-color: #007bff; color: white; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; } 12 input[type="submit"]:hover { background-color: #0056b3; } 13 .message { margin-top: 20px; padding: 10px; background-color: #e9ecef; border-radius: 4px; } 14 </style> 15</head> 16<body> 17 <h1>フォーム送信の基本</h1> 18 <p> 19 「HTML submit」とは、Webフォームに入力されたデータをサーバーに送信する機能のことです。<br> 20 通常、<code><form></code>要素内に配置された<code><input type="submit"></code>ボタンがクリックされることで、フォームデータが指定された宛先（<code>action</code>属性）へ送信されます。 21 </p> 22 23 <!-- フォーム要素の開始 --> 24 <!-- action属性はデータを送信するURLを指定します。method属性は送信方法（GETまたはPOST）を指定します。 --> 25 <form action="javascript:alert('フォームが送信されました！(実際にはサーバーに送信されます)')" method="get"> 26 <label for="name">お名前:</label> 27 <!-- name属性はサーバー側でデータを受け取る際のキーとなります --> 28 <input type="text" id="name" name="userName" required placeholder="名前を入力してください"> 29 30 <label for="email">メールアドレス:</label> 31 <input type="email" id="email" name="userEmail" required placeholder="メールアドレスを入力してください"> 32 33 <!-- input type="submit"はフォームを送信するためのボタンを作成します --> 34 <!-- value属性はボタンに表示されるテキストを設定します --> 35 <input type="submit" value="送信する"> 36 </form> 37 38 <div class="message"> 39 上記の「送信する」ボタンをクリックすると、入力されたデータが指定された<code>action</code>属性の場所へ送られようとします。<br> 40 この例では、JavaScriptのアラートが表示されるだけで、実際のサーバー送信は行われません。 41 </div> 42</body> 43</html>
「HTML submit」とは、Webフォームに入力されたデータをサーバーに送信するための機能です。サンプルコードは、この送信機能を持つフォームの基本的な構造と、その動作を示しています。
まず、<form>要素はフォーム全体の枠組みを定義し、データの送信先（action属性）と送信方法（method属性）を指定します。このサンプルでは、action属性にJavaScriptのアラートを設定しており、ボタンクリック時に「フォームが送信されました！」というメッセージが表示されるだけで、実際のサーバー送信は行われないデモンストレーションとなっています。
<input type="text">や<input type="email">は、ユーザーが名前やメールアドレスといった情報を入力するためのフィールドです。これらの入力フィールドにはname属性が設定されており、この属性値がサーバー側でデータを受け取る際の識別子（キー）となります。
そして、フォーム送信の中心となるのが<input type="submit">要素です。この要素は、ユーザーがクリックすることでフォーム内の全ての入力データをform要素のaction属性で指定された宛先へ送信する役割を持つボタンを作成します。value属性に「送信する」と設定することで、ボタンにそのテキストが表示されます。
HTML要素である<input type="submit">には、プログラミング言語の関数のように直接引数を受け取ったり、特定の値を戻り値として返したりする概念はありません。この要素は、クリックというユーザー操作に応じてフォームデータを指定されたサーバー（またはURL）へ送るという「動作」をトリガーすることが主な役割となります。
「HTML submit」機能は、Webフォームのデータをサーバーに送信するために使われます。フォームを正しく機能させるには、form要素のaction属性にデータ送信先のサーバーURLを、method属性に送信方法（機密データは通常POST）を正確に指定することが重要です。
また、フォームからサーバーへ送りたい各input要素には、サーバー側でデータを受け取るためのname属性を必ず設定してください。このname属性が無いと、入力値はサーバーへ送信されません。
サンプルコードのaction="javascript:..."はデモンストレーション用です。実際のWebシステムでは、データを処理するサーバーサイドのプログラムURLに置き換える必要があります。送信されたデータは、必ずサーバー側で入力値検証やサニタイズ（無害化処理）を行い、セキュリティを確保することが非常に重要です。