HTML5で作るブログのアウトラインとマークアップ

いつも勉強させていただいております。

HTML5でブログサイトを作成する場合のアウトラインとマークアップが正しいかどうか
教えていただきたいです。
さまざまなサイトでサンプルなどはありますが、サイトによって色々と使用用途などが
違い、何が正しいアウトラインかがわかりません。

ご教授お願いいたします。

以下に私が作成したアウトラインを記載いたしますので、
評価、訂正をお願い致します。

HTML
1<body>
2
3	<header>
4		<h1>サイト名</h1>
5		<p>サイトの説明</p>
6		<nav>
7			<ul>
8				<li>メニュー1</li>
9				<li>メニュー2</li>
10				<li>メニュー3</li>
11				<li>メニュー4</li>
12			</ul>
13		</nav>
14	</header>
15
16	<article>
17		<section>
18			<h1>ピックアップ記事</h1>
19			<h2>記事タイトル</h2>
20			<ul>
21				<li>投稿日時<li>
22				<li>カテゴリ<li>
23				<li>投稿者<li>
24			</ul>
25			<h3>記事内見出し1</h3>
26			<p>記事本文</p>
27			<h3>記事内見出し2</h3>
28			<p>記事本文</p>
29		</section>
30		
31		<section>
32			<h1>最近の記事</h1>
33			<h2>記事タイトル</h2>
34			<ul>
35				<li>投稿日時<li>
36				<li>カテゴリ<li>
37				<li>投稿者<li>
38			</ul>
39			<h3>記事内見出し1</h3>
40			<p>記事本文</p>
41			<h3>記事内見出し2</h3>
42			<p>記事本文</p>
43		</section>
44	</article>
45	
46	<aside>
47		<h1>サイドバーおすすめ記事</h1>
48		<h2>記事タイトル</h2>
49	</aside>
50	
51	<aside>
52		<p>広告表示</p>
53	</aside>
54	
55	<aside>
56		<nav>
57			<h1>サイドメニューの名前</h1>
58			<ul>
59				<li>メニュー1</li>
60				<li>メニュー2</li>
61				<li>メニュー3</li>
62				<li>メニュー4</li>
63			</ul>
64		</nav>
65	</aside>
66	
67	<footer>
68	<p>コピーライト<p>
69	</footer>
70
71 
72</body>

行動規範の内容に同意します

回答2件

個人的に思ったのはサイドバーとあるので、横並びになるのかなと。
なのでメインはmain、サイドバーはid="side"か何かでまとめてさらにそれをid="wrapper"で囲ったほうが後々デザインに対応しやすいかなと思いました。

投稿2016/10/02 15:25

gin

総合スコア2722

beginner_t

2016/10/02 15:33

ご指摘頂きありがとうございます。 idについてはまだ考えられていなかったので、参考になりました。

行動規範の内容に同意します

ベストアンサー

よくマークアップには「正解」は存在しないと言われます。
コンテンツの文脈や、サイトごとに重視するものが異なるため、
考えられる答えも決して１つではありません。
なので、あくまでも数ある回答の１つとして参考にしていただければと思います。

それを踏まえていくつか指摘する箇所があるかと思います。

###【１】article要素の使い方
以下の理由により、現在「article」となっている領域は「main」にした方がより適切であると考えます。

・理由１：article要素・section要素はそのセクションに紐づく「見出し」が原則として必須であるが、このarticleには見出しが存在しない。
・理由２：現在article要素で囲まれている領域が、サイドバー領域に対する「メインコンテンツ領域」を示している。メインコンテンツ領域であることを表す要素はmainと定められている。articleはあくまでそのセクション自体が「独立した自己完結したセクションであること」を意味付けするためのものなので、「メインコンテンツ領域」を表すものではない。

###【２】セクション要素内の見出し
現在、第二階層セクション以下の見出しが全てh1から始まっていますが、W3Cバリデートにかけると「警告」が出ます。
HTML5の仕様として、「セクション要素で正しく情報の階層構造が示されていればその中の見出しレベルは問わない」となっていますので、決して文法違反であるわけでありません。
しかしブラウザ側の実装状況が追いついておらず、セクション構造による階層の判断が事実上できないことと、SEOの観点の2つの点から、現状では**「各文書は1つのh1を頂点とする見出しレベルの階層構造」**を作ることが推奨されています。
なので、第二階層セクション以下の見出しはh2からスタートすると良いと思います。

###【３】コピーライト表記
著作権表記の領域はsmall要素をつかって意味付けを補強してあげたほうがHTML5的な表現となります。
なので、<fooer><p><small>コピーライト</small></p></footer>もしくは<footer><small>コピーライト</small></footer>の方がいいかな、と思います。

私ならこの３点は最低限直すかな、と思います。
こだわろうと思えば他にもいろいろあるかもしれませんが、とりあえず。

###追記
このページはブログのインデックス系ページであるという認識なので、
こっちのほうがいいかもです。

HTML
1<main>
2        <section>
3          <h2>ピックアップ記事</h1>
4            <article>
5            <h3>記事タイトル</h2>
6            <ul>
7                <li>投稿日時<li>
8                <li>カテゴリ<li>
9                <li>投稿者<li>
10            </ul>
11            <h4>記事内見出し1</h3>
12            <p>記事本文</p>
13            <h4>記事内見出し2</h3>
14            <p>記事本文</p>
15           </article>
16        </section>
17
18        <section>
19          <h2>最近の記事</h1>
20          <article> 
21            <h3>記事タイトル</h2>
22            <ul>
23                <li>投稿日時<li>
24                <li>カテゴリ<li>
25                <li>投稿者<li>
26            </ul>
27            <h4>記事内見出し1</h3>
28            <p>記事本文</p>
29            <h4>記事内見出し2</h3>
30            <p>記事本文</p>
31          </article>
32        </section>
33    </main>

個別の記事セクションに該当する所をarticleで囲んでいます。
無くても意味は通りますが、このセクションが「独立した記事である」ことをより明確にすることができます。

投稿2016/10/02 15:08

編集2016/10/02 15:23

aKusano

総合スコア3763

beginner_t

2016/10/02 15:31

ご丁寧に説明頂きありがとうございます。とてもわかりやすく勉強になりました。

beginner_t

2016/10/02 15:44

追加の質問で恐縮ですが、広告の表示のように画像だけの表示などの場合、まずarticleとは関連のない要素になるのでasideで囲むものだと認識しているのですが、見出しなどはつかないかと思います。その場合のアウトラインとして <aside><a href=""><img src="" /></a></aside> のような記載で問題ないでしょうか？よろしくお願いします。