非推奨タグ・属性
以前、HTMLはhtmlのページの外枠を作る物であり、文字の装飾+その他はCSSで行うべきという事を書きました。
今回は、もうちょっと掘り下げてHTMLの非推奨タグと非推奨属性の紹介をします。
これは、今後話に出てくるドキュメントタイプにも直結する内容ですので、こんなのもあったなぁ〜ってぐらいは、
最低でも記憶に留めておいてください。
また、ぶっちゃけた話、非推奨タグ・属性を全く使わないってのは結構厳しいモノがあったりするんですよね。
後から非推奨だったことに気付いたりすることも多々ありますし。
実際に当サイトでもそれなりに非推奨要素使っちゃってますからね・・・。
非推奨の物は極力使わないように心がけるようにする。ぐらいで最初は良いと思いますよ。
実際に標準モードではなく互換モードで表示させる場合は非推奨でも関係なく使えちゃいますから。
■非推奨要素(このタグ自体が非推奨)
| 非推奨のタグ | 代替案 |
| applet | objectを使用 |
| center | スタイルシートを使用。 例:<div style="text-align:center;"></div> |
| dir | ulを使用 |
| font | スタイルシートを使用。 例:<span style="color:red;"></span> |
| isindex | input type="text" を使用 |
| listing | preを使用 |
| menu | ulを使用 |
| plaintext | preを使用 |
| s | スタイルシートを使用 例:<span style="text-decoration:line-through;"></span> |
| strike | スタイルシートを使用 例:<span style="text-decoration:line-through;"></span> |
| u | スタイルシートを使用 例:<span style="text-decoration:underline;"></span> |
| xmp | pre使用。ただし、<や>や&はそのまま使えないので、 「<」「>」「&」と記述する必要有り |
次は要素全部ではなく、その要素を使う場合にこの属性は非推奨という物を紹介します。
要素単位で紹介したいので、1つだけ属性をベースに紹介しますね。
■align属性
caption
div
h1〜h6
hr
iframe
img
input
legend
objet
p
table
上記のタグのalign属性は全て非推奨となっております。
代替案としては、全てスタイルシートで設定してください。
例:style="text-align:center"
なお、上記以外のタグのalign属性は非推奨ではありません。
■body
| 非推奨の属性 | 代替案 |
| alink | スタイルシートで設定 例:a:active {color:red;} |
| background | スタイルシートで設定 例:body {background-image:url(bg.jpg) no-repeat;} |
| bgcolor | スタイルシートで設定 例:body { background-color:red;} |
| link | スタイルシートで設定 例:a:link {color:red;} |
| text | スタイルシートで設定 例:body {color:red;} |
| vlink | スタイルシートで設定 例:a:visited {color:red;} |
■br
| 非推奨の属性 | 代替案 |
| clear | スタイルシートで設定 例:br {clear:none;}、br {clear:both;} |
■hr
| 非推奨の属性 | 代替案 |
| align | スタイルシートで設定 例:hr {text-align:center;} |
| noshade | 代替無し |
| size | スタイルシートで設定 例:hr {border-width:2px;} |
| width | スタイルシートで設定 例:hr {width:20px;} |
■html
■img、object
| 非推奨の属性 | 代替案 |
| align | スタイルシートで設定 例:img {text-align:center;} |
| border | スタイルシートで設定 例:img {border:0;} |
| hspace | スタイルシートで設定 例:img { margin-left:10px; margin-right:10px;} |
| vspace | スタイルシートで設定 例:img { margin-top:10px; margin-bottom:10px;} |
■li
| 非推奨の属性 | 代替案 |
| type | スタイルシートで設定(ol、ulによって使える物が違うので注意) 例:li {list-style-type:decimal;} |
| value | 代替無し |
■ol
| 非推奨の属性 | 代替案 |
| compact | 代替無し |
| start | 代替無し |
| type | スタイルシートで設定 例:ol { list-style-type:lower-alpha;} |
■pre
| 非推奨の属性 | 代替案 |
| width | スタイルシートで設定 例:pre {width:200px;} |
■script
| 非推奨の属性 | 代替案 |
| language | typeを使用 |
■table
| 非推奨の属性 | 代替案 |
| align | スタイルシートで設定 例:table { text-align:center;} |
| bgcolor | スタイルシートで設定 例:table { background-color:black;} |
■td、th
| 非推奨の属性 | 代替案 |
| bgcolor | スタイルシートで設定 例:td {backgrouund-color:black;} |
| height | スタイルシートで設定 例:td {height:10px;} |
| nowrap | スタイルシートで設定 例:td {white-space:nowrap;} |
| width | スタイルシートで設定 例:td {width:100px;} |
■tr
| 非推奨の属性 | 代替案 |
| bgcolor | スタイルシートで設定 例:tr {background-color:black;} |
■ul
| 非推奨の属性 | 代替案 |
| compact | 代替無し |
| type | スタイルシートで設定 例:ul {list-style-type:circle;} |
■HP作成-応用編-
・外部ファイルを使ってみよう
・リンクの設定変更
・お気に入りに追加+ホームに設定
・非推奨タグ・属性
・ドキュメントタイプについて
・ブラウザ互換について-width-
・ブラウザ互換について-継承-
・ブラウザ互換について-外部CSS-
|