REDLINE MAGAZINE | ここがHTML5なのだ!な点。REDLINE MAGAZINEトップページへ

すべてのエントリを見る

ここがHTML5なのだ!な点。

朝からSafari4祭りになってた。で、このページHTML5だった。

アップル - Safari - Safari 4の登場です。 - 目の前にひろがる新しいウェブの世界。

HTML 5 ― HTML 4 からの変更点

先日このページ、印刷して読んだ。でもHTML5ってまだ先の話のように勝手に感じてた。だけど今日そのページ見て近くなってんじゃん・・・って不安になったので、アップルさんのページ見ながらHTML5な部分を読む。

DOCTYPE

<!DOCTYPE html>

HTML5の構文ではDOCTYPE宣言は「<!DOCTYPE html>」となる。大文字、小文字の区別はなし。HTML5ではDOCTYPEを標準モードのトリガーにしてる。

2.2 DOCTYPE

文字コードの指定

HTML5では文字コードの指定は3種類ある。BOM付けるか、サーバー側のヘッダーで文字コードを示すか、後はmetaタグで指定。

<meta charset="utf-8">

従来の「<meta http-equiv="content-type" content="text/html; charset=utf-8" />」の指定も引き続き利用は可能。

2.1 文字エンコーディング

上のアップルのサイトでは従来の書き方してる。手打ちするなら<meta charset="utf-8">の方が幸せですね。まぁこの辺り、たいがいコピーしてるけど。

新しい要素

HTML5では文書をよりよく構造化するために、次の要素が新しく追加されました。だそうで、ちょっとだけ増えてる。

3.1 新しい要素

アップルのサイトで使われてたのはこんな要素。何か抜けてるかもしれんけど。

section
文書やアプリケーションにおける、一般的なセクションを表します。h1-h6 と共に用いることで、文書構造を表すことができます。
header
セクションのヘッダを表します。
footer
セクションのフッタを表します。フッタには作者に関する情報、著作権情報などを含むことができます。
nav
ナビゲーションとなるセクションを表します。
inputのtype属性search
但し、元々これはsafariの独自属性で検索窓を表示するものとして前から入ってた模様。参考)なつみかん。 | Safari限定、input type=”search”

IEさんでは新しい要素にCSSが適応できないため、IE用の条件分岐コメントを利用してCSSを適用できるようにしてる。

なんかいろいろと「あーそういうことなんだ」みたいな発見があった。例えばheader要素ってセクションのヘッダを表します。って書いてあるから勝手にsection要素の中で使うものって思い込んでたけど別に外でもいいんだーとか。サラっとソース目で追ってただけだけど、もうちょっといろいろ見てみよう。

(追記)すいません。コレ、めっちゃ嘘&勘違いでした。HTML5やって言ってるのに、なんかエントリ書きながら頭の中ではXHTML2.0の方のsectionの事考えてて、section要素はh要素とともに用いて文書構造を表し(但しh1レベルの影響範囲だったらbody直下にh要素配置)なんたらかんら・・・の件を勝手に浮かべてた。まったくもって勘違い。h要素なんか出てきてないっちゅーねん。うー、恥ずかしい。

<< jQueryでパンくずをうまくスペースに収める |

トラックバック

このエントリーのトラックバックURL:
http://redline.hippy.jp/cgi/mt/mt-tb.cgi/234

ここがHTML5なのだ!な点。 へのトラックバック一覧

» MTで書く記事に「ins」タグを使うときは 送信元 web-conte.com
 Movable Type で書く記事に「ins」タグを使うときは「 (フォーマット: ) なし」で書かないとね、という話。「ins」タグというのは、囲ん...
Trackback time : 2009.06.20

コメント (9)

AppleのページはHTML5としてinvalidなので鵜呑みにしてはまずいですよ。
仕様書を読んだほうが正確で確実だと思います。

>匿名さん
コメントありがとうございましたー。
>invalidなので鵜呑みにしてはまずいですよ。
はい。ページ見てバリデーション通したのでそれは知ってたんですが、実際に正式公開されてるHTML5で書かれてるページを初めて見たので物珍しさというか、どんな風に書いてあるんかなーくらいのノリで書いてました。バリデーションのエラー文も参考になりますね。でももう一度仕様書も読んできます><
ご指摘ありがとうございました。

文書の趣旨から外れて恐縮なのですが、

> <p>なんかいろいろと「あーそういうことなんだ」みたいな発見があった。<del>例えばheader要素って<q>セクションのヘッダを表します。</q>って書いてあるから<strong>勝手に</strong>section要素の中で使うものって思い込んでたけど別に外でもいいんだーとか。サラっとソース目で追ってただけだけど、もうちょっといろいろ見てみよう。</del></p>
> <p><ins>(追記)すいません。コレ、めっちゃ嘘&勘違いでした。HTML5やって言ってるのに、なんかエントリ書きながら頭の中ではXHTML2.0の方のsectionの事考えてて、section要素はh要素とともに用いて文書構造を表し(但しh1レベルの影響範囲だったらbody直下にh要素配置)なんたらかんら・・・の件を勝手に浮かべてた。まったくもって勘違い。h要素なんか出てきてないっちゅーねん。うー、恥ずかしい。</ins></p>

のマークアップの仕方に違和感を覚えます。

del要素は削除された断片なので、 「(追記)すいません。コレ、めっちゃ嘘&勘違いでした。...」 は 「例えばheader要素って...」 に言及できていないことにならないでしょうか。

>シマダさん
その部分、マークアップが妥当かどうかまで考えてなかったです。「言及」するという事に関しても日本語分かる人が見たら分かるやろって勝手に思い込んでた節もあり・・・。ていうか、そんな部分まで見てくださってありがとうございました。

