HTML5のsection,articleについて

前へ 次へ
このQ&Aのポイント
  • HTML5では、<section>要素を使用することで、関連したコンテンツをグループ化することができます。セクション内には、見出し（<h2>）とコンテンツ（<p>）を配置することができます。ただし、<h2>要素は<section>要素の外部では使用するべきではありません。
  • <article>要素は、独立したコンテンツのセクションを表します。一般的に、新聞記事やブログ記事などの単独のコンテンツに使用されます。<article>要素内には、記事の本文や画像などの関連するコンテンツを配置することができます。また、<aside>要素は、<article>要素内で他のコンテンツとは関連のない情報を配置するために使用できます。
  • 上記のHTMLコードでは、<article id="container">要素がページの全体を表しています。この中に、ヘッダー（<header>）やナビゲーション（<nav>）、フッター（<footer>）などのセクションが含まれています。また、<section>要素も複数存在し、それぞれのセクションには見出し（<h2>）とコンテンツ（<p>）が配置されています。ただし、<header>や<nav>、<footer>要素は除外しても問題ありません。また、<h1>要素はロゴや会社名ではなく、サイト上部に表示される１行文として使用することが推奨されています。
回答を見る
  • ベストアンサー

HTML5のsection,articleについて

１．sectionについて h2とh2に関する記事pがある場合 <section> -<h2></h2> -<p></p> </section> でいいですよね？h2はsectionの外・・・ではないですよね？ （<div id="section">的に使う） 2.article/asideについて <article> -コンテンツ -<aside>関連ないもの</aside> </article> みたいに「article内」でasideを使い除外していいのでしょうか？ （<div id="container">的に使う） 3.全体として <article id="container"> -<h1></h1> -<aside> --<header></header> --<nav></nav> -</aside> -<section> --<h2></h2> --<p></p> -</section> -<aside> --<footer></footer> -</aside> </article> ではどうなんでしょうか？ header/nav/footerを除外するかどうか h1をロゴ・会社名にせず、サイト上部の１行文にするべきか そこらへん調べたのですが納得できるはっきりしたものがないので、よろしければご回答願います

noname#163110
noname#163110
  • HTML
  • 回答数9
  • ありがとう数9

質問者が選んだベストアンサー

  • ベストアンサー
  • Chaire
  • ベストアンサー率60% (79/130)
回答No.8

少しだけ整理させて下さい。 まず、HTML(5) のセクションとは文書のアウトライン（典型的には目次）と対応するものです。決して「レイアウト分割」のためのものではありません。まあ、アウトラインを利用してレイアウトするのは自由ですが。 ひとつの判断基準として、見出しを置けるならセクションである可能性が高い。逆に、見出しを置けないなら、セクションではない可能性が高い。 --- セクションが article であるか、ひとつの判断基準は「文責」です。通常、文責は address で示されますが、この address の有効範囲は一番近い article です。一番近い article がなければ、ページ全体（body）の文責を示します。 <body> 　<h1>論文集</h1> 　<article> 　　<h2>宇宙について</h2> 　　<!-- この article の文責 --> 　　<address>onestone@example.org</address> 　<article> 　<!-- 論文集の編集責任者 --> 　<address>god@example.org</address> </body> --- セクションが aside であるか、ひとつの判断基準は「なくても本文に影響ないか」です。賢いブラウザは、メインビューから aside を消し、その代わりサイドバーに表示するかもしれません。 <article> 　<h2>宇宙について</h2> 　<aside> 　　<h3>編集者のコメント</h3> 　　<p>この論文は素晴らしい。</p> 　</aside> <article> 文書構造を反映したデザインなら、仮に aside を消してもデザインに支障がないはずです。少なくとも、aside を消すとレイアウトが崩れるようでは、何かが間違っています。 --- nav は……意外に難しい。いわゆる「スキップリンク」を設けずともブラウザが適当にスキップしてくれるナビブロック、そして、ページ内で道に迷った時にはブラウザが「こことここにナビブロックがあるけど、どっちに行く？」と聞いてくれるようなもの、それが nav です。 どっちのナビブロックに行くか選ぼうとして、ブロックにラベル（見出し）がなかったなら選びようがない。だから、見出しが必要なのです。まあ残念ながら、こんな賢いブラウザは未だにありませんが。 そもそも、ブラウザは利用者をナビゲートするものである以上、nav は非常に重要な要素のはずなんですが、仕様書でもいまいち歯切れが悪いのですよね。 --- header と footer は No.5 に書いた通りです。それ以上でも以下でもありません。

noname#163110
質問者

お礼

回答ありがとうございます ＞その代わりサイドバーに表示するかもしれません。 この考え方を基準に考えてみます。 ＞賢いブラウザ アウトラインの厳密なチェックができるものがあればいいんですが・・・

noname#163110
質問者

補足

お二人ともご丁寧にありがとうございました。

その他の回答 (8)

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.9

