スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

犯してはいけないHTMLタグの過ち10個

ちょっと前の記事ですが10 HTML Tag Crimes You Really Shouldn’t Commitという記事を見かけておもしろそうだったので紹介します。日本語にすると、犯してはいけないHTMLタグの過ち10個というところでしょうか。

知っている内容も多いかと思いますが、再確認の意味を込めて見ていただければと思います。

1. インライン要素の中にブロック要素を入れない

<a href="#"><h2>これは間違いです</h2></a>

aタグのようなインライン要素の中にhタグのようなブロック要素を入れてはいけません。

<h2><a href="#">これは正しいです</a></h2>

このように、ブロック要素の中にインライン要素を入れましょう

【追記】
HTML5ではインラインとブロックの要素分類がなくなり、代わりに、メタデータ、フロー、セクション、ヘッディング、フレージング、エンベッディッド、インタラクティブというコンテンツの種類が定義されています。

2. 画像に代替テキストのalt属性が入っていない

<img src="sample.gif"  />

alt属性は、Webページに表示されるすべての画像に必須の要素ですので、必ず使用する必要があります。

<img src="sample.gif" alt="サンプル" />

必須の要素ですので、特にテキストで表示する必要がない場合でも、alt=""としておく必要があります。

【追記】
HTML5では「Images whose contents are not known(どのような内容かわからない画像)」に限り、alt属性を省略することができます。写真共有サイトにユーザーが画像を投稿して、代替テキストを提供しなかった場合など、かなり特殊な場面に限られるようです。

The img element - HTML5

さらに 「Such cases are to be kept to an absolute minimum. If there is even the slightest possibility of the author having the ability to provide real alternative text, then it would not be acceptable to omit the alt attribute.(そのようなケース(alt属性を省略する)は必要最低限に留めるべきです。代替テキストを使う可能性が少しでもあるのであれば、alt属性を省くことは受け入れられないでしょう。) 」と述べられています。

ちなみに「A purely decorative image that doesn't add any information(情報を何も加えない純粋に装飾的なイメージ)」についてはalt=""と記述する必要があると述べられています。

3. 必要な場面でリストを使っていない

html<br />
css<br />
javascript<br />
php<br />

このように改行で箇条書きを表すのではなく、リストタグを使うようにしましょう。

<ul>
  <li>html</li>
  <li>css</li>
  <li>javascript</li>
  <li>php</li>
</ul>

4. <strong>や<em>ではなく<b>や<i>を使っている

<b>これ</b><strong>これ</strong>も太字になります。

bタグは太字、iタグはイタリックになりますが、ともに視覚的な意味合いしかありません。ですので、cssのfont-weightやfont-styleを使った方がベターといえます。strongタグとemタグは内容の強調を表すので、内容を強調するときはこれらを使用した方がいいでしょう。

また、HTML5では詳しく意味が定義されているので注意しましょう。

5. 改行を連続して使っている

brタグは改行を表します。
<br />
<br />
<br />
このように改行を連続して使わないようにしましょう。

日記的なブログでなんかよく改行の連打を見かけますが、基本brタグは2つ以上連続して使用してはいけません。

<p>brタグは改行を表します。</p>
<p>連続して使わずpタグとcssで調整しましょう。</p>

このようにpタグでくくり、cssのpadding、marginやline-heightで調整しましょう。

6. 削除された部分に<s>や<strike>を使っている

sタグとstrikeタグはともに視覚的に取り消し線を表しますが、ともに非推奨タグに指定されており、strikeについてはhtml5で廃止となっています。

削除された部分を表すときには、<del>を使い、単に取り消し線を表すときはcssでtext-decoration: line-through;を使いましょう

【追記】
HTML5においてsタグは、変更されたためその内容はもう正確ではない、関連性がなくなったということを表します。間違っていたため訂正します、ということを表す場合はdelを使用します。

7. 要素に対して直接スタイルを指定している

<p style="color: red;">文字が赤くなります</p>

これは私もよく使っており、ウェブ標準ではないというわけではありません。

World Wide Webの利便性を向上させるプロジェクトの1つであるセマンティックhtmlやcssでは、構造とスタイルはそれぞれで定義される必要があるとされいるので、要素内にスタイルは指定してはいけないようです。

8. 画像にborder属性を指定している

<img src="sample.gif" alt="サンプル" border="0" />

imgタグ内のborder属性はHTML 4.01では非推奨とされており、Strict DTDでは使用できません。線を消したいときはcssでimg{ border: none; }としておきましょう。

9. 見出しの<h>タグを使っていない

<p><strong>タイトル</strong></p>
<p>このように、strongタグを使って強調するのではなく、見出しタグを使いましょう。</p>

このように見出しはstrongタグを使わず、hタグを使いましょう。

<h3>タイトル</h3>
<p>このように、見出しには見出しを表すhタグを使いましょう。</p>

10. <blink>や<marquee>などを使っている

点滅して表示するblinkタグや、スクロールして表示するmarqueeタグは一部ブラウザでしかサポートされておらず、HTML5で廃止が予定されていますので使うのはやめましょう。

