HTML5についての要点
- HTML5とは、最新のHTML規格であり、HTML4.1から追加や変更、廃止されたタグや機能が含まれています。
- HTML4.1で書かれたページをHTML5にする場合、デコード宣言以外にも修正が必要な部分があります。
- HTML5ではインライン要素とブロックレベル要素が細かく分類されており、記述のルールに変更があります。
- ベストアンサー
HTML5について教えてください
当方、HTML5初心者(勉強中)のため、分かりやすく説明して頂ければ幸いです。 HTML4.1で書かれたページをHTML5にするとしたら、デコード宣言(HTML5から追加や変更＆廃止になったタグも含む)。 上記以外で直すべきところはありますか？ あるのであれば例を挙げて頂ければ幸いです。 また、フレーズ・コンテンツの中にフレーズ・コンテンツが入っているというのはマズいのでしょうか？ 例 <p>今日は<span class="gray">曇りだ。<span class="文字サイズ変更">そして寒い。</span></span></p> など。今までインライン要素・ブロックレベル要素と分かれていた要素が細かく分類されていますよね。 この分類によって何か記述のルール変更等はあるのでしょうか。
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
念のため、HTML5 と HTML 4.0 の相違点は下記を参照して下さい。 http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/ 繰り返しますが、HTML 4.0 における廃止予定（非推奨）要素・属性を使わずに書いていたのであれば、HTML5 として修正すべき部分はありません。もし残念ながらそれらを用いていたのであれば、いったん HTML 4.01 Strict に直して下さい。その方が、直接 HTML5 に直すよりは幾らかメリットがある気がします。 HTML 4.01 Strict であれば、下記を除き HTML5 にもそのまま適合します。 ・acronym を abbr に直す ・a の @rev と @charset を消す（RDFa を使う場合は注意） ・img の @longdesc を消す（WAI ARIA で代替可） ・img の @name を @id に直す（HTML 4.0/XHTML 1.0 の時点で直しておくべき） ・head の @profile を消す（GRDDL を使う場合は注意） ・meta の @scheme を消す ・object の @classid、@codebase その他を消す（Flash などを使っている場合は注意） ・th、td の @axis と @abbr と @width と @height を消す ・td の @scope を消す（WAI ARIA で部分的に代替可） ・table の @frame と @width を消す ・col の @width を消す ・head 内の object を消す ・meta の @http-equiv で、"Content-Style-Type" および "Content-Script-Type" であるものを消す これら以外のものは、HTML 4.01 Strict に直した時点で警告されるはずです。また、HTML5 チェッカならもっと細かい警告を出すでしょうから、その指示に従って下さい。 ですが、もっと重要なのは要素型の意味（使い所）です。 ・b はキーワードなど、特別な意味を持たないが表現を変えたい語句を表します ・i は学名など、通常とは異なるニュアンスの語句であることを表します ・hr は段落レベルでの主題変化（場面転換など）を表します。 ・small は本題とは区別したい脚注や法的条項などを表します。 ・strong は重要語句を表します。 ・em は強調語句を表します。 ・cite は作品名を表します。 ・sup、sub は、上付き・下付きにしないと意味が変わってしまうようなもの（数式など）に使用します。 これらは HTML 4.0 にもありましたが、HTML5 で意味が変更されたものです。これらは機械的なチェックができません。HTML5 ブラウザは HTML 4.0 文書でも XHTML 1.0 文書でも上記の意味に基づき解釈するでしょうから、これに関しては十分に注意して下さい。 -- なお、HTML 4.0 で使えたタグ短縮・省略は、HTML5 でも使える場合があります。 <!DOCTYPE html> <title>タイトル</title> <p>段落 これは間違いではなく、真っ当な HTML5 文書です。タグを打ち込むのが面倒であるなら、場合によってはこうした省略を駆使するのもアリでしょう。少なくとも、書くべきタグを書かないよりは、幾らかマシです。
その他の回答 (1)
- Chaire
- ベストアンサー率60% (79/130)
HTML 4.1 というのは公式に存在しません。HTML 4.01 の間違いでしょうか。 > 直すべきところはありますか ありません。デコード宣言なるものはよく分かりませんが、HTML5 は大部分、HTML 4.0 を包含するように設計されています。 そもそも、HTML5 で廃止された要素・属性の大部分は、HTML 4.0（1997 年勧告）で廃止予定（しばしば非推奨と曖昧に訳される）とされていたものです。それらは XHTML 1.1（2001 年勧告）において実際に廃止されています。 つまり、質問者さんが心配している HTML5 の廃止要素・属性は、十年前にとっくに廃止されているものなのです。それらが今、使えなくなっているでしょうか。そうではないでしょう。 ページ制作者は、廃止されたものを使ってはならない。しかし、ブラウザは廃止されたものであっても、一定期間はサポートし続けなければならない。これは HTML5 規定自身が明言しています。 それに、ブラウザがサポートを止めたとしても、HTML を正しく使っていれば、実は問題にならないのです。 --- <font color="gray"/> が廃止された理由は何か。それは、「文字の色」というのが文章の構成・構造とは直接関係ないからです（例外もありますが、今は考えません）。例えば、音声で読み上げる端末には、この「グレーであった語句」が何を意味するのか分かりません。 しかし、<strong/> を使って「重要語句」であることを示し、CSS で strong { color: gray } とします。すると、音声端末は strong「重要」という目印により、はっきりゆっくり読み上げることができます。HTML は意味（構成、構造）を伝え、CSS は意味を具体化します。 これを踏まえて： > <span class="gray"> > <span class="文字サイズ変更"> このような class 属性の使い方が、廃止された font の再現に過ぎないことは明白です。HTML5 規定は、このような class 属性の書き方を「すべきでない」と明言しています。 > フレーズ・コンテンツの中にフレーズ・コンテンツ マズいのは class="gray" などというクラス名の付け方であり、語句に <em><strong><i>...</i></strong></em>「重要 strong な学名 i の強調 em」などとタグの重ね付けをすること自体は何の問題もありません。 --- さて、HTML5 ブラウザは未知のタグであっても無視せず、「何かの目印がある」ことだけは認識します。 例えば、HTML5 では acronym 要素（頭字語）が廃止されました。一方、ある HTML 4.0 文書には acronym「頭字語」という目印が残っています。HTML5 ブラウザは、その目印が頭字語を表すものだとは「忘れてしまった」けれども、その「何か」に CSS でスタイル付けすることはできます。詰まるところ、今までのブラウザと同じ表示になります。 極端な話、ブラウザが font のサポートを止めたとしても、CSS から font[color="gray"] { color: gray } のようにすれば今まで通りなのです。何も恐れることはありません。 私は、必要に応じて HTML 4.01、XHTML 1.0、XHTML 1.1、自作 XHTML および HTML5 などを使い分けています。これらの文書型にはそれぞれの目的があり、その目的に応じて使える要素型や属性も異なるからです。 HTML におけるタグは、単なる目印に過ぎません。廃止が怖いから常に最新版を、というものではないのです。 --- もしサポートを気にする必要があるとしたら、ブラウザ内部にガッチリ食い込むようなメディア再生系列（audio、video など）です。が、そもそもこれらは HTML5 からのものであり、サポート終了を気にする段階ですらありません。 HTML による構造化と CSS によるスタイルの分離という原則は、HTML 4.0 の方が分かりやすいと思います。ですから、HTML5 よりも HTML 4.0 をきちんと覚えることをお勧めします。この原則は HTML5 に（かなり強烈な形で）受け継がれており、それを知らずにカタチだけを HTML5 にしても、ほとんど意味がないからです。
お礼
ありがとうございます。 すみません、HTML4.01の誤りでした。→HTML4.1 grayは咄嗟に出てきたものです。 途中で文字色等を変更してその指定を引き継いだまま文字サイズの変更をするためには(逆も然り)どうマークアップすれば良いのでしょうか？
補足
もう少し足掻いてみます。ありがとう御座いました。
関連するQ&A
- class指定したHTML要素の背景色を変えるには
HTML文書中で，class指定した要素の背景色を変更するには，どのようにしたら良いのでしょうか。 例： <div id="HOGE"> <p class="hoge"> Hellow! </p> </div> id指定の要素に対しては， document.getElementById('HOGE').style.backgroundColor="red"; として成功しましたが，class="hoge"に対してはどのように指定すれば良いのかわかりません。 よろしくお願いします。
- ベストアンサー
- JavaScript
- HTMLへ要素の挿入について
HTMLを文字列に代入した後に、img要素にｓｒｃやwidhtなどのプロパティを 追加したいのですが可能でしょうか。 もし可能でしたら方法をご教授よろしくお願いします。 例 var elem = '<div class="box"><div><span></span></div><img /></div>'; どうぞ宜しくお願いします。
- ベストアンサー
- JavaScript
- HTML5メールフォームの作り方
お世話になります。HTML5のテンプレートを使用してメールフォームを作成しようとしておりますが、なかなかうまくいきません。action=""にメールアドレスを入れてみましたが、できませんでした。どなたかお分かりの方いらっしゃいましたら、どうかよろしくお願い致します。 <form id="contact" action="contact.html" method="post"> <div class="form_settings"> <p><span>Name</span><input class="contact" type="text" name="your_name" value="" /></p> <p><span>Email Address</span><input class="contact" type="text" name="your_email" value="" /></p> <p><span>Message</span><textarea class="contact textarea" rows="5" cols="50" name="your_message"></textarea></p> <p style="padding-top: 15px"><span> </span><input class="submit" type="submit" name="contact_submitted" value="send" /></p> </div> </form>
- ベストアンサー
- HTML
- HTML構造の作り方
HTMLを書くときにidの中に複数のclassやidを入れることがあると思いますが、うまくいきませんでした。 アメーバブログのフリースペースにHTMLを書いて、それをCSSで編集するようにしています。 ■私の書いたコード <div id="footerArea"> <div class="footerMenu">...</div> <div class="footerInArea"> <dl class="mobile"> <dd class="qrCode">...</dd> </dl> <p class="copyright">...</p> </div><!--//footerInArea--> </div><!--//footerArea--> このようなコードを記述して、CSSで装飾して添付画像のようなHTML構造を作ろうと試みたのですが、GoogleChromeの要素検索で調べてみると領域がきいてませんでした。 具体的には.footerMenuが高さ0px。 .footerInAreaは.footerMenuを含まない領域なはずなのに含んでいる。 dl.mobileとdd.qrCodeがなぜか.footerMenuや.footerInAreaを含む要素になっている。 原因がわからずにいます。 ブログはこちらです。 http://ameblo.jp/3800millionbp/ どのようにしたら構造がしっかりと決まりますでしょうか？ HTML構造の作り方もかねてご教授いただけると幸いです。
- ベストアンサー
- HTML
- HTML5に移行を見据えた上で
ビルダー使いの初心者でWeb作家です。 fontタグが廃止になるということを知り、サイトのタグを(全２００ファイルほど)をspanに全置き換え完了したはばかりです。 今度は「<br>タグの連続はいけない」と言うことを知り全て<p>～</p>で括る作業が完了したばかりです。 http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ↑上記サイトでチェックしたところ構文エラーはないですけれど 例文です。 <p><span class="red">「今日は寒いね」</span><br> 彼はそう言って笑った。</p> <p><span class="blue">「あ…、雪だ」</span></p> ↑ここは<div class="blue">などに置き換えるべきである。 それは分かっているのですけれど、修正個所が多すぎるため直しようがないんです(これ以上執筆を停滞させるわけにもいきませんし)。 ある意味、文法違反ですよね。ブラウザ上でも問題なく表示されています。 １．直さない場合、将来的に何かマズいことはありますか？ ２．例えば…、文法違反をすると何か起こるのでしょうか？ 私小説のため、認証をかけてありますけれど(持病の話し等が出てくるため極親しい人にのみ公開しています)、そのためSEO対策は重視しておりません。 どなたか教えて下さい。
- ベストアンサー
- HTML
- HTMLのclass属性について
HTMLのclass属性について class属性にスペースを含ませることはできますか? 一例として、<p class="info game"> のように
- ベストアンサー
- HTML
- HTMLメールの雛形
タイトル通りなのですがHTMLメールの雛形を作成しています。 自分なりに調べてみたのですが基本テーブルデザインでCSSは インライン、全体のサイズも軽くするよう心がけるというような 事なのですがわからない点があります。 1・テーブル幅の妥当な線は？ 2・divタグも問題なく使用できる？ 3・フォントサイズを指定するには？ 1については、現状100%のテーブルで枠を作りセンター寄せで600pxの テーブルをつくりそこにコンテンツを表示しているのですがこれが 大きいのか小さいのか微妙なところで表示に問題ないものか不安な ところです・・・ ※システムができていないので実際に送信しての確認は現在不可 です。 2については特に問題ないと思うのですがテキストなどをインラインCSS で設定する場合などpではなくdivでも問題ないものかと・・・ 3については全てデフォルトではなく特定の箇所ごとに変更したく 何px位で指定してやればちょうどいいものかと・・・ 単純にブラウザで表示するだけであれば問題ないのですが初めてな もので不安要素だらけですw その他注意点などお気づきの情報があれば教えて頂けますと幸いです。 宜しくお願い致します。
- ベストアンサー
- HTML
- HTMLでテーブル内のリンクに色付けしたい。
＝＝ＨＴＭＬ <table class="class1"> <tr> <td class="class2"> <p> ああああああああああ <span class="class3"> <a href="xxx.html">別サイトへ</a> </span></br> </p> <p>あああああああああ</p> </td> </tr> </table> ＝＝ＣＳＳ td.class2 .class3 { /*ダウンロードの文字*/ text-align:right; /*行揃えの位置や、均等割付を指定*/ float:right; /*要素の左または右寄せを指定*/ color:#FF0009 /*文字の色を指定*/ } 部分抜粋でこんな感じのプログラムを書きました。 ＣＳＳの text-align と float:right はＨＴＭＬの『別サイトへ』の文字にかかってしっかり右端に寄ってくれます。 しかし文字の色が変化してくれません。 問題はリンクなので <a........>別サイトへ</a> となっていて<a>の指定をＣＳＳ側でもやってあげないといけないのはわかっているのですがどう書けばいいのか分りません。 ・td.class2 a.class3 { ・td.class2.class3 a.class3 { ・.class2.class3 a.class3 { などで初めて td.class2 .class3 { /*ダウンロードの文字*/ text-align:right; /*行揃えの位置や、均等割付を指定*/ float:right; /*要素の左または右寄せを指定*/ } td.class2.class3 a.class3 { color:#FF0009 /*文字の色を指定*/ } などと書いたりしたのですが文字の色に変化がありません。 この場合どう書けば文字の色に変化をつけれるんでしょうか？
- 締切済み
- HTML
- Another HTML-lint gatewayでHTML文書の文法
Another HTML-lint gatewayでHTML文書の文法をチェックしましたが、次の項目 の修正方法がわかりません。 HTMLヴァージョンは「XHTML1.0 Transitional」（DreamweaverCS5） (1)<a> と </a> の間が空です。 <p><span class="syougyou"><span class="syuuhenn"><img src="image/otaxtitlle4.jpg " width="158" height="27" alt="周辺業務" /></span></span> <a name="risuku " id="risuku"></a> </p> (2)<div> と </div> の間が空です。 下記の本サイトTOPpageの234,242行 ＜参考ＵＲＬ＞ http://openlab.ring.gr.jp/k16/htmllint/htmllint.html http://otax81.com/
- 締切済み
- その他（インターネット・Webサービス）
- パース style=display:none 取得
はじめまして。 PHPでHTMLのパースを勉強しております。 そこで質問なのですが、 file_get_contentsで、style="display:none"の指定がされているタグ内のテキストを 取得することは可能でしょうか。 説明が悪くてすいません。 下記の例の場合、「タイトルその1」を取得したいです。 <div class="list1" style="display:none;"> <span class="title">タイトルその1</span> </div> 以上、どなたかご返答頂けますと幸いです。
- 締切済み
- PHP
お礼
度々ありがとうございます。 せっかく勉強中なものですから正しい構文をキチンと学びたいです。 <span>で文字の装飾を引き継いだまま、次の装飾を指定すると言うことはダメなのでしょうか(一旦</span>で閉じてから新たに指定をし直すべきですか？)。 意味が変更になったタグは置き換えましたが、既存ページの移行をする予定はひとまず保留にしています。 今まで何気なく使ってきた「文字の装飾」について新規ページをHTML5で作成する際に独学ゆえ気になりました。 大変分かり易い回答をありがとうございます。 先ほどの件に戻ります。 実際にはCSSにて色の指定や大きさなどしてありますけれど、正しい装飾の方法を教えてください。
補足
追記です。HTML 4.01 Strictにします。