仕様書で言うと Note:The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline. 　4.4.2 The section element — HTML5: Edition for Web Authors ( http://www.w3.org/TR/html5-author/the-section-element.html#the-section-element ) section要素は汎用コンテナブロックではない。スタイリングやスクリプトで必要な場合はdiv要素を使うべきである。一般的に文書の（その文書を構成する要素としての）アウトラインのリストアップとなるときに使う。 　文字通り、一般的文章では章や節、項に当たるものを括るために使用する。と考えればよいかと・・ 　Textだと、上位レベルから chapter（章） section（節） subsection（項） subsubsection（目） paragraph（段落） subparagraph（小段落） と、階層が決まっていましたが、HTML4.01では、divとh1～h2で区別するしかなかった。(多分に同じ科学系文書を出自にしているHTMLはTexの考え方を流用していると見受けられる) 　HTMLでは、 section 　|--h1 　|-- section 　　　　|-- h1 　　　　|-- section とh1～h6の階層ではなく、sectionの階層で、Texのchapter→section→subsection→subsubsectionに articleについては、文字通り「記事」と訳すほうが良いでしょう。「記事」ですから、それ自体が完結しているのがsectionとの違いで、 <article> 　<section></section> 　<section></section> </article> あるいは、 <section> 　<section></section> 　<article> 　　<header></header> 　　<footer><footer> 　　<section></section> 　</article> </section> も当然許される。 　HTML5では、[文書を構成する要素]を、マークアップすることに重点が置かれている。--HTML4.01でもそうだったけど、なにせ意味のある要素がなかったためdivを使わざるを得なくて、<div class="contener">とか<div class="wraper">のような、TABLEとなんら変わらないマークアップが行われてきた事への反省かと。 　示された例文に戻ると <article id="container"> 　は、その変なマークアップを引きずっているようで・・ <body>直下にあるなら <body> 　<article id="TOP"> 　　<header></header> 　　<section></section> 　　<footer></footer> 　</article> </body> 　のほうが、気持ちよい(^^) HTML5: Edition for Web Authors [著者のためのHTML5]( http://www.w3.org/TR/html5-author/ ) 　が資料としては良いかも・・

noname#163110
質問者

お礼

回答ありがとうございます。 タグを記号っぽく見ていたから理解できなかったのだと思いました 英単語として扱ってからなんとなく理解できるようになりました。 （Texのほうも少し見てみました。）

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.7

＞僭越ながら、No.4 について、article は「記事、論文、論説」であり、要約（abstract）ではないのでは。 　確かに、私は <header> 　<hgroup> 　　<h1>サイト見出し</h2> 　　<h2>ページ見出し</h2> 　</hgroup> 　<article id="abstruct" class="abstract"> 　　<p>要約</p> 　</abstruct> </header> <section id="first"> 　・・・と使ってます。間違ってしまった。

noname#163110
質問者

お礼

回答ありがとうございます

  • Chaire
  • ベストアンサー率60% (79/130)
回答No.6

僭越ながら、No.4 について、article は「記事、論文、論説」であり、要約（abstract）ではないのでは。 例えば、データベースに「記事」が保存されている。それを取り出してそのまま表示することもできるし、補足的なものをくっ付けて、あるいは他の記事と一緒に表示しても良い。とにかく、それ自体で完結している（self-contained composition）ような内容が article です。 ですから、ページ全体も（考えようによっては）article になりえます。別に、article の中に article があっても構いません。文学全集のように、ひとつひとつの作品（article）を組み合わせてひとつの作品集（article）にするのも、よくあることです。 <article role="document"> 　<h1>野比のび太迷言集</h1> 　<article> 　　<h1>第一巻の迷言</h1> 　<article> 　<article> 　　<h1>第二巻の迷言</h1> 　<article> </article> ウェブアプリでは、ひとつのウィジェットが article になりえます。 <article role="application"> 　<header> 　　<h1>のび太のステータス</h1> 　　<ul role="tablist"> 　　　<li role="tab">能力</li> 　　　<li role="tab">特技</li> 　　</ul> 　<header> 　<section role="tabpanel"> 　　<h1>能力</h1> 　</section> 　<section role="tabpanel"> 　　<h1>特技</h1> 　</section> </article> なお、WAI ARIA をサポートする支援ソフトであれば、role="document" の中では文書モードのキー操作（例えばスペースバーでスクロール）、role="application" の中ではウィジェットのキー操作（例えばスペースバーでタブ切替）のように、振る舞いを変えるでしょう。 ※ただ確かに、body 内を article でくくる必要はありません。私も以前、勘違いしていましたが。 --- aside は、DocBook では sidebar という「あら、言い切っちゃったよ」的な名前になっています。まあ、文書を読んでいるとき、メインのペインではなく、サイドバー（補助ペイン）に補足的に表示されるようなもの、それが aside です。 セクションを使ったアウトライン・エディタや、複数のペインを自由に飛び回るハイパーテキスト・アプリケーション。どう使われるのか不明と言われがちな HTML(5) のセクションですが、こうして見ると案外、応用例はありそうではないでしょうか。 ブラウザの機能強化が「マルチメディア」に偏っていて、こういう方面の（ハイパーテキストを扱う意味での）機能が、昔からの貧弱なままであるのが問題なのです ;-)

noname#163110
質問者

お礼

回答ありがとうございます role属性・・・しらなかった（汗） やっぱり本じゃだめですね・・・載ってませんでした ２つの例がわかりやすいです参考になりました

  • Chaire
  • ベストアンサー率60% (79/130)
回答No.5

