個人情報取扱い要素のコーディング方法

Question

ポートフォリオの個人情報取扱いの部分を作成しているのですが、下記サイトを見ると、divで囲ってhタグを使っていますが、自己完結しているのでdivではなくアーティクルではいないでしょうか？

・URL
https://www.theport.jp/

・ソース

<div id="privacy"> <h3>個人情報取扱いについて</h3> <h4>個人情報取扱い同意書</h4> <p>弊社はお客様の個人情報をお預かりすることになりますが、そのお預かりした個人情報の取扱について、下記のように定め、保護に努めております。</p> <h5>利用目的</h5> <p>1)お問い合わせに対する回答を行うため<br> 2)資料請求に対する発送のため<br> 3)商品納品のため<br> 4)サービス実施のため<br> 5)弊社の商品、サービス、催し物のご案内のため<br> 6)アンケート調査、モニター募集のため</p> <h5>第三者への提供</h5> <p>弊社は法律で定められている場合を除いて、お客様の個人情報を当該本人の同意を得ず第三者に提供することはありません。</p> <h5>個人情報の取扱い業務の委託</h5> <p>弊社は事業運営上、お客様により良いサービスを提供するために業務の一部を外部に委託しており、業務委託先に対してお客様の個人情報を預けることがあります。この場合、個人情報を適切に取り扱っていると認められる委託先を選定し、契約等において個人情報の適正管理・機密保持などによりお客様の個人情報の漏洩防止に必要な事項を取決め、適切な管理を実施させます。</p> <h5>個人情報提出の任意性</h5> <p>お客様が弊社に対して個人情報を提出することは任意です。ただし、個人情報を提出されない場合には、弊社からの返信やサービスを実施ができない場合がありますので、あらかじめご了承ください。</p> <h5>個人情報の開示請求について</h5> <p>お客様には、貴殿の個人情報の利用目的の通知、開示、訂正、追加、削除および利用又は提供の拒否権を要求する権利があります。詳細につきましては下記の窓口までご連絡いただくか「<a href="privacy/">個人情報保護方針</a>」をご確認ください。</p> <p>お問合せ先：個人情報問合せ窓口<br> </p> </div>

・自分の思うソース

<form action="" role="form"> <dl> <dt><label for="name">お名前</label></dt> <dd><input id="name" name="name" onclick=”” autofocus required></dd> <dt><label for="tel">電話番号</label></dt> <dd><input id="tel" name="tel" onclick=”” required></dd> <dt><label for="email">メールアドレス</label></dt> <dd><input id="email" name="email" onclick=””></dd> <dt><label for="body">コメント</label></dt> <dd><textarea id="body" rows="5" cols="30" name="body" placeholder="お時間があれば、具体的なご用件をお聞かせください。" onclick=”” required></textarea></dd> <!-- 空のonclickは、iOS5でも、テキストクリックで選択できるようにする為 --> </dl> <article id="privacy"> <h3>個人情報取扱いについて</h3> ～ </article> <button class="contact__submit-btn"type="submit">送信</button> </form>

Answer 1

個人情報取り扱いがページ内で重要なコンテンツであればarticleでも問題ないかと思います。
ページ内で補足情報という位置づけである場合はasideを使うのもありです。
そのセクションがコンテンツとしてどれほどの重要度を持つか、記事として配信するものか、補足情報か、など情報の重みによってタグを使い分ける事が大切です。

Comments

[退会済みユーザー]

ありがとうございます。

確かに補足情報ですね。
下記で問題なさそうですね。divは装飾に使うので、おそらく間違っていませんか？

<form action="" role="form">
<dl>
<dt><label for="name">お名前</label></dt>
<dd><input id="name" name="name" onclick=”” autofocus required></dd>
<dt><label for="tel">電話番号</label></dt>
<dd><input id="tel" name="tel" onclick=”” required></dd>
<dt><label for="email">メールアドレス</label></dt>
<dd><input id="email" name="email" onclick=””></dd>
<dt><label for="body">コメント</label></dt>
<dd><textarea id="body" rows="5" cols="30" name="body" placeholder="お時間があれば、具体的なご用件をお聞かせください。" onclick=”” required></textarea></dd>
<!-- 空のonclickは、iOS5でも、テキストクリックで選択できるようにする為 -->
</dl>
<aside id="privacy">
<h3>個人情報取扱いについて</h3>
～
</aside>
<button class="contact__submit-btn"type="submit">送信</button>
</form>

[ShoheiTai]

開発者がHTML文書のアウトラインや意味付けを意識するかしないかによるので一概に「間違い」とは言えません。これらは必須のタグではないので。。

ただ、HTML5っぽく書くのであればもちろんasideやarticleを使ったほうがSEO的にもいいですし、かっこいいですよね。
アウトラインを意識することでクローラが解釈しやすくなると思いますし、可読性も向上します。