えっと、おっしゃってるのは、それぞれを同じpの中に入れれば良いということでしょうか?それともブロックレベルで扱ってそれぞれのpをdelとinsで括ってやれば良いってことでしょうか??今、delで囲った部分、インラインとして扱ってるので今はins部分も合わせてインラインにしたんですが(今それ自体が好ましい書き方ではない気はしたんですが)、追加したp要素自体をinsで括るのが妥当だって事でしょうか?この要素を追加しましたよ的な。あ、それかtitle属性で補足を入れた方がいいってことですかね・・・。title属性の代わりにinsでなぜ削除したのか追加したつもりだったんですが・・・。(もちろん機械からすると結びつきは薄いでしょうが)仕様書見てもdelとinsの関係で「言及」する事について厳密に決められてる部分がどこに書いてあるのか分からないんですが、delとinsって仕様的に結構自由度高いですよね。私がマークアップする時に考えてるのは時系列に逆らわないというか、普通に人間相手に日本語で文書を書くのと同じようにまず削除してその後で追加した文章を入れるって考えてます。delのcite属性をinsの内容にするっていうのもありなのかもしれないけど、それだと今回のような場合は読む人間が分かりにくいですし・・・。

と、ここまで書いてシマダさんのおっしゃってるのは同じpの中に入れる形か追加部分のp要素全体をinsで括った方がいいっていう意味のどっちかなのかなと思ったんですが合ってますか??
これ追記した時、多分人間が見やすい、読みやすいのを重視して書いたんだと思います。削除した部分の直後に追記いれるよりもスペース開けてすいません、間違ってますって文章入れて読みやすくしたかったという意味なんですが、今使ってるCSSでそのケースで使えそうないい感じで読みやすいように目立たせるようなスタイルがなかったので新しい段落として扱ったんだと思います。(そのためだけにCSS追記するのも面倒なのと、多分おかしな事を書いてたからスタイル作るよりも早く修正したかったと思うんですね)
ここで返信してるこの内容の意味もシマダさんがご指摘くださった内容に合ってるのかどうか分からないですけど・・・合ってたらいいな(n'ω' `)

Redさん

私の考える問題は、 del要素やins要素をどう括るのかではなくて、 単に 「削除された部分 (= del要素) に言及できるのか」 ということなんです。

例えば、

XはAである。 <del>そしてYはBである。</del> <ins>これは間違っていた。</ins>

というマーク付けをされた文書片があるとします。
この場合、 「これは間違っていた。」 の 「これ」 が指すのは何でしょう。
「そしてYはBである。」 でしょうか。 それとも 「XはAである。」 でしょうか。

> 「言及」するという事に関しても日本語分かる人が見たら分かるやろって勝手に思い込んでた節もあり・・・。

それは、 del要素を見てもらえるのが前提ですよね。

幸い私のブラウザはdel要素を表示してくれたので、 「コレ、めっちゃ嘘&勘違いでした。」 がどの部分のことを言っているのか分かりました。
しかし、 HTML 4の仕様書に

> User agents should render inserted and deleted text in ways that make the change obvious.
> For instance, inserted text may appear in a special font, deleted text may not be shown at all
> or be shown as struck-through or with special markings, etc.

と書いてありますから、 del要素が表示されない場合も考えなければならないと思います。

>シマダさん
ご返信ありがとうございましたー。

>それは、 del要素を見てもらえるのが前提ですよね。
ですねー。それは確かに言えてる。ならば・・・
「すいません。コレ」の部分、「すいません。コレ(『例えばheader要素って』・・・以下の文章)めっちゃ嘘&勘違いでした。」とか「すいません。"header要素ってsection要素の中で使うものって思い込んでたけど別に外でもいいんだー"というのはめっちゃ嘘&勘違いでした。」
っていう風にしたら言及できてるって事になるってことですね(n'∀')η

要素については要素との絡みで色々紆余曲折があったようですし、ネット上でもさまざまな時期の説明が錯綜してるので、混乱するのも無理ないかと思います。私もよくわかってませんし。というか、未だにfixしてませんよね…。

うぎゃー、<と>でくくった部分が全部消えてしまった。<header>と<hgroup>です。

>muchoさん
コメントありがとうございました。
いろいろなサイトで続々とまとめ情報が出てきたりして、早く予習復習しなきゃなーと思いつつ、なかなか手が回らない現状です><
まぁでも多分私はしばらくは現状のxhtmlでコーディング続けるような気がしますです・・・。世の中のHTML5のサイトが全体の半数くらいになるまでは実務では現状維持かも・・・。複数人で作業するのに今の所、他スタッフは「HTML5?何それ?」状態なので先は長そうです。




※コメント欄に「<」「>」等を含むソースを記載する場合は実体参照に変換してください。

このページの一番上へ

その他の情報など

最近のコメント

PHP オブジェクト指向の勉強
  • Red - 2010.01.08
  • hogepage - 2010.01.21
  • Red - 2010.01.22
  • - 2011.11.27
  • houseiii - 2011.11.27
Fireworks トリミング画像を一括書出 CS4編
  • Iper - 2009.06.27
  • Red - 2009.06.27
  • mala - 2011.11.17
  • Red - 2011.11.18
jQueryでボックスを上下左右中央に簡単配置
overflow を使用したボックス背景のこと
  • - 2007.12.13
  • Red - 2007.12.13
  • - 2007.12.13
  • Red - 2007.12.13
  • hj - 2011.09.23
IE6 → 透過PNG+overflow=混ぜるな危険(追記有)

メッセージを送る

こちらのメッセージ送信フォームは閉鎖させて頂きました。
御用の方は新しい方のブログ にコメント頂くか、 連絡用のフォーム もありますので、そちらからご連絡ください。