PR

ネットショップ運営に必要なHTMLタグは12種類だけ

HTMLタグをすべて覚える必要はない

ネットショップはHTMLで表現されています。 

静的なHTML、動的に生成されるHTML、そういった違いはありますが、HTMLでネットショップは構築することが出来ます。 

しかしながら、ウェブサイトを作ったことがない、HTMLのことは何も知らない、という担当者(ネットショップ店長)がほとんどではないでしょうか。 

まず、ぼくがいいたいのはネットショップを運営するためにHTMLをすべて覚える必要はありませんよ、ということです。 

なんならHTMLやコーディングの知識が全く知らなくても、HTMLで欠かれたファイルを生成することが出来てしまいます。 

では、その理由を詳しく説明していきます。

ECモールでは利用できるHTMLタグが制限されている

ネットショップで商品ページを作成するときに使うHTMLタグの種類は本当に少ないです。というか、ECモールでは使いたくても使えない事が多いです。 

楽天市場や、Yahooショッピングでは、商品ページやカテゴリページ、トップページに使うことができるHTMLタグを厳しく制限しています。 

これは、出店者が悪意のあるタグを埋め込むことを防ぎ、出店者が無地からくる間違った記述で商品ページの意図しない動きや品質の低下、モール全体に与える影響を排除するためです。 

Yahoo!ショッピングで利用できるHTMLタグ 

例えば、Yahoo!ショッピングのスマホページで使えるタグは以下のとおりです。 

  • <a> 
  • <abbr> 
  • <address> 
  • <area> 
  • <article> 
  • <aside> 
  • <b> 
  • <bdo> 
  • <blockquote> 
  • <br> 
  • <caption> 
  • <cite> 
  • <code> 
  • <col> 
  • <colgroup> 
  • <dd> 
  • <del> 
  • <details> 
  • <dfn> 
  • <div> 
  • <dl> 
  • <dt> 
  • <em> 
  • <figcaption> 
  • <figure> 
  • <footer> 
  • <header> 
  • <hgroup> 
  • <hr> 
  • <hx>(h1~) 
  • <i> 
  • <img> 
  • <ins> 
  • <kbd> 
  • <li> 
  • <mark> 
  • <map> 
  • <menu> 
  • <meter> 
  • <nav> 
  • <ol> 
  • <p> 
  • <progress> 
  • <q> 
  • <s> 
  • <samp> 
  • <section> 
  • <small> 
  • <span> 
  • <strong> 
  • <sub> 
  • <summary> 
  • <sup> 
  • <table> 
  • <tbody> 
  • <td> 
  • <tfoot> 
  • <th> 
  • <thead> 
  • <time> 
  • <tr> 
  • <ul> 
  • <var> 

楽天市場で使用可能なHTMLタグ 

楽天市場のスマホページの商品説明で使用できるHTMLタグは以下のとおりです。 

  • <a> 
  • <img> 
  • <table> 
  • <td> 
  • <th> 
  • <tr> 
  • <br> 
  • <p> 
  • <font> 
  • <b> 
  • <center> 
  • <hr> 

少ないですね。逆に言えば、これだけ覚えればネットショップは完璧に運営することが出来ます。 

あなたがネットショッピングで目にする有名店舗のきれいなページも、この少ないタグだけで構築されているのです。 

自社ECサイトで利用するHTMLタグ 

自社ECサイトであっても、ECモールに比べれば利用できるタグは無制限ですが、やはりすべて覚える必要はありません。自社ECサイトで使用するカートASPがHTMLを書かなくてもきれいなECサイトが構築できるよう、様々なテンプレートを用意しているからです。 

さらに、ECモールであってもAmazonなどのマーケットプレイス型ECモールでは、HTMLタグを意識する必要がありません。 

CSSの制限 

CSS(カスケード・スタイル・シート)はHTMLの装飾を担当する言語です。HTMLにCSSを組み合わせることで、文字を装飾したり、レイアウトを組んだりすることが出来ます。 

しかしながら、CSSはネットショップ運営には必要ないと断言してしまいましょう。 

CSSを使えないモールがありますし、PCページでは可だが、SPページは不可、という制限があるモールが多いからです。 

もちろんデザインがきれいであればユーザーの目を引くことは出来ますが、ネットショップにおいて、デザインは動機付け要因となります。重要なのは必要な情報が記載されているか、動線が適切か、信頼性を担保できているか等の、衛生要因が重要だからです。 

多少デザインがみっともなくても、読みやすく、信頼に足るサイトであれば売上は上がります。それらはCSSがなくても表現することが出来ます。 

ネットショップ運営で覚える必要があるHTMLタグ12種類

ECモールや自社ECサイトのカートASP毎に利用できるHTMLタグを把握するのは現実的ではありません。 

1店舗しか運営しないのであれば使用できるHTMLタグを覚えておくのもよいですが、他店舗運営している場合、HTMLソースは一つであることが望ましいです。 

したがって、どこのECモールでも共通して使える、HTMLタグを覚えておけばよいです。 

  • <a> リンクを設定するタグ 
  • <img> 画像を表示するタグ 
  • <br> テキストを改行するタグ 
  • <p> 段落を表すタグ 
  • <font> テキストの色や大きさを指定するタグ 
  • <b> テキストを太字にするタグ 
  • <center> テキストや画像をセンタリングするタグ 
  • <hr> 横罫線(水平線)を引くタグ 
  • <table> テーブル(表)を作成するタグ 
  • <tr> テーブルの行を作成するタグ 
  • <td> テーブルのマスを作成するタグ 
  • <th> テーブルの見出しを作成するタグ 

※テーブル(表)を作成するときはこれらをセットで使用します。 

まずは上記の12種類を使えるようになりましょう。 

この12種類のタグだけで、ネットショップのサイト構築に必要なことは9割出来ます! 

12種類のタグの使い方や、HTMLを書くためのツールなどは別の記事で紹介していきたいと思います。 

それでは、今日もネットショップの運営頑張っていきましょう。!

この記事を書いた人
ブーブー(BooBoo)

2003年にネットショップを始め、以来ずっとEC専業の事業会社を経営しています。2023年には創業20年になりました。2014年にWebサービスの会社を立ち上げて役員を9期務め、2024年には、ECのコンサルティングを行う会社を新たに設立して代表に就任。これまで一貫してウェブ畑を歩いてきました。ニックネームは大好きな小説の登場人物から。

ブーブー(BooBoo)をフォローする
商品ページ作成・サイト構築
ブーブー(BooBoo)をフォローする
タイトルとURLをコピーしました