各業界のプロに学ぼう「本じゃ読めないアフィリエイト講座」

All About ホームページ作成ガイド 西村 文宏
All About ホームページ作成ガイド
西村 文宏 (ニシムラ フミヒロ)
2001年より、その道のプロ(専門家)が情報発信する生活総合情報サイトAll About内で、「ホームページ作成」ガイドサイトを担当。ウェブ製作に関して毎月数本の記事を連載。HTMLの記述方法から、スタイルシートやJavaScriptの活用方法、アクセス数向上テクニックなど、2011年現在までに300本近くの記事を公開している。著書として、「プロ顔負けのホームページ作成術」・「SEO・SEM使いこなしテクニック」などがあり、最近は作家デビューも果たしている。
コーポレートサイトhttp://allabout.co.jp/gm/gt/1053/
講師PR
RSSフィードを自動生成するフリーソフト「Fumy RSS & Atom Maker」が人気です!『にししふぁくとりー』
http://www.nishishi.com/

HTMLソースに意味を付加できる新しいHTML5要素

  • publish_advertise
2013/02/28

こんにちは。All About ホームページ作成ガイドの西村文宏です。

 

前回は、HTML5で新しく追加された要素(タグ)のうち、「ウェブページ上に新しい機能を付加できる要素」をご紹介いたしました。

 

今回は、HTMLソースに「意味を付加できる要素」をご紹介いたします。

 

以下にご紹介するタグは、ただ記述しただけでは、ブラウザ上の表示には特に影響しません。しかし、HTMLソースに「意味」を付加することで、人間以外(ブラウザ自体や検索エンジンなど)に対しても「その記述の役割」を伝えやすくなります。その結果、環境に応じて閲覧しやすくできる可能性が増すなどのメリットがあります。

 


■ヘッダを示すheader要素: <header> ~ </header>


 

この領域がウェブページの「ヘッダ」であることを示します。サイトロゴや、共通メニューなどを含めておくと良いでしょう。音声読み上げブラウザでは、この領域を読み飛ばしたり、画面の狭い端末では表示を省略したり・・・といった、環境に応じた工夫にも活用できる可能性があります。

 


■フッタを示すfooter要素: <footer> ~ </footer>


 

この領域がウェブページの「フッタ」であることを示します。著作権表示や、主要ページへ戻るためのリンクなどを含めておくと良いでしょう。

 


■ナビゲーションを示すnavi要素: <nav> ~ </nav>


 

この領域が「ナビゲーション」目的で用意されていることを示します。

ページの上部や両端などに表示する「メニュー」に使うと良いでしょう。この要素内にあるリンク群が、ナビゲーション目的だという点を明示できます。このnav要素は、将来的にはブラウザや各種ツールなどが、自動的にサイト内リンクを抜き出して一覧表示する目的などにも活用されるかも知れません。検索サイトでの検索結果には、タイトルや概要文の下部に、そのサイト内の「パンくずリスト」や主要コーナー名などが表示されることがあります。そのような場面で表示するための情報を適切に抽出してもらうためにも、このnav要素は役に立つ可能性があります。

 

※パンくずリストとは


■区画を示すsection要素: <section>~</section>


 

内容の区切りを示します。ページ内に複数の話題が含まれている際に、同一の話題の範囲を示すことができます。

話題ごとの範囲を明示することで、検索エンジンが情報収集する際に参考にしてくれるかも知れません。

 


■主題との関係が薄いことを示すaside要素: <aside> ~ </aside>


 

メインコンテンツではないことを示します。補足情報の範囲に使ったり、広告領域に使ったり、アクセスカウンタやブログロールなど、「そのページの主題」には関係ないものであることを示したい場合に使います。

 

検索エンジンは、この領域にある単語を重視しないでおいてくれるかも知れません。
さて、3回にわたって、HTML5の概要を簡単にご紹介いたしました。

 

すべてを紹介できたわけではありませんが、このように様々な要素が追加されています。これから新しくページを作成するなら、ぜひ、HTML5を使ってみてください。

 


【ご注意ください】

このコンテンツで紹介されているサイトおよびサービス(ツール)は、
アクセストレードが運営するものではありません。必ず使用方法や注意
事項等をよく理解した上で、ご自身の判断のもとでご利用ください。

万が一、損害・トラブル等が生じた場合も、執筆者およびアクセス
トレードは責任を負いかねますので、あらかじめご了承ください。

 

 

 

Loading...
このエントリーをはてなブックマークに追加      mixiチェック
<<前の記事に戻る  
続編
2013.02.14
HTML5とは? 新しく追加された要素(タグ)とその用途
2013.02.21
ウェブページ上に新しい機能を付加できるHTML5要素

▲ページトップへ戻る

1CLICKアンケート!!
Loading...
1CLICKアンケート!!
アフィリエイトで稼ぐための心構え3カ条
1.「稼ぐ気持ち」を出しすぎない
稼ぎたい気持ちが全面に出ていると、ユーザーはサイトに対し良い印象を持ちません。
2.「納得できる方法」で稼ぐ
報酬額ばかりで選ばず、自分自身がお薦めできるプログラムを心が伝わるように紹介しましょう。
3.実績のある方法や考え方などを「学ぶ」
「成功者のノウハウ」、「今盛り上がっている市場は?」など、常に最新情報をキャッチし、実践できているかどうかが、アフィリエイト成功のカギ。アフィ大では、アフィリエイトで稼ぐためのお役立ち情報を数多くの成功者が発信しています。ぜひご活用ください!

▲ページトップへ戻る