デザイン学部で学習を開始しよう!

まずは無料会員登録!デザインスキルや知識を得られる授業をオンラインで開講中。最新のWeb制作スキルを身につけましょう。


HTML5基礎 〜適切かつSEOにも強い書き方を学ぶ〜

この授業内で寄せられた質問に株式会社LIG フロントエンドエンジニアの堀口 誠人先生が回答!

HTML5初心者の人に読んでもらいたい記事です。


目次

■h1, section, artifcleタグについて

■mainタグについて

■fugureタグについて

■timeタグについて

■headerタグについて

■おすすめの本・サイト

■その他

■堀口先生の授業

 


 

■h1, section, artifcleタグについて

 

>一つのセクション内にも複数のh1を使っても大丈夫なんですか?

大丈夫です。
1つのsection内で使える見出しタグに、使用回数制限などはありません。(^^)
もっとも、そういうケースに遭遇することはあまりないと思います。

>h1は単語、文章どちらがSEOに強いですか?

その発想は適切でないかもしれません!
というのも、まずh1ならびにh2〜h5の見出しタグは「ユーザーから見てわかりやすいこと」
「そのコンテンツにふさわしいタイトルであること」が重要なのです。
この条件を満たせるのであれば、単語でも文章でも構いません。

そしてSEOの観点で言えば、h1タグの内容がSEOにどれほど有利に働くかは未知数です。
私の知るかぎり、Googleもその点に関しては公式な発表をしていません。
ただし、Googleの評価基準は一貫して「ユーザーにとって有益なコンテンツであること」なので、
やはりユーザー目線で適切なテキストをh1に指定するのがベストかと思います。

>articleの中にsectionは使えないのでしょうか?

使えます!
その逆、sectionの中にarticleを入れることも可能です。


 

■mainタグについて

 

>mainタグはbodyタグよりも大きい枠組みなんですか?

違います!mainはあくまでbodyタグよりも下に位置するものです。
bodyタグは「ユーザーから見えるコンテンツ全てを包括するタグ」です。
対してmainタグは「そのページにおける主要なコンテンツを囲うタグ」なので、概念としてはbodyよりも下です。

例えば、2カラムレイアウトのWebページ内のコンテンツを大きくカテゴライズすると、
大抵のサイトは以下のようになります。
・ヘッダー
・サイドバー
・メインコンテンツ
・フッター

これの「メインコンテンツ」に当たる部分が、mainタグで囲むべき部分です。


 

■fugureタグについて

 

>imgタグには基本figureを付けたほうがいいのですか?

違います!
figureタグは「図や表、ソースコードなどを囲むタグ」です。
図や表というと大抵imgタグになることが多いため、そのような誤解を生みやすいのですが、
figureタグで囲むべきものは必ずしもimgタグとは限りません。
また同時に、imgタグが表示されるコンテンツもそれが「図、表、ソースコード」だとは限りませんよね。
むしろ、それ以外である場合のことのほうが多いはずです。
例えばイメージ図、アイキャッチ、アイコンなど。それらをfigureタグで囲う必要はありません。


 

■timeタグについて

 

>YYYY-MM-DDの順序は国ごとに違いますか?

いいえ、この順序で決まっています!
HTML5の仕様でこのように決まっていますので、どの国でもその書き方でOKです。


 

■headerタグについて

 

>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辺りはとくに詳しい解説があります。


 

■その他

 

>これからコーディングの仕事に就くためには、今回教わったSEO対策や
 W3Cや検索エンジンについての知識は必須でしょうか?

どんなコンテンツを作るかによって異なりますね。
コーディングと一口にいっても、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

 


 

■堀口先生の授業


【生放送】
レスポンシブ基礎 〜Webサイトをレスポンシブにする方法とそのメリット〜

 

【コース授業】
HTML5/CSS実践 明日から使えるテクニック(全3回)

この記事は会員限定です。会員登録すると続きをお読みいただけます(無料)

  • このエントリーをはてなブックマークに追加

デザイン学部の記事一覧