Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
84
Help us understand the problem. What is going on with this article?
@y_hokkey

HTML5のマークアップで迷ってる新人用に書いたガイドライン

More than 5 years have passed since last update.

文脈と経緯

以下は「一通りのタグの種類や、アウトラインアルゴリズムについては一応理解しているので何も分からない訳ではないけど、デザイン画をどんな風に実際のコードとしてマークアップしていけばいいかよく分からない」と言っていた新人デザイナー向けに書いたドキュメントです。

新人の子は、セクションを厳密に定義しようとして時間をかけすぎてしまっていました。それも重要ですが、実際の業務における優先順位を明確にしたかったという意図もあります。

筆者もデザイナーです。


HTMLのマークアップをする時は、以下の3段階のルールでどんな要素が適当かを判断してください。

第1段階:正しく技術仕様に沿っているか

タグの入れ子関係には一定の仕様があり、
これをHTML5では「コンテンツ・モデル」と言います。
XHTML1やHTML4で言うところの「ブロックレベル要素とインラインレベル要素」の
関係を複雑化して更に分かりにくくしたものです。

・ulの直下にはliしか入らない
・pの中にpは入らない
・aの中にaは入らない

みたいなルールがたくさんあり(もっと複雑です)、これに反する記述は
「それなりに」ブラウザ上で表示されることもありますが、
その挙動は予想が付かないものになり、バグの原因になります。
(挙動が仕様に定められていない為、ブラウザによって異なる動作をする可能性があります。)

たとえば、button要素にa要素を内包すると、
ブラウザによってはa要素のリンクが効きますが、
ブラウザによっては動作しなくなります。

コンテンツモデルを完全に把握するのは
正直かなり面倒くさいのですが、
以下のサイトが割と分かりやすいです。

技術仕様に反さない記述をすることは、
いかなるプロジェクトにおいても必要なことです。

とはいえコンテンツモデルは結構複雑なので、
実は私でも100%把握していないことがあります。

少しばかり仕様から外れても壊れていなければ良いですが、
ブラウザの挙動に支障を来たすような壊れ方をするのは
避けてください。

第2段階:使い勝手に影響するマークアップを正しく行っているか

ラジオボタンやチェックボックスには、label要素がないと
クリックできるエリアが狭くて使いにくくなります。
また、画像のalt属性は仕様上必須です。

入力フォームにlabelが付いていなくても仕様違反ではありませんが、
後述の第3段階に比べると、UIの使い勝手に影響するためより重要です。

(スクリプトを多用する特殊なデザインのUIの場合はこの限りではありません)

第3段階:正しいセマンティクスに沿っているか

セマンティクスとは「情報の意味」のことで、
これは第1段階とは異なるレイヤーで考えるべきことです。

つまり、見出しが見出しとしてマークアップされ、
箇条書きが箇条書きとしてマークアップされ、
アウトラインがアウトラインとしてマークアップされていることを指します。

セマンティクスは軽視されるべきではありませんが、
(というか私は滅茶苦茶こだわりますが)
あえて矛盾することを言うとどうでもよい場合もあります。

  • とにかく見た目が見本と同じになればそれで良い案件
  • とにかく急いで作る必要がある案件
  • 一般向けに公開されるWebサイトではない社内システムなどの案件

上記のようなケースでは、セマンティクスは2の次3の次という
場合も少なくありません。
(やる意味がない、という訳ではなく、やればやるだけのメリットはあります。)

セマンティクスを重視する理由については、以下のページが詳しいです。

[HTML]セマンティックで正しいコードを書こうとする理由 ― 二人の主を戴く技術者 http://webcre8.jp/think/semantic-html-reason.html

まとめると

第1、第2段階の配慮はいかなる状況においても、
コーディング時には気をつかってください。
第3段階については軽視して良い場合もあります。

84
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
y_hokkey
1988年生まれ。多摩美グラフィックデザイン学科を中退。デザイナーとしてグラフィック・エディトリアル・Web・UIのデザインを経験した後、Webフロントエンドエンジニアも経験。現在はITコンサルタントとして外資系SIerに在籍中。※投稿内容は私個人の意見であり、所属企業・部門見解を代表するものではありません。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
84
Help us understand the problem. What is going on with this article?