No.2 補足より。 > ふつうはいきなりulだけになると思いますが ならば、別に nav である必要はありません。 <section> 　<header> 　　<h1>苦悩の果てに</h1> 　　<p>絶望のどん底にいるのび太。立ち上がれのび太！</p> 　　<ul role="directory"> 　　　<li><a href="...">裏山にて</a></li> 　　　<li><a href="...">和解</a></li> 　　</ul> 　</header> 　... </section> このように header に ul を置けば十分です。 HTML(5) のセクションの説明と称して、いわゆる「ヘッダ」「ナビ」「メイン」「フッタ」のページ分割図のようなものを描いているサイトは、十中八九、何かを誤解しています。 HTML(5) のセクションは、あくまで目次（正確にはアウトライン）に結び付いています。だから、見出しを置けない部分はセクションではない可能性の方が高い。 header は「セクションの導入部」、典型的にはリード文や見出し、要約などが含まれます。名前が header だからと言って、別に冒頭に置く必要はありません。末尾に置いても構いませんし、かつ、何個置いても構いません。それが導入部である限りは。 footer は「セクションのメタ情報」、典型的には著者情報や関連リンクなどが置かれます。これも、別に末尾に置く必要はなく、何個あっても構いません。 --- もし「ページ分割」をもとに考えるのなら、それは HTML(5) のセクションではありません。WAI ARIA のリージョンです。 <div role="document"> 　<div role="banner">...</div> 　<div role="main">...</div> 　<div role="contentinfo">...</div> </div> banner、main、contentinfo は、ひとつの document 内で 1 個ずつでなければなりません。WAI ARIA をサポートする支援ソフトは、キーボード操作によってこれらのリージョンを切り替えたり、一覧を作ったりするでしょう。 WAI ARIA のリージョンと、HTML(5) のセクションを組み合わせても構いません。しかし、両者を混同しないで下さい。特に、HTML(5) のセクションを「レイアウトの分割」と誤解しないで下さい。 あと、純粋理性批判と目次ジェネレータはただの例示です。プレースホルダです。

noname#163110
質問者

お礼

回答ありがとうございます ＞見出しを置けない部分はセクションではない なるほど・・・別になくてもってところなんですね ＞セクションを「レイアウトの分割」と誤解しないで下さい。 マークアップとレイアウトで divには気をつけようと思っています。

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.4