まとめ

皆さん正しく理解できていましたか?

個人的には7番の「スタイルを直接記述している」というところは初めて聞く内容でした。それと10番のタグは知りませんでした。

後は、実践しているかどうかは別にして知っている内容でした。

strongタグ、hタグや、リストを使うなんてところは、SEO(検索エンジン対策)なんかでよく言われていることですね。

Web標準を守るということはユーザーだけでなく、検索エンジンに対しても優しいサイトになり、検索エンジンが内容を正しく理解することで正しい検索結果に反映されるということになります。

bタグとstrongタグは見た目が一緒だからといって、1文字で書ける楽なbタグばかりを使うのではなく、ちゃんとタグの意味を理解して使い分ける必要があるといえます。

今後HTML5が基準となりWeb標準を守っていないとちゃんと表示されないということもあると思いますので、今のうちに正しいHTMLを理解しておく必要があるのではないでしょうか。

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント
使ったかことのないタグもありますが、とりあえずはセーフ。
キチンとするのが、やっぱり一番ですね。
やっぱ参考になります。
【2011/04/19 10:27】 | mocooww #- | [edit]
最初のaタグでブロックを囲むのはHTML5からOKになったでしょ
【2011/04/19 12:32】 | - #- | [edit]
img の alt 属性は視覚障害の人が使う音声読み上げソフトで利用するらしいので alt="" でよいということはないのでは?
【2011/04/19 13:29】 | k2jp #PnIXDxng | [edit]
HTML5では、imgが完全に装飾以外の役割を持っていないときaltは必須ではないですよ。
【2011/04/19 13:55】 |   #grGQ8zlQ | [edit]
<blink>や<marquee>は初期のころは見た目が変わるからよく使われてましたねえ。
非推奨になってだいぶたちますけどまだ使えるので、<marquee>に関してはお客さんからの要望で実装することが多いです。
【2011/04/19 16:28】 | - #- | [edit]
オリジナルの記事が2年以上前のもののようですね。

みなさんからのご指摘に加え、HTML5 では <s>も、「以前は正しかった情報」として利用可能です。また、i も、学名などの理由で斜体表現をする際に利用します。
【2011/04/19 17:17】 | - #- | [edit]
皆さんご指摘ありがとうございます。

古い記事というのは重々知っていたのですが
役に立つと思い今回紹介させていただきました。

記事を書く際、現在のルールと合致しているか
調べたつもりですが詰めがかなり甘かったようです。

特に最初の二つ、インライン属性とブロック属性、alt属性
のところは致命的ですね。

sタグについては、使えますが使い方を間違えないように、
ということでご理解いただければと思います。
【2011/04/19 18:29】 | 管理人 #E2ywrYdA | [edit]
こんにちは。通りすがりですが少し気になったのでコメントをば…

とても参考になる記事ですが、やはりマークアップ言語の基礎をおさえていれば当然のことなのではないかと思いますね。
7なんかは特に、論理的な記述と視覚的な記述をなるべく切り分けるべきという基本的な考え方ですし…
細かいところはいろいろあるかと思いますが、やはり論理構造を意識しながら文書を作るべきなのでしょうね。

そこら辺を考えれば、いちいち細々した違いを指摘する必要もないわけで…^^;

それにしてもこちらのサイト、個人サイトだったんですね…!どこかの出版社のWebマガジンかと思いました。
【2011/04/21 09:58】 | kiddyhawk #wwtkC5HY | [edit]
こんにちは~
コメントありがとうございます。

確かに基本的な内容ですが、基本的すぎて疎かになって
いることもあるのかなと思い今回記事にしてみました。
実際私は疎かになっていました。。

上っ面だけの知識で、その中にある基本的な考え方が
抜け落ちているのかなと反省中です。
ウェブに限らずどんな勉強においても重要なことですよね。


そうなんです。
このブログはプログラミングとは全く関係のない仕事をしている
サラリーマンが妻子の目をぬってコツコツ書いている個人ブログです。

出版社のWebマガジンなんて言われると素直にうれしいじゃないですか ^^
励みになります!
【2011/04/21 23:18】 | 管理人 #E2ywrYdA | [edit]
はてなブックマークからきました

とても参考になりました

ありがとうございます

ためになりました
【2013/04/30 23:14】 | ユッキー #MP6OAdhI | [edit]
こんにちは

初めてのサイトをほとんど作り終わってそろそろサーバーにアップする予定だったのですが
その前にこのページが見れてとてもよかったです!
いくつか直接スタイルを記入しているとこがあったので、とても参考になりました!

ありがとうございました^^
【2016/05/22 13:39】 | Sinα #- | [edit]
こんにちは。ド素人でHPを作っている者です。すごく参考になりました。特に、borderのところが・・・。昔のやり方でしたので、今はもういらないのか?と悩んでいたので、助かりました。ありがとうございました。
【2016/12/18 01:25】 | ともこ #- | [edit]









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。