初心者が使っていない10のHTMLタグ - Life is Really Short, Have Your Life!!

Nettut+(初心者向けがメインの技術情報提供ブログ)で、The 10 HTML Tags Beginners Aren’t Using | Nettuts+ってのがあったので、英語ボケしないよう意訳してご紹介。

1 . <!– –>

For HTML, commenting can seem like overkill; however, it can be used to define sections, and can help keep your code organized and structured. Labeling the beginning and end of a section really helps with the workflow.

HTMLにおいては、コメントを書くってことがやりすぎのように思えるときがあるな。でも、ちゃんとセクションを定義してくれてキミのコードを体系だてて構造化されているなら話は別だよ。セクションのはじめとおわりをコメントしてくれることが、本当に作業を楽にしてくれる。

2 Table Styles – <thead>, <tbody>, and <tfoot>

<thead>と<tfoot>というタグがあることをこの記事で知った。テーブルの１行目が<thead>で最後の行が<tfoot>。<tfoot>は<tbody>の上にこなくてはならないそうだ。

<table>
 <thead>
  <tr>
   <td>Item</td>
   <td>Qty</td>
  </tr>
 </thead>
 <tfoot>
  <tr>
   <td>Sum</td>
   <td>7</td>
  </tr>
 </tfoot>
 <tbody>
  <tr>
   <td>#1</td>
   <td>3</td>
  </tr>
  <tr>
   <td>#2</td>
   <td>4</td>
  </tr>
 </tbody>
</table>

でもこれ意味あるのか・・・。tbodyは理解できるけどDBから吐き出して表示する場合は最後の行がどこにくるなんてわかんないしねぇ。

3. <optgroup>

The great thing is with <optgroup>, it is possible to create categories (or we could call them headings) for your options.

ドロップダウンにカテゴリがある場合は、optgroupを使ってスッキリした表示を。jQuery使うともっといいよ。

4.Headings – <h1>,<h2>,<h3>,<h4>,<h5>, and <h6>

I know everyone uses heading tags. But, to be honest, I do not remember when the last time was that I used <h3> or lower though. I have no good reasoning aside from I didn't think about it and used something less semantic, like styling text in a <div>.

My point here is: Don't create more work for yourself. Remember to use all of the heading tags.

みんなHタグ使っているけど<h3>より下のは見たこと無いし、<div>で文字をスタイルしている意味がより失われるやり方でやっている人もいる。自分で自分の仕事を作ってはいけません。ちゃんと用意されたタグを(正しく)使いましょう。

5 .<fieldset> and <legend>

確かにコレはあんまり見ない。僕は結構使っているし、入力要素とその見出しと位置的なものがひと目でスッと入るフォームはCoolだし、信頼感があると思う。

6. label

コレは使うべき。labelってclickやhoverが拾えるんだぜ。チェックボックスやラジオボタンをクリックしなくても、ラベルをクリックすればチェックが入る。

<label> is used to define a label to an input element. So what's the big deal? When used, the label itself becomes clickable, making the corresponding input field active. This works for text boxes or radio buttons.

<label>は入力項目がなんであるかを定義するのに使う。何が大きいかって？<label>を使うと、それ自体がクリックできるようになって、入力するフィールドに対応してアクティブになったりするんだ。

<form>
	<label>Name: <input type="text" size="30" /></label>
	<label>Male: <input type="radio" name="sex" /></label>
	<label>Female: <input type="radio" name="sex" /></label>
</form>

7. <blockquote>

何かを引用しているのをちょっとドラマチックに見せたい場合に使うタグ。デフォルトで前後に空白が入り、タグをネストするとタグにmarginがセットされるとのこと。あんま使わないけど、チュートリアルやユーザーガイドなんかに使って印象付けるのはアリかも。

8. <cite>

引用もとの書籍、著者名などを示すタグ。だからなんだって思うかもしれないですが、HTML自体に意味を持たせるってことがこれからのHTMLコーディングは益々必須になってくると思うので、「たんなる斜体の文章｣と｢何かの著書や著者｣では、大きく違う。画面に表示させるだけがHTMLではないってことで。

9.<dl>

最近だとフッターやグローバルメニュー、時にはTableの変わりに表っぽく使う場合も多くなってきた。<ul>や<ol>は使うけど<dl>は見ないなぁってこの日と入っている。tableとdlでは意味合いが全然違うけど、セマンティック厨になってもしょうがない気がするので、下記リンクだけ読んどけばいいと思う。

リストの作成 -- ごく簡単なHTMLの説明

10 '(and other ASCII characters)

文字そのまま使うより記号はアスキー文字を書いたほうが正確にマークアップできることもあるよと言っている。ちょっと手間だけどね・・・。タグを示す < や > は、タグと混同されてしまうからnot properってこと。ちなみにこのエントリも<や>がはてな記法に抵触したり、コメントをそのまま書くとイミフなエントリになるので、特殊文字で書いています。

参考リンクがこちら。HTMLで使えるアスキー文字リファレンス。

HTML ASCII Reference

JSPとかで""そのものを吐き出したい場合とかアスキー文字でレンダリングすればいいのかも。それよりも普通の半角スペースは改行されて、の場合は改行されないってことのほうが重要かもｗ

&nbsp;と普通の半角スペースの違い - うなの日記

人間以外のコンピュータでもアクセシブルなHTMLを。