No.1です。 ＞たとえばHTML4のサイトを作り直す場合にどうなのかなあと思ったのですが・・・ 　なぜ、現在HTML4で完成しているものをHTML5にする必要はありません。HTML5でないと使えないvideoとかaudioとかを使う必要があるのなら、更新になります。 　HTML5のロードマップだと、勧告は2014年になりそうです。 　HTML4.01では、文書構造を示す要素が欠落していたため、tableやdivを使ったマークアップが使われ続けた反省から、新しい要素が追加されました。 　HTML4.01でも、きちんと <div class="section"> 　<div class="header"> 　　<h1>見出し</h1> 　</div> 　<div class="section"> ・・・・ 　とマークアップされていれば、なんら問題はないでしょう。 　そのため、HTML5が勧告されるまでのしばらくは、HTML4.01の仕様のままで、へんなところを直していく作業で良いと思います。 　また、HTML4.01が上記のようになっていたら、正規表現が扱えるテキストエディタで簡単にHTML5に直せます。 　 ただ、示されたHTMLで <body> 　<article id="container"> 　は、本来はおかしい。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから The article element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content. ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［4.4 Sections ― HTML5( http://www.w3.org/TR/2011/WD-html5-20110525/sections.html#the-article-element )］より 　artcleは日本語に訳すと、「要約」です。よく似た単語にsummaryがあります。学術論文で、論文の最初に書かれている「論文全体を簡潔にまとめた記事でそれを読めば全体像がわかるようなもの」が、articleで、論文の最後に「論文全体を短くまとめた」ものがsummaryです。 　このことから解るように、articleが文書全体を括ることはおかしいです。 　数学用のTexを経験されるとわかりますが、書籍で言うと 　　　Tex　　　　　　　　　　　HTMLL part　　 　　　部(冊子)・・・・サイト chapter　　　　章・・・・・・・ディレクトリ section　　　　節・・・・・・・section subsection　　 小節・・・・・・section>section subsubsection　小々節　・・・・section>section>section という大きな流れがあり、そのsection内に含まれるartcle(要約)であり、summary(まとめ)であり、aside(コラム)であり、脚注(mark)であると考えると良いでしょう。 １．sectionについて 　　h2とh2に関する記事pがある場合 　　<section> 　　-<h2></h2> 　★↑でなければなりません。明確にそのセクションのヘッダーに当たるなら 　<section> 　　<header> 　　　<h1></h1> 　　</header> 　もよい。ただし、hnが複数ある場合は 　<hgroup> 　　<h1>見出し</h1> 　　<h2>見出し</h2> 2.article/asideについて 　　<article> 　　-コンテンツ 　　-<aside>関連ないもの</aside> 　　</article> 　　みたいに「article内」でasideを使い除外していいのでしょうか？ 　asideはどこにあってもよい 3.全体として 　　<article id="container"> 　　-<h1></h1> 　　-<aside> 　　--<header></header> 　　--<nav></nav> 　　-</aside> 　　-<section> 　　--<h2></h2> 　　--<p></p> 　　-</section> 　　-<aside> 　　--<footer></footer> 　　-</aside> 　　</article> 　★はおかしいです。 　　<section> 　　--<header><!--ヘッダ --> 　　　　--<h1>見出し</h1> 　　　　--<article>要約</article> 　　　　--<nav></nav> 　　--</header> 　　--<section> 　　----<h2></h2> 　　----<p></p> 　　--</section> 　　--<footer> 　　--</footer> 　　</section> 　となります。★id="contener"とか、id="wrap"が間違っているから、section/header/footerが導入されたのです。 h1をロゴ・会社名にせず、サイト上部の１行文にするべきか 　<section> 　　<header> 　　　　<h1>サイト名</h1> 　　　　・・・・article(要約)やnav(ナビゲーション)が含まれる場合もある 　　</header> 　ロゴやバナーは背景にするとかが良いでしょうね。 　<nav> 　　<ul> 　　　<li><a href="">トップへ</a></li> 　　　<li><a href="">会社概要</a></li> 　　にて、nav>ul+liをabsoluteで、ページの左上にロゴとして独立して配置(absolute)するのがスマートかもね。

noname#163110
質問者

お礼

回答ありがとうございます ＞正規表現が扱えるテキストエディタで簡単にHTML5に直せます 実はそれを狙っていますｗ そのためにHTML５ベースで作っておいたほうがよいかと思いまして・・・・ その過程で疑問に思ったので質問しました。 Texの部分の説明・・・参考になりました。

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.3

No.1です。下記サイトに解りやすい説明があります。 HTML5.0で強化された機能 | HTML5とは？変わるWebと注目の新要素 HTML5.0の情報サイト ( http://www.html5-guide.com/strong/ )以降のページ

noname#163110
質問者

お礼

再度回答ありがとうございます そこは一度見たことがあります 実例がないので詳しく見ていませんでした（＾＾； さっそく読んでみます。

  • Chaire
  • ベストアンサー率60% (79/130)
回答No.2

ページの目次を考えて下さい。HTML(5) のセクションというのは「目次から直接ジャンプできる部分」のことです（WAI ARIA で言うところの role="region"）。そして、目次に載る「ラベル」が、すなわちセクションの見出しです。 No.0 の『3. 全体として』からは、次のような目次が生成されるでしょう。 + [article の見出し] 　　+ [無名の aside] 　　　　+ [無名の nav] 　　+ [section の見出し] 　　+ [無名の aside] これが意図した目次であるか、私には分かりません。しかし、ラベルのない（無名の）セクションが目次に載るというのは、あまり普通のことではない、と思います。 --- もし次のような目次を想定するなら、 + 純粋理性批判 　+ 前書き 　+ 目次 　+ 本論 　+ 後書き 　+ 関連書籍の案内 マークアップの一例は次のようなものです。 <section> 　<header> 　　<h1>純粋理性批判</h1> 　　<section> 　　　<h1>前書き</h1> 　　　... 　　</section> 　　<nav> 　　　<h1>目次</h1> 　　　... 　　</nav> 　</header> 　<article> 　　<h1>本論</h1> 　　... 　<article> 　<footer> 　　<section> 　　　<h1>後書き</h1> 　　　... 　　</section> 　　<nav> 　　　<h1>関連書籍の案内</h1> 　　　... 　　</nav> 　</footer> </section> header、footer は目次に関与しません。単にセクションをグループ化するだけです。 本文あるいは各セクションの中で、本筋から外れる部分（例えば傍注、脚注の集まり）は aside です。aside はセクションなので目次に載りますが、目次ジェネレータの設定によっては aside を含めないようにすることもできるでしょう。この点で、そんなに多用するものではありません。 それと、nav も濫用されるきらいがありますが、単なるページ内リンクだけなら ul などのリストで結構です（WAI ARIA で言えば role="directory"）。リンク集のように、リンク自体がひとつの内容となるとき nav を使います。ですから、nav もそんなに使われるものではありません。 ですから、section と、せいぜい article の使い方を覚えれば十分です。nav、aside を「ちゃんと」使えているサイトは、あまり見たことがありません。

noname#163110
質問者

お礼

回答ありがとうございます なるほど・・・書籍のイメージでマークアップすればいいんだ と思いました。 あとWAI ARIA・目次ジェネレータ・純粋理性批判 というキーワードが・・・

noname#163110
質問者

補足

＞header、footer は目次に関与しません。単にセクションをグループ化するだけです。 これでなんとなくわかってきました header/footerがセクショニングコンテンツに 含まれていないというところを見落としていました。 逆に言うと<nav>を<header>の外に出してもいいわけですよね？ それと<nav>を使うとき正式には見出し（例でいう「目次」） があったほうがいいのでしょうか？（CSSで追い出すとかで） ふつうはいきなりulだけになると思いますが・・・

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

ちょっと歴史を知っておいたほうがよいかも。 HTML4.01が作られたとき、それ以前のHTML(3.2)は、ブラウザ戦争で膨れ上がったベンダー独自の要素が加わり、本来のHTMLの目的 ・文書構造をその構成要素を示すマークアップを行うことで、プラットホームに関わらず文書が利用できること。 から遠ざかり、FONTに代表される見栄えに関する要素属性、要素(タグ)をその内容・意味ではなくデザインのために使用することが増えたという反省から、「文書をその構成要素にしたがってマークアップするHTMLに戻し、見栄えはCSSに任せる」という姿勢を明確にしました。 　しかし、HTML4.01では文書の構成要素を示す要素事態が決定的に不足していたため、相変わらずデザインのためのタグが使われ続けました。DIV要素の多用などはその典型で、<div class="contener">とか。 　そこでHTML5では、より明確に要素が付け加わりました。そのため、基本的には <body> 　<header>ヘッダー</header> 　<section>本文</section> 　<footer>フッター</footer> </body> が最もシンプルな形 ・<header></header>内にh1～h2は複数書けないので、必要な場合は 　<hgroup> 　　<h1>見出し</h1> 　　<h2>サブ見出し</h2> 　</hgroup> ・ひとつのセクションには見出しが必ずひとつあるはずなので 　<section> 　　<h2>見出し</h2> 　</section> 　となる。 ・本文内にサブセクションがある場合は 　<section> 　　<h2>見出し</h2> 　　<p>文章</h2> 　　<section> 　　　<h1>見出し</h1> 　　　<p>段落</p> 　　</section> 　</section> 　としなければなりません。（見出しがふたつのときは<hgroup>） 　★このとき、HTML5では、見出しレベルはsectionの階層で決まります。DOMでは 　　|-BODY 　　　|-HEADER 　　　|　|- H1 　　　|-SECTION 　　　|　|-H2 　　　|　|-SECTION 　　　|　|　|-H1 　となり、hの数字ではなく、その階層で決まります。 ・大きな文書の一部の場合は、 <body> 　<section> 　　<header> 　　　<h1>見出し</h1> 　　</header> 　　<section> 　　　<h1>見出し</h1> 　　　<p>文章</h2> 　　　<section> 　　　　<h1>見出し</h1> 　　　　<p>段落</p> 　　　</section> 　　</section> 　</section> </body> でも良いですね。 　逆に小さな記事では、 <body> 　<h1>見出し</h1> 　<p>段落</p> 　<p>段落</p> 　<p>段落</p> </body> ★articleはsection(やfooter)内の関連記事でそれ自体が完結しているもの ★asideはsection(やfooter)内で、それが所属する親要素(本文)と直接関係ない記事 ★figureは、他所も参照される挿絵や記事、markという行内要素もある。 　のように使い分けます。 ★navはナビゲーションリンクですから、section内にもfooter内にも、あるいはこれらと独立して存在しえます。 　<header> 　　<nav> 　　　<ul>・・・ページの簡単な目次とか、パンくずリストとか 　</header> 　<section> 　　<nav> 　　　<ul> 　　　　<li><a href=""></a></li> 　　だと、そのセクション内のナビゲーション(目次) 　</section> 　<nav> 　　<ul> 　　だと、そのページの目次 　</div> 　<footer> 　　<nav> 　　　<ul> 　　　だとサイと全体のナビゲーション 　のように区別しておくと良いでしょう。 ★それ以外に、出自は見栄えだったけど構造的な意味に読み替えて使われる<b>,<hr>,<s>,<strong>も要チェックです。 詳しくは、 HTML5 における HTML4 からの変更点 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements ) ※ただし、これはHTML4.01をしっかり、正しく理解している方向けですから必要なら適宜HTML4.01の仕様書(ただしstrictです!!)を参照してください。 HTML 4.01 Specification (ja) ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html ) [英文] HTML5 ( http://www.w3.org/TR/html5/ )

noname#163110
質問者

お礼

回答ありがとうございます。 HTML5の辞書があるので単品の使い方はわかるのですが たとえばHTML4のサイトを作り直す場合にどうなのかなあと 思ったのですが・・・ やはりシンプルにするに越したことはないようですね リンク先もチェックしてみます

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • 【HTML５】セクションを示す要素の使い分け

    HTML、CSSを勉強中の者です。 HTML５のセクションを示す要素（section・article・aside など）をどのように使い分けるべきなのかいまいちわからず、質問させていただきました。 様々なサイトで調べてみたのですが、サンプルを見るとどれも微妙に定義が違っているように見受けられ、理解が曖昧です。 あまり詳しくないサイトだと、単純にヘッダー部分はheader要素、フッター部分はfooter要素、タブメニューなどはnav要素、リンクなどはaside要素、そしてメインとなるコンテンツ部分はsection要素、といったことしか書かれていませんでしたが、別のサイトにはsection要素の中にarticle要素やaside要素が入ってくると書かれており、「？？？」という感じです。 例えばですが、添付した画像のようなサイトの場合は、下記の考え方で合っているのでしょうか？ header・・・ヘッダー（オレンジ） nav・・・タブメニュー（薄青） section・・・タイトル（緑）、コンテンツ（濃青） article・・・記事（黄色） aside・・・サブメニュー（紫）、リンク（ピンク） footer・・・フッター（薄赤） また、section要素やarticle要素の中にarticle要素やaside要素が入ってくる、というのはどのような場合でしょうか。 最初のうちにきちんと使い分けを覚えたいと思いますので、よろしくお願いします。

    • ベストアンサー
    • HTML
  • HTML5について

    HTML5を勉強した方がいいと言われたので、 ちょっと検索して下のサイトを見つけました。 そこのセクションのところの要素についてお聞きします。 http://www.html5.jp/tag/elements/index.html 質問１ セクションのところのheaderとfooterがあります。 これは<div "id=header">とかしていたものが 専用の要素に置き換わるということでしょうか。 質問２ 上記の場合、headerとかfooterとかは大きなブロックですよね？ h1～h6も同じところにありますが、 これはp要素と同じコンテンツのグループ化の方ではないですか。

    • ベストアンサー
    • HTML
  • HTML5の記述について

    現在、HTML5について勉強をしているのですが、下記サンプルコードが間違っているのではないかと思います。サンプルコードでは、途中にsectionタグでarticleタグを囲っている部分があります。今回の場合、articleタグでsectionタグを囲ったほうがいいのではないでしょうか？様々なサイトを見て回ってこのように感じたんですが、自分の見解が合っているかがわかりません。よろしくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf8"> <title>おかずまみれ</title> </head> <body> <header> おかずの部屋 <nav> ホーム リンク集 プロフ </nav> </header> <section> 今日のおかず <article> おいしいおかず 25 おかず25のレシピ </article> </section> <section> 新着!おかず!! <article> おいしいおかず 01 おかず01のレシピ </article> <article> おいしいおかず 02 おかず02のレシピ </article> </section> <aside> おかず本がいっぱい おかず本 1 おかず本 2 おかず本 3 </aside> <footer> このサイトは xxxxxによって運営されています。 </footer> </body> </html>

    • ベストアンサー
    • HTML
  • HTML5をCSSでレイアウトする場合

    section 　articleといった新しい要素をCSSのfloat等でレイアウトするのは間違いなのでしょうか？ いろいろと調べてみましたが、sectionを使ったレイアウトは駄目で、divでレイアウトするとか… また、article aside nav 等をCSSでカラムレイアウト解説をしているサイトもありました… また、Q&Aサイトで <div id="article_1"> <article> …………… </article> </div> のようなsampleで、わざわざ無駄なことをせずにhtml5の新しい要素でレイアウトしましょう…？ <article id="article_1"> …………… </article> と言うような回答もありましたが… 確かに、HTML5でWEBページ作成をするのに、レイアウトは<div>でネストするのは意味がないように思いますが… よりよい方法を教えてください。m(_ _)m

    • ベストアンサー
    • HTML
  • HTML5でサイドバーのメニューが、左に移動しない

    いまHTML５とCSSを使って勉強しているのですが、 サイドバーを右側にFloatしたいのですが、google Chrome確認しても実行されません。 私の記述ミスだと思うのですが、何度見直しても原因がわかりません。 わかる方にご教授願います。 ・htmlソース <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML5 L20 Step 1_1</title> <link rel="stylesheet" href="※CSSのリンク張ってます" type="text/css" media="all"> <style>/* CSS */</style> <script>/* JavaScript */ <!-- window.alert("Web開発室ブログ"); //--> </script> <noscript> JavaScript が非対応になっています。 </noscript> </head> <body> <!--Web開発室ブログ--> <header id="header"> <h1>Web開発室ブログ</h1> <nav> <ul> <li><a href="#hoge">最新の投稿</a></li> <li><a href="#hoge">アーカイブ</a></li> <li><a href="#hoge">開発者向け</a></li> <li><a href="#hoge">お問い合わせ</a></li> </ul> </nav> </header> <section id="main_section"> <article class="contents"> <header> <h2>なぜHTML5が次のWeb開発スタンダードになりえるのか</h2> <p> 開発プロジェクトリーダー太郎 <time datetime="2010-10-01T14:39">October 1st, 2010 at 2:39PM</time> </p> </header> <p> HTML4.01が世の中に発表されてから、HTML規格の外側で様々なアイデアやシステムが試行錯誤されてきました。 結果、複数の団体が「Webの基準」を目指してアイデアやシステムの営業に躍起になっていました。 つまりHTMLは、基本的なぶぶんでは「業界標準」でしたが、求められる装飾や細かな部分については機能不足だったのです。 </p> <aside> <p> スマートフォンのブラウザはパソコンのブラウザよりも意図的にHTML5の仕様に対応しています。 </p> </aside> <p> 機能不足が指摘されていた「装飾」の部分について、HTML5は大きな一歩を踏み出しました。 オーディオやムービーをHTML5の機能だけで実現できるように拡張し、 本来の利用方法とは違った使われ方をしていた様々な要素に対する解決策を打ち出しました。 </p> <footer> <p><a href="#"><i>25 コメント</i></a>...</p> </footer> </article> </section> <section id="sidebar"> <nav> <h3>アーカイブ</h3> <ul> <li><a href="2010/10">October2010</a></li> <li><a href="2010/9">September2010</a></li> <li><a href="2010/8">August2010</a></li> <li><a href="2010/7">July2010</a></li> <li><a href="2010/6">June2010</a></li> <li><a href="2010/5">May2010</a></li> <li><a href="2010/4">April2010</a></li> <li><a href="2010/3">March2010</a></li> <li><a href="2010/2">February2010</a></li> <li><a href="2010/1">January2010</a></li> </ul> </nav> </section> <footer id="footer"> <p>&copy;2010 パソコン教室</p> <nav> <ul> <li><a href="#">ホーム</a></li> <li><a href="about">About</a></li> <li><a href="terms.html">サービスの条件</a></li> <li><a href="privacy.html">プライバシーについて</a></li> </ul> </nav> </footer> </body> </html> ・CSSソース @charset "utf-8"; /*START：ページのコンテンツを中央に配置し、フォントも設定*/ body{ width:960px; margin:15px auto; font-family:Arial,"MS Trebuchet",sans-serif; } /*END：ページのコンテンツを中央に配置し、フォントも設定*/ /*START：基本的な設定*/ p{ margin:0 0 20px 0; } p,li{ line-height:20px; } /*END：基本的な設定*/ /*START：ヘッダの幅を定義*/} header#header{ width:100%; } /*END：ヘッダの幅を定義*/ /*START：ul要素リンクを水平ナビゲーションバーに変換*/} header#header nav ul,#footer nav ul{ list-style:none; margin:0; padding:0; } #header nav ul li,footer#footer nav ul li{ padding:0; margin:0 20px 0 0; display:inline; } /*END：ul要素リンクを水平ナビゲーションバーに変換*/ /*START：main_sectionセクションは左寄せにして幅を調整*/} /*aside要素内の吹き出しも調整*/ section#main_section{ float:left; width:74%; } section#main_section aside{ float:right; width:35%; margin-left:5%; font-size:20px; line-height:40px; } /*aside要素内の吹き出しも調整*/ /*END：main_sectionセクションは左寄せにして幅を調整義*/ /*START：サイドバーを整列させ、幅も調整*/ section#sidebar{ float:left; width:25%; } /*END：サイドバーを整列させ、幅も調整*/ /*START：フッタをページの一番下に設置*/ footer#footer{ clear:both; width:100%; display:block; text-align:center; } /*END：フッタをページの一番下に設置*/

    • ベストアンサー
    • HTML
  • 2カラムのレイアウト

    2カラムのレイアウトにおいて、HTMLの記述部分において。 【例1】コンテナーの「★外」に、フッターがある場合と。 ・「コンテナー(コンテンツ+サイドバー)」 ・「フッター」 【例2】コンテナーの「★中」に、フッターがある場合。 ・「コンテナー(コンテンツ+サイドバー+フッター)」 があるように思いますが? ★どっちでもいいんでしょうか? (どっちも、同じレイアウトになるんでしょうか?　そんな感じがします。)　 ^^ HTML/CSS　初心者なもので。。。よろしくです。　^^ ---------------------------------------------------------------- 【例1】 <div id="container"> 　　<div id="contents">　本文 </div>　 　　<div id="sidebar">　サイド部分 </div> </div>　<!--container部分終わり--> 　<div id="footer"> 　　<p>著作権</p> 　</div> <!--footer部分終わり--> 【例2】 <div id="container"> 　　<div id="contents">　本文 </div>　 　　<div id="sidebar">　サイド部分 </div> 　<div id="footer"> 　　<p>著作権</p> 　</div> <!--footer部分終わり--> </div>　<!--container部分終わり-->

    • ベストアンサー
    • HTML
  • HTML5コメント欄の<article>について

    現在HTML5でブログテンプレートをコーディングしています。 その中で、<article>について調べるとコメント欄にも<article>を使うと良い、といった記述をよく見かけます。 導入しようと思ったのですが、私のサイトは3カラムの幅固定floatで構築してあり ソースの記述順序上、メインカラムの中にコメント欄が入りません。 簡単に構造を書くと <div id="wrapper"> <div id="main"> //メインカラム ～～ </div><!-- #main--> <div id="left"></div> <div id="right"></div> <div id="comment"></div> </div><!-- #wrapper--> こんな感じになっており、#main,#left,#rightの3つをfloatさせて横並びにしています。 このサイトバー2つを"div#comment"の下にしてしまうと3カラムが崩れてしまいます。 (勉強不足かもしれませんが、どうCSSで弄ってもコメント欄より上にサイドバーが上がらなくなります) なので、<article>でメインカラムを囲みたいのですがコメント欄が<article>に入らない。 かといって、<article>で全体を囲むとサイドバーまで<article>に含まれてしまう、という状況です。 このような状況の上で、コメント欄を<section>で括り、コメント1件1件を<article>で括るのは間違いでしょうか？ http://www.w3.org/TR/html5/sections.html#the-article-element ここにあるコード例ではまず<article>で記事全体を囲み(コメント欄も含み) コメント欄にきたら<section>に入り、<article>で1件1件を囲っていますね。 その<article>に<hn>タグがないことが疑問に思わせた発端なのですが 恐らく、<article>内<article>は親の<article>(記事全体)に関連した独立コンテンツ、という名目があるので <hn>タグをつけていないのだと思われます。 だけど私の場合、<article>でまず記事があって、それとは離れてコメント欄があり 記事<article>とは親子関係のない<section>の中に<article>が来ることとなります。 これが合っているのかどうか、調べてもよく分からなかったので質問させて頂きました。 どなたかご教授宜しくお願い致します。

    • ベストアンサー
    • HTML
  • html5のマークアップについて

    html5を勉強しはじめてまだ１週間くらいですがサイトを作成しています。 ただ正しいのか曖昧な感じで作成しており、詳しい方々にご教授頂ければと思います。 ★サイト構成サンプル画像 http://test.infinity-design.info/sample.png ■長くなりますが構成の説明 (1)基本的に外部へのリンク（他店舗へのリンク等） ⇒メインコンテンツほど重要な役割ないが、当サイトと関連はあるので、<aside>タグを使用。 (2)ページヘッダー部分⇒<header>を使用 ⇒ロゴ部分は見栄えの関係で<div>で、ロゴ画像は<h1>タグを使用 ⇒ロゴ下のナビ（グローバルナビ）⇒主要リンクなので<nav>で構成。 グローバルナビ下のエリア ⇒SEOテキスト部分<h2>タグで構成（<h2>じゃなく<p>が適切かも？） ⇒その右横のリンク（ローカルナビに相当のため）、<nav>で構成。 (3)レイアウト構成のため外枠を<div id="maincont">で構成。 ⇒パン屑部分、主要リンクのため<nav>で構成。 http://www.html5.jp/html5doctor/nav-element.html (4)ここ一番悩んでます、 コンテンツの内容によって適切なタグが変わってくると思いますが、今回は主に下記を加味して構成してみました。 http://www.html5-memo.com/new-element/aside/ ⇒メインコンテンツとは関連性が薄く、切り離すことができるコンテンツを表します。 http://design.kayac.com/topics/2010/12/post-42.php http://www.html5.jp/html5doctor/aside-revisited.html ⇒メインのコンテンツほど重要な役割を持たないコンテンツだけれども、それがページや記事に関連しているなら、ビジュアル・デザインの有無にかかわらず、aside が適切。 以上の２点を中心に考えてみました、 後はどこかで、「<aside>としてる部分を削除してもメインコンテンツが成り立つか？」という文面もどこかで見た気がしますが。 (7)は除いて考えると、外枠全部を<aside>で構成することできると判断し<aside>で構成しました。 上記の構成は正しいか？自分で自信がありません。 外枠を<div>にするか迷っている理由ですが、 http://design.kayac.com/topics/2010/12/post-42.php の、「ページや記事と関係ない物をサイドバーに置く事も考えられます(特に広告など)。 ページや記事と関係ない物を置く場合は、サイドバーをdivで囲ってコーディングしたほうが良いと思います。」というやつの例ですが、 全体を<div>に変更し広告部分も<div>となっています、が、これは外を<div>にし、<section>前を<aside>で囲ってはダメなのでしょうか？ あくまで例なのですが.. 様はサイドバーに配置されているコンテンツで、サイト（ページ）に全く関係ない広告（レンタルサーバーの広告とか？）を載せている場合、 全体は<div>で囲む必要がでてくる（絶対divという訳じゃないですが）？、 その他のコンテンツは<aside>として成り立つか上記の考え方で加味し、 適切なら適時<aside>で囲む、じゃなければその他のタグで構成ということになると思うのですが・・どうでしょうか？ 今回のサイトの様に左カラム全体が上記加味し<aside>として成り立つならば、 大枠を<aside>として囲み、配置しているコンテンツは適時適切なタグで構成するとなると思うのですが・・ (8)メインコンテンツ部分ですが、外枠は<div>で構成しました。 ⇒キャンペーンバナー（ライトボックス表示だったり、キャンペーン専用ページに遷移等） ⇒ニュース記事 フィードとして成り立つと考え<article>で構成、中身は記事となるため<section>により構成、 当エリアはスクロールで記事が何個か見える感じになります。 (9)⇒今月の新商品一覧 外枠を<div>か<section>で構成。レイアウトで<div>が必要な場合に限り、 <div> <section>とする感じになります。必要なければ<section id="XX">を大枠に。 (10)⇒当店のシステムについて 中身はさらに各セクションで分ける事ができるので、各セクション毎に分けて構成しました。 (11)フッター部分のため<footer>で構成。 長文、乱文ですいません、html5に詳しい方々。是非ご教授ください。

  • ヘッダーとフッターを画面いっぱいにする方法について

    添付画像のようにヘッダー部とフッター部だけを画面いっぱいにしたいと思っています。 HTMLはおおよそ以下のような構成になっています。 CSSでは <div id="container">に対して以下のように記述しています。 --------------------------------------- #container{ width:1000px; margin: 0,auto; } --------------------------------------- HTML内のheaderやfooterを<div>で囲むwrapを作り、それらにwidth: 100%;とCSSに記述してやればうまくいくような事を聞きましたがうまくいきませんでした。 それほど複雑な構成ではないシンプルなタグ構造だと思います。 ヘッダーとフッターの幅を添付画像のように画面いっぱいに広げるにはHTML, CSSにどのような記述をすればいいのでしょうか？ ご存知の方いらっしゃいましたら宜しくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>サンプル<title> </head> <body> <div id=container> <header> ヘッダー </header> <nav> </nav> <main> </main> <footer> フッター <footer> </div> </body> </html>

  • Dreamweaverのh1についておしえてください

    Dreamweaverのh1についておしえてください。 Dreamweaverの付属のテンプレートを見たら、ヘッダーにh1を使い、コンテンツにもh1が使用されているのですが、h1は1ページ1回と認識していたのですが、ヘッダーとコンテンツなら大丈夫なのでしょうか？ CSSは、下記のようになっています。 <body class="thrColHybHdr"> <div id="container"> <div id="header"> <h1>見出し</h1> <!-- end #header --></div> <div id="sidebar1"> <h3>sidebar1 コンテンツ</h3> <p>省略。 </p> <p>省略 </p> <!-- end #sidebar1 --></div> <div id="sidebar2"> <h3>sidebar2 コンテンツ</h3> <p>省略 </p> <p>省略 </p> <!-- end #sidebar2 --></div> <div id="mainContent"> <h1> メインコンテンツ </h1> <p>省略 </p> <p>省略 </p> <h2>H2 レベルの見出し </h2> よろしくご指導お願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する