10/9(Wed)
この授業内で寄せられた質問に株式会社LIG フロントエンドエンジニアの堀口 誠人先生が回答！
HTML5初心者の人に読んでもらいたい記事です。
目次
■h1, section, artifcleタグについて
■mainタグについて
■fugureタグについて
■timeタグについて
■headerタグについて
■おすすめの本・サイト
■その他
■堀口先生の授業
＞一つのセクション内にも複数のh1を使っても大丈夫なんですか？ 大丈夫です。 1つのsection内で使える見出しタグに、使用回数制限などはありません。(^^) もっとも、そういうケースに遭遇することはあまりないと思います。 ＞h1は単語、文章どちらがSEOに強いですか？ その発想は適切でないかもしれません！ というのも、まずh1ならびにh2〜h5の見出しタグは「ユーザーから見てわかりやすいこと」 「そのコンテンツにふさわしいタイトルであること」が重要なのです。 この条件を満たせるのであれば、単語でも文章でも構いません。 そしてSEOの観点で言えば、h1タグの内容がSEOにどれほど有利に働くかは未知数です。 私の知るかぎり、Googleもその点に関しては公式な発表をしていません。 ただし、Googleの評価基準は一貫して「ユーザーにとって有益なコンテンツであること」なので、 やはりユーザー目線で適切なテキストをh1に指定するのがベストかと思います。 ＞articleの中にsectionは使えないのでしょうか？ 使えます！ その逆、sectionの中にarticleを入れることも可能です。
＞mainタグはbodyタグよりも大きい枠組みなんですか? 違います！mainはあくまでbodyタグよりも下に位置するものです。 bodyタグは「ユーザーから見えるコンテンツ全てを包括するタグ」です。 対してmainタグは「そのページにおける主要なコンテンツを囲うタグ」なので、概念としてはbodyよりも下です。 例えば、2カラムレイアウトのWebページ内のコンテンツを大きくカテゴライズすると、 大抵のサイトは以下のようになります。 ・ヘッダー ・サイドバー ・メインコンテンツ ・フッター これの「メインコンテンツ」に当たる部分が、mainタグで囲むべき部分です。
＞imgタグには基本figureを付けたほうがいいのですか？ 違います！ figureタグは「図や表、ソースコードなどを囲むタグ」です。 図や表というと大抵imgタグになることが多いため、そのような誤解を生みやすいのですが、 figureタグで囲むべきものは必ずしもimgタグとは限りません。 また同時に、imgタグが表示されるコンテンツもそれが「図、表、ソースコード」だとは限りませんよね。 むしろ、それ以外である場合のことのほうが多いはずです。 例えばイメージ図、アイキャッチ、アイコンなど。それらをfigureタグで囲う必要はありません。
＞YYYY-MM-DDの順序は国ごとに違いますか？ いいえ、この順序で決まっています！ HTML5の仕様でこのように決まっていますので、どの国でもその書き方でOKです。
＞headerタグは複数使用可能でしょうか？ 可能です！が、コンテントモデルの概念を理解していないと、 これの複数の使い方は難しいかもしれません(^^； しかしながら、headerをタグを複数使うことのメリットは正直そんなにないですし、 間違えて使ってしまうことになりかねないので、 初心者の内は使用回数は1ページにつき1つに留めておくことをおすすめします。
・カルタ付 HTML5マークアップ 現場で使える最短攻略ガイド (WEB PROFESSIONAL) http://www.amazon.co.jp/dp/4048660705 説明がわかりやすく、事例もたくさん載っています。 HTML5カルタが付いているのでよかったら遊んでみてください。 ・W3C HTML5日本語訳 http://momdo.github.io/html5/Overview.html W3CのHTML5公式文書の日本語訳です。 あくまで日本語訳であって、これ自体はW3Cの公式ではありません。 なので、公式発表のものと合わせて閲覧するとよりいいかもしれません。 （W3C HTML5（英語） http://www.w3.org/TR/2014/REC-html5-20141028/） ・HTML5 MDN https://developer.mozilla.org/ja/docs/Web/HTML/HTML5 HTML5の仕様に関するMOZILLAの公式ドキュメントです。 日本語訳もあり、またW3Cのものよりつっこんだ内容となっているので、説明がわかりやすいです。 また、section,h1辺りはとくに詳しい解説があります。
＞これからコーディングの仕事に就くためには、今回教わったＳＥＯ対策や Ｗ３Ｃや検索エンジンについての知識は必須でしょうか？ どんなコンテンツを作るかによって異なりますね。 コーディングと一口にいっても、Webサイト、ゲーム、その他のインタラクティブコンテンツ、など様々です。 ただし、コーポレートサイト、Webメディア、WebサービスなどはSEOを深く関わることになるので、 これらを作るのであれば、こうした知識は必須といえます。 ＞SEOの知識はどうやって身につけたのですか？ 最初は本を読んでいましたが、そのあとはひたすらググりました！ SEOはなかなか曖昧な領域なので、「正しい情報をゲットすること」がとにかく難しいです。 僕は基本、「GoogleやW3Cなどから発表された最新の公式データ」が一番信頼性が高いと思いますので、 それを中心に調べています。 他には、信用するには慎重になる必要がありますが、SEO屋さんのブログなども情報源として活用しています。 ＞株式会社LIGさんのWebサイトは、html5で完全にマークアップされていてすごいなと思いました。 いつごろから現在の形にされたのですか？ ありがとうございます。僕が入社した2012年にはすでにHTML5で構築していましたね。 その頃はまだHTML5が浸透していないこともあって、業界的にはHTML5をがんがん使っていくことに対して 賛成派と慎重派がおりましたが。笑 ＞LIGではtitle、description、ogpを、手動で各記事毎にユニークで設定しているのですか？ LIGのサイトではユニークにしています。 手動で入力することも一部できますが、Wordpressの機能を使って自動化できるようにしています。 授業中おすすめしていたツール 「HTML 5 Outliner」 https://gsnedders.html5.org/outliner/ 「W3C Markup Validation Service」 http://validator.w3.org/ 「The Open Graph protocol (公式)」 http://ogp.me/ 「MDN」 https://developer.mozilla.org/ja/docs/Web/HTML/HTML5
