マークアップ:ヘッダー

標準

html5でマークアップしているが、

基本的なマークアップの方法について理解していなかったので勉強。

 

ヘッダーの書き方

<hgroup>を使う場合

<hgroup>
<h1>SiteName</h1>
<h2>This Site is My portfolio</h2>
</hgroup>

hgroupを使うと、アウトラインに表示されるのは要素内で最もレベルの高い見出しだけになるので<h1>しか表示されなくなる。

コンテンツエリアでページの説明をしている場合はよいかも知れないけど、<h2>でサイトの説明をするのでアウトラインからは消えちゃうと説明不足かもしれないと思った。

アウトラインも調べているうちに大事なワードだと知る。

アウトラインは、検索エンジンが解釈するサイトの階層構造のこと。

【参考】
HTMLのアウトライン意識してますか? – QiitaのSEO事情(前編)

 

アクセス解析勉強してサイトの構造をしっかり作ることがSEO対策になるって学んだけど、知識が結びついていなかったのがここで結びついた感じ。

やっぱりマークアップをしっかり押さえるのが重要そう。

<span>を使う場合

<h1><a href="http://wiac.alien-house.com">web is a creation<span>ウェブイズアクリエイション</span></a></h1>

【参考】 web is a creation

 

このやり方なら文法的にはh1無いでサイト名とその補足(この場合はサイト名)を説明できる。とおもったけど、<span>はレイアウトの調整につかえるタグだから意味的におかしなことになると気づく。微妙。

 

このやり方がいいかも

<a>タグ内にサイト名を記述し、サイトロゴはcssで指定。

 <hgroup>
 <h1><a href="http://www.html5.jp/">HTML5.JP</a></h1>
 <h2>次世代 HTML 標準 HTML5 情報サイト</h2>
 </hgroup>

 

【参考】

HTML5.jp

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中