- ベストアンサー
html5 について
今html5 を勉強してます。 セクション、articleの意味がわかりません。 何故、セクションがあるのか？どのように使われているのか、また何故セクションがひつようなのか？ 初心者なのでhtml5入門(かなり細かく書いてあることが前提です。しかも、初心者でも理解可能です。) のサイト、著書があれば教えて下さい。 セクションとdivの違いはなにか？ よろしくお願いいたします。
- sumiyakico
- お礼率9% (11/119)
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
セクションというのは、日本語では「章」「節」などの分類の総称です。 HTMLとして考えるのではなく、「日本語（文学）」や「英語」で考えてください。 業界ごとに呼び方は変わりますが、 第一章 第一節 第一項 第一章 第一節 第一幕 第一章 第一節 第一款 これらの区切りを、日本語では上記の様に呼び方を変えていますが、英語では全部「section」と呼びます。 section sectionに入れ子になったsection（略してsection） 『sectionに入れ子になったsection』に入れ子になったsection（略してsection） そしてこれらのセクションを示すHTMLタグとして、<section>を使います。 articleは作品という意味です。 １つの作品に対して<article>を１つ使ってください。 いわゆるメインコンテンツに<article>を使えばいいです。 作品じゃないし、、、と思われたのであれば、<section>でいいです。 http://www.html5.jp/ メニューから、 > チュートリアル > タグリファレンス > HTML要素 > 各項目 に進んでください。 基本的にはHTML5の仕様書の邦訳です。 言い回しのような、若干わかりづらい表現はありますが、だいたいわかると思います。 http://www.html5.jp/tag/elements/div.html <div>は「その他」です。 ほかのタグでしっくり来なければ、最終手段としてグループ化したい場合に<div>を使用してください。 ほとんどの場合、デザインを目的とした使い方になると思います。 特例として、<p>（段落）の中にHTMLの文法上では許されていないテーブルや箇条書きなどを入れたい場合に、<div>を<p>の代わりに使用できます。 <div> 私の好きな果物は <ul> <li>メロン</li> <li>イチゴ</li> <li>スイカ</li> </ul> です。</div> ただしこの場合、日本語の文章を以下のように書き換える事ができますので、日本語文として適切かどうかという点で、見直し（推敲）てみて、適切な方にあわせて書くのがいいです。 <p>私の好きな果物は以下の通りです。</p> <ul> （略） </ul> <span>も同様です。 <em>や<small>など、他のタグでしっくり来ないけど色分けしたい、でもなにか目印を付けたいという場合に<span>を使ってください。
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
HTML5は、HTML4.01strictの改訂版ですから、HTML5を理解しようとされているということは、当然HTML4.01は完全にマスターされている前提で説明します。 HTML4.01では、「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」が明確に唱えられ、HTMLは文書構造、スタイルシートでプレゼンテーションを指定することになっていましたね。そして、『推奨しない要素は、リファレンスマニュアルの各所で定義し、推奨しないことを明記する。推奨しない要素は、HTMLの将来のバージョンでは廃止になる可能性がある。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』 また、文書構造はDIV要素が用意されて、『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』 となっていましたね。 ここまでは、HTML5を学ぶ場合は、すでに良く御存知だと思いますが、一応念のため。 HTML4.01では文書構造をDIVを使って記述することになっていましたから <div class="header"></div> <div class="section"> <div class="section"></div> <div class="section"></div> <div class="section"></div> <div class="aside"></div> </div> <div class=footer"></div> のように使用されてこられたと思います。 ところが、HTML4.01ではが、現実にはプレゼンテーションのために流用され、 <div id="content"><div id="left"><div class="rightBar">とか、到底文書構造とは程遠い使われ方をされてきました。 それでは、その文書の内容を機械に理解させようとしても理解できません。 その反省から、HTML5では、「文書をよりよく構造化するために、( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )」新しい要素が追加されました。（される予定） ・section ・article ・aside ・hgroup W3Cの使用では採用されない見込み ・header ・footer ・nav ・figure ・figcaption ・main 新しく候補---使い道は厳しく限定される。 Texなどで論文を書かれた経験があると説明しやすいのですが、sectionは本文を構成する階層を示す要素です。 Texでは section |-- sub section |-- sub sub section とすれば自動的に、節-->章-->項 と文書のアウトラインが構成されますが、それと同じで、sectionの階層がHTML文書のアウトラインを作ります。--わかりやすく言うと、機械が自動的に目次を作れる要素ということ。 そのた、sectionは、必ずひとつの見出し要素<h1>～<h6>を持つと想定されます。 ★section要素は、機械に自動的に目次を作らせた時に役立つ階層を示すと考えると良い。HTML4.01は<h1>→<h6>の数字で表していたことが、sectionで示すことになる。 一方articleは、完結した文書のまとまりですから、内部に<header>,<section>,<footer>を持つと想定されるブロックです。 代表的なマークアップを見るとわかる。 <body> <article><!-- この場合、header,section,footerが1セットしかないためなくても良い --> <header> <h1>ページの見出し</h1> <nav>ナビゲーション</nav> </header> <section> <h2>本文見出し</h2> <p>記事</p> <section> <h3>項見出し</h3> <p>記事</p> <article><!-- ブログや他の完結した記事 --> <header></header> <section></section> <footer></footer> </article> </section> <section> <h3>項見出し</h3> <p>記事</p> <aside><!-- このセクションの補足記事(本文と無関係) --> <h4>参考記事</h4> </aside> </section> </section> <footer><!-- この文書のフッタ --> <h2>文書情報</h2> </footer> </article> </body> ＞セクションとdivの違いはなにか？ DIVはそれ自体、意味を持たない集団。idやclass名を借りて文書構造を示す。 HTML5では、 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから Note:Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors. ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［4.5 Grouping content — HTML5( http://www.w3.org/TR/2012/CR-html5-20121217/grouping-content.html#the-div-element )］より (意訳) 著者は、他に適切な要素がないときの最後の最後の手段として、div要素を使用することを強く推奨する。DIVより適切な要素を使用すると、読者にはより良いアクセス性を、著者には保守性を高めることにつながる。 言い換えれば、HTML5ではDIV以外に適切な要素を探すことがまず前提となる。 ＞初心者なのでhtml5入門(かなり細かく書いてあることが前提です。しかも、初心者でも理解可能です。) 初心者だけど理解できるとの事ですので・・ HTML4.01でもそうであったように・・ ⇒HTML5( http://www.w3.org/TR/html5/ ) そして、ここがとってもわかりやすい。 ⇒HTML5 Doctor, helping you implement HTML5 today( http://html5doctor.com/ ) 質疑応答の感じで、詳細に疑問点を解説している。 その前に、より簡単な、HTML4.01strictをマスターされると早いと思います。 ⇒HTML 4.01仕様書--邦訳--( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html ) その上で、上記で紹介した「HTML5 における HTML4 からの変更点( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff )」 その後、詳しい事はHTML5の仕様書、疑問点が出てくればHTML Doctor
関連するQ&A
- HTML5の文法上正しいかについての質問です。
現在、HTML5の勉強も兼ねてBlogを作っています。 例えば、下の例のように<section>と<article>の間に<div>を入れても良いんでしょうか？ 例 <section id="blog"> <h1>blog</h1> <div id="post-list"> <article> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - </article> </div> </section> ソースを覗いてみても、実際に使っているサイトを見たことがなかったこともあり、文法上誤った使い方をしているか知りたく、今回アップしてみました。 当方、素人の為もし参考になりそうなサイトを教えていただけたら幸いです。
- ベストアンサー
- ブログ
- 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コメント欄の<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の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をロゴ・会社名にせず、サイト上部の１行文にするべきか そこらへん調べたのですが納得できるはっきりしたものがないので、よろしければご回答願います
- ベストアンサー
- HTML
- マルクスを理解できるようになりたい
いろいろな社会科学系の本を読んだりするのですが、それらの内容を理解するのに前提となる知識としてマルクスの理論があると思い、マルクスの著書も読んでみたのですが、正直まったく歯がたちません。マルクスを理解するための入門書や、著作の中でも比較的理解しやすいものがあれば教えてください。
- 締切済み
- 経済
- 【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について勉強をしているのですが、下記サンプルコードが間違っているのではないかと思います。サンプルコードでは、途中に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
- article、section、hgroup？
HTML5にある<article>、<section>、<hgroup>の3つのタグの使い分けに困っています。 普通に書いたら下記のように3つのタグが並ぶと思います。 <section><article><hgroup> <h1>本文</h1> <h2>タイトル</h2> <h3>日時</h3> </hgroup></article></section> CSSでどのタグを指定しても同じ装飾になります。 この3つのタグが無意味にしか感じられません。 h1～h6はhgroupで囲む。1つの括りで扱える情報なのでarticleが付く。 そして１つのセクションとしてのまとまりなのでsectionが付く。 けれどCSSでどのタグに装飾しても同じ。 こんな3つもタグを並べる意味はあるのでしょうか？ 前回の質問： SEO的に最も良いh1～h3指定順位とは？ http://okwave.jp/qa/q7730062.html 前日の質問： Webサイトにスライディングサイドバーを設置したい http://okwave.jp/qa/q7728373.html
- ベストアンサー
- CSS
- セクションをdivで囲むと見出しのランクは下がるの
例えば <body> <header> <h1>サイトタイトル</h1> </header> <section> <h2>ページタイトル</h2> </section> </body> をdivで囲むと <body> <div> <header> <h2>サイトタイトル</h2> </header> <section> <h3>ページタイトル</h3> </section> </div> </body> に書き換えるべきですか？ それともdivで囲んでもdivが存在しないものとして振舞いますか？ ちなみにスタイルシートを無効にして実際に書き換えずにやってみるとh1の大きさが変わりませんでした やっぱり書き換えなくてもいいんでしょうか？ ご回答よろしくおねがいします ここから下は関係ないですけど html5とcssってホントにややこしいですね。見出しのランクなんてcssがあればもはや何の意味もないし(だからh1で統一できるようにしたんでしょうｋど)、cssでは特にpositonとfloatは頭がおかしいと思うし、この二つがクソなので結局シマンティックセクションとか関係なくdivで囲まざるを得ない。html5のセクションはユーザーじゃなくてロボットに対して役に立つもの なんでもっと柔軟に直感的なレイアウトができるようにしなかったんでしょうね？ じゃあhtml4使えよってのはなしで あとjavascriptで各セクションの高さを取得して足し合わせたものを左サイドバーの高さに代入してレイアウトを綺麗にするのとかもどれか1つのセクションにposition:absoluteがあるとおかしくなるしブラウザによってはいけたりするし本当に頭がおかしい
- 締切済み
- HTML
