商品登録の際に使用する、最低限の HTML を理解しよう
HTML タグとは言わずもがなウェブサイトを構成する骨組みですが、 商品説明文 で HTML タグの使用が許可されているECサイトがあります。
例えば、楽天市場ですね。
全てのタグが使用できるわけではありませんが、使用頻度の高いものに関しては作業者はその使用意図を理解しておく必要があります。
よく使用されるタグとしては、「aタグ」（リンク）「imgタグ」（画像）「brタグ」（改行）です。
これらのタグに関しては基本的に複数のタグが入れ子になることはないので、使い方を理解するのは難しくはないでしょう。
商品説明文 で使用が許可されているタグで最も理解が難しいのは「tableタグ」（表）だと思います。
タグが入れ子状になっていますし、どのような表にしたいかによって書き方が異なってきます。
コーダーやエンジニアでなくとも、商品データを扱う以上は最低限の HTML は理解しておきたいものです。
今回は 商品説明文 を扱う上で理解しておきたい、基本となる HTML タグを勉強しておきましょう。
【 商品説明文 】 HTML タグのキホン
現在多くのウェブサイトで使用されている HTML は、大きく分けると２種類の「方言」に分類されます。
一つは「 HTML のボキャブラリーを使用したXML文書」である「XHTML」、もう一つは「 HTML の後継規格」である「HTML5」です。
前者は機械が読みやすい厳密な構造を目指した規格で、ホームページビルダーやDreamweaverなどの簡易的にウェブサイトを作成するソフトウェアとの相性が良かったという経緯もあり、古いウェブサイトを中心に今でも見かけることがあります。
後者は人間が書きやすいシンプルな構造を目指した規格で、現在のウェブサイトの主流となっています。
ECサイトの多くは現在の主流であるHTML5で記載されているので、我々が従うべき内容もHTML5の推奨に準じるべきであることは分かるでしょう。
それではXHTMLにはどのような特徴があるのでしょうか？
実はこんな特徴があります。
- 大文字小文字を区別する
- 空要素（閉じタグがない要素）は「/>」で終了する。
つまり、商品説明文内に記載されている「大文字タグ」や「<img/>」「<br/>」などはXHTMLの書き方なのですね。
上記を踏まえた上で、 商品説明文 でよく使用されるHTMLタグのキホンを確認していきたいと思います。
aタグ（リンク）
以下が基本の書き方になります。
<a href=”リンクしたいページのURL”>リンクしたいページの名称</a>
属性によっては使用できなくなることもありますが、「href」以外の属性は商品データを作成する際に使用することはほぼないので、この形だけ覚えれば問題ないでしょう。
＜楽天公式のドキュメントで使用できないとされている属性＞
datafld datasrc telbook email ijam iswf
＜参考リンク＞
MDN ウェブドキュメント
<a>: アンカー要素
imgタグ（画像）
以下が基本の書き方になります。
<img src=”表示したい画像のURL”>
「src」属性は必須ですが、ものによっては使用できなくなることもあるので注意しましょう。
「width」や「height」などの属性で画像サイズを調整しようとしているケースがしばしば見受けられますが、見た目に関する記述は都度記載してしまうと後から変更するのが大変なので、基本のスタイルはスタイルシートで管理して、どうしても記述する必要があるときだけ「width」や「height」を使用するようにしましょう。
＜楽天公式のドキュメントで使用できないとされている属性＞
lowsrc suppress dynsrc datafld datasrc language
＜参考リンク＞
MDN ウェブドキュメント
<img>: 画像埋め込み要素
brタグ（改行）
以下が基本の書き方になります。
<br>
これは難しくないですね。
＜楽天公式のドキュメントで使用できないとされている属性＞
language
＜参考リンク＞
MDN ウェブドキュメント
<br>: 改行要素
tableタグ（画像）
最後にtableタグです。まずは基本の書き方から。
| 1-1 | 1-2 | 1-3 |
|---|---|---|
| 2-1 | 2-2 | 2-3 |
| 3-1 | 3-2 | 3-3 |
| 4-1 | 4-2 | 4-3 |
<table>
<tr><th>1-1</th><th>1-2</th><th>1-3</th></tr>
<tr><th>2-1</th><td>2-2</td><td>2-3</td></tr>
<tr><th>3-1</th><td>3-2</td><td>3-3</td></tr>
<tr><th>4-1</th><td>4-2</td><td>4-3</td></tr>
</table>
これは横３列、縦４行の表を意味しています。
「tr」タグは「行」を意味します。「th」タグが「見出しセル」、「td」タグは「見出し以外のセル」にそれぞれ対応しています。
2-1や2-2を残したまま、1-1と1-2を１つのセルにしてしまうにはどのようにすれば良いでしょうか。
| 1-1&1-2 | 1-3 | |
|---|---|---|
| 2-1 | 2-2 | 2-3 |
| 3-1 | 3-2 | 3-3 |
| 4-1 | 4-2 | 4-3 |
<table>
<tr><th rowspan=”2″>1-1&2-1</th><th>1-2</th><th>1-3</th></tr>
<tr><td>2-2</td><td>2-3</td></tr>
<tr><th>3-1</th><td>3-2</td><td>3-3</td></tr>
<tr><th>4-1</th><td>4-2</td><td>4-3</td></tr>
</table>
そのようなときはcolspan属性を使い、行中の列をまとめてしまいましょう。「colspan=”2″」とは「他の行の２列分に相当する」という意味です。他の行とセルの数が合わせるために元々の「1-2」のセルは削除するようにしましょう。
1-2や2-2を残したまま、1-1と2-1を１つのセルにしてしまうにはどのようにすれば良いでしょうか。
| 1-1&2-1 | 1-2 | 1-3 |
|---|---|---|
| 2-2 | 2-3 | |
| 3-1 | 3-2 | 3-3 |
| 4-1 | 4-2 | 4-3 |
<table>
<tr><th rowspan=”2″>1-1&2-1</th><th>1-2</th><th>1-3</th></tr>
<tr><td>2-2</td><td>2-3</td></tr>
<tr><th>3-1</th><td>3-2</td><td>3-3</td></tr>
<tr><th>4-1</th><td>4-2</td><td>4-3</td></tr>
</table>
rowspan属性を使い、列中の行をまとめてしまいましょう。「rowspan=”2″」とは「他の列の２行分に相当する」という意味です。他の列とセルの数が合わせるために元々の「2-1」のセルは削除するようにしましょう。
最初はとっつきにくく感じるかもしれませんが、慣れれば大したこと有りません。
ただし、商品説明文内のテーブルは販売プラットフォームによっては認められていなかったり、表示の崩れや工程の複雑化の原因になるので基本的にはあまりおすすめはしません。
imgタグと同様「width」や「height」の属性を使用するのは控えて、スタイルシートで管理するようにしましょう。
＜楽天公式のドキュメントで使用できないとされている属性＞
datasrc datafld
＜参考リンク＞
MDN ウェブドキュメント
<table>: 表要素
