スポンサーサイト

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

押さえておきたいHTML5におけるタグまわりの変更点

最近ぼちぼちHTML5を勉強しているところですが、そのなかで個人的にへぇ~と思ったタグまわりでの変更点を5つ紹介します。今回は本家W3CのHTML5 differences from HTML4を参考にしました。雑な英訳もあると思いますがご勘弁ください。
html5-5.png

strong要素を入れ子にできる

まず、strong要素の意味についてHTML5では "The strong element now represents importance rather than strong emphasis" ということで、強い強調というよりは重要性を表します。

そして、"The relative level of importance of a piece of content is given by its number of ancestor strong elements; each strong element increases the importance of its contents(HTML5:strong)"(相対的な重要性の度合いはstrong要素の数で表されます。strong要素の数だけ、そのコンテンツの重要性は増します。)ということで、strong要素は入れ子にすることでより強い重要性を示します。

code
<strong>HTMLL5からstrong要素は<strong>入れ子にすることができます</strong></strong>
入れ子にしても見た目が一緒では意味がないので、見た目をCSSで変更するにはこんな感じで。
css
strong{
  font-weight:bold;
}
strong strong{
  color:red;
}
すると、こんな感じに見た目も変わります。
sample
HTML5からstrong要素は入れ子にすることができます

ちなみに、強調・強勢を表すem要素も同じように入れ子にできます。

a要素の中にブロック要素も含められる

ブロック要素という言葉自体HTML5ではなくなったわけですが、pとかhのことです。

"It can also contain flow content rather than being restricted to phrase content" ということで、今までフレーズコンテンツ(span,strongなどインライン要素)だけでなくフローコンテンツを含めることができます。

参考:フローコンテンツ
a  abbr  address  area*  article  aside  audio  b  bdo  blockquote  br  button  canvas  cite  code  command  datalist  del  details  dfn  div  dl  em  embed  fieldset  figure  footer  form  h1  h2  h3  h4  h5  h6  header  hgroup  hr  i  iframe  img  input  ins  kbd  keygen  label  link*  map  mark  math  menu  meta*  meter  nav  noscript  object  ol  output  p  pre  progress  q  ruby  s  samp  script  section  select  small  span  strong  style*  sub  sup  svg  table  textarea  time  ul  var  video  wbr  Text*
* 特定の条件の場合

例えばこんなのもありです。

code
<a href="index.html"><p>このようにa要素の中にp要素を入れることもできます。</p></a>

a要素をCSSでdisplay:blockとしたような感じですかね。

sample

target 属性が非推奨ではなくなった

恥ずかしながら今までかなり使ってました。分かっちゃいるけど止められないんですよね。

code
<a href="index.html" target="_blank">新規ウィンドウで開きます</a>

しかし、HTML5から問題なくなりました。

"target attribute for the a and area elements is no longer deprecated, as it is useful in Web applications, e.g. in conjunction with iframe" ということでa要素やarea要素のtarget属性はインラインフレームなどに役立つものであり、もはや非推奨ではありません。

さすがに、インラインフレーム以外は非推奨なんてことはないですよね。

ちなみにframe要素はHTML5で廃止となっています。

s要素の意味が詳しくなり非推奨ではなくなった

取り消し線という見た目を表していたs要素ですが、HTML5では見た目だけではなくその意味が詳しく定義され非推奨ではなくなりました。

code
<s>s要素は非推奨です。</s>
sample
s要素は非推奨です。

"The s element now represents contents that are no longer accurate or no longer relevant" ということで、s要素は以前は正しかったがその後正しくなくなった、もしくは関係のなくなった内容を表すようになりました。

最初からの間違えていたものを取り消す場合はdel要素を使用します。

この他にも、bやstrongなども意味が変更されています。見た目の装飾だけであればCSSで定義するべきですので、HTMLタグでは見た目だけでなく詳しい意味が定義される傾向にあるようです。

やっぱりimg要素のalt属性はできるだけ使った方がいい

先日同じような内容を取り上げ、再度になりますがご了承を。

HTML5ではalt属性は必須ではないとなっています。

しかし、掘り下げてみると、alt属性は必須ではないけどほとんどの場面で使用した方がいいということになります。

ここはThe img element - HTML5を参考にしました。

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

さらに "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=""と記述する必要があると述べられています。

結局ほとんどの場面でaltは必要となってくることになります。

まとめ
HTML5はより構造が分かりやすくなるよう考えられており、デザインについてはスタイルシートに任せてHTMLでではその意味を詳しくて定義するという方向性が見えてきます。今度は新要素について勉強したいと思います。
フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









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

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