Web担当者が覚えておいて損はないHTML5タグ

Publish2012/10/21(日)

Update2016/01/02(土)

Web担当者が覚えておいて損はないHTML5タグ

HTML5で制作されているサイトがかなり増えてきたので、担当者レベルでもそろそろ覚えておいてもらった方がいいタグとかを今更ですがまとめてみます。
HTML5は2015年に勧告になっており、すでに多くのサイトがHTML5で制作されています。
ブラウザ側も、例の問題あるブラウザ以外のモダンブラウザと言われるブラウザではサポートされております。
ふにすでも制作するサイトは基本的にHTML5で制作しています。

!DOCTYPE html

<!DOCTYPE html>

HTML5のドキュメント宣言です。文書の一番最初に書いてあるので他の人が作ったサイトのソースを見たときに一番最初にこの記述があればそのサイトはHTML5で作られているということを意味します。

header

<header>

ヘッダーを定義しているタグです。サイトの中でここはヘッダーですよという事を意味付ける要素です。

footer

<footer>

フッターを定義しているタグです。サイトの中でここはフッターですよという事を意味付ける要素です。

section

<section>

セクションを定義するタグです。セクションなので文章における節になる要素です。
節という事なので基本的に見出しとセットになっている必要があります。

nav

<nav>

ナビゲーションを意味するタグです。ナビゲーションはグローバルナビゲーションだけでなくローカルナビゲーションも含みます。

article

<article>

本文を意味タグです。このタグの中の部分だけも独立したページとしての意味があるという風になるので文書の中ではかなり重要な位置付けになります。
article内にはhタグが必ず必要です。

aside

<aside>

本文には直接関係ないけれど関連性はある要素を置く為の場所のタグです。サイト内のバナーなんかを置くという使われ方をよくされています。

video

<video>

動画コンテンツを格納する為のタグです。今の動画のような形式の埋め込みではなく、直接動画を読み込む時に使用します。これまでかなり長いタグだったものが
<video src=”video.mov”>
のような感じで簡素化されます。

main

<main>

メインコンテンツを格納するためのセクション要素がmainタグです。
セクションと同じような意味合いなので、使用する際にはhタグを使用する必要があります。

まとめ

このようにHTML5で追加されたタグはタグそのものが意味を持っている要素になっている(セマンティックといいます)のが特徴です。
サイトを構成する上で、これまで意味を持っていなかったdivでマークアップするよりもサイトの要素に対する意味づけができるので、HTMLを見ただけでサイトのどの部分を意味しているのが分かりやすくなっています。
HTML5から新しく追加されたタグはこのほかにもありますが、まずはこの辺から覚えておいてもらったら間違いないと思います。

記事の著者:ふにすでぐち

ふにすでぐち

1978年生まれ。企業のWeb活用をテーマに、Webサイトの運用を中心とした戦略的な企画立案、Web運用サポート、Webサイトの構築などを行っています。
5年間のWeb制作会社勤務後、2年間のフリーランスで「フニス」として活動後に法人化し、2012年7月「ふにす株式会社」を設立。
Web活用の情報や考え方などを発信するブログ「ふにろぐ」を不定期更新中です。
2015年11月より大阪府高槻市に「ふにすWeb相談所」を開設。
地域の方々に気軽にWebのことを相談できる場所として、より多くのWeb運用の問題解決をするために活動しています。
サイトの運用や活用にお困りの方、Web運用やブログ更新などの講演のご依頼など、お気軽にご相談ください。
お問い合わせはこちら

LINEでWebに関する質問にお答えしています。

ふにすでは、LINEでWebに関するご質問にお答えしています。Webに関するあんなことやこんなこと、今さら聞けない疑問などなんでもご相談ください。LINEアプリでQRコードを読み取ると友達登録のリンクが表示されますので、試しに登録してみてください。

関連記事

  • 検索キーワードの種類とそれを意識したストーリーを考えよう検索キーワードの種類とそれを意識したストーリーを考えよう サイトを見てもらうための方法のひとつとして、Googleの検索からサイトへのアクセスを獲得する方法があります。 一般的にSEOと呼ばれるものですが、今回はSEOのテクニックではなくて、ユーザーから見た場合のサイトへの到達理由とその意味を考えてみたいと思います。 キーワード検索の種類 まず、検索サイトでは特定のキーワードを入力する事でユーザーが情報を検索できるわけ […]
  • これからECをはじめる方向け。ECサービスの比較と特徴など調査【2015年6月版】これからECをはじめる方向け。ECサービスの比較と特徴など調査【2015年6月版】 今日は先日お客さんにECサイトをはじめたいという質問があったので、今後の事もかねて手軽にはじめる事が出来るサービスを比較してまとめてみました。 今回比較するサービスはSTORES.jp、BASE、Yahooショッピング、カラーミーショップ、Makeshop、ショップサーブの6つ。 ECのサービスというか一般的にはASPといわれる部類のものですが、これからはじめる人がASP […]
  • Googleフォームをサイトに埋め込む場合の手順Googleフォームをサイトに埋め込む場合の手順 昨日のGoogleカレンダーに引き続き、これまたよくある「Googleフォームをサイトに埋め込む手順」を説明します。 まず、Googleフォームを利用するメリットですが、大きく分けると以下の3つが考えられます。 Googleフォームをサイトに埋め込むメリット プログラムが動かないサーバーでも設置できる プログラムの知識がなくてもサイトにフォームを設置できる […]
  • 検索エンジンへのモバイル対策と考え方、チェックツール検索エンジンへのモバイル対策と考え方、チェックツール 先日Googleのオフィシャルブログより、検索結果に関する重大と思える発表がありました。 それがこちらです。 Finding more mobile-friendly search […]
  • 検索順位を確認するときはChromeのシークレットモードを使う検索順位を確認するときはChromeのシークレットモードを使う サイトを運営していて、検索からの流入が気になる人は多いと思います。 流入が気になるという事は、設定したメインのキーワードの順位も気になるはずですよね。 そこで色々なツールで順位を確認するかと思いますが、自身で目視で確認したいという人はGoogleChromeのシークレットモードを使って検索しましょう。 シークレットモードって何? GoogleChromeを使っ […]
  • StyleGuideを活用しようStyleGuideを活用しよう 今回はサイト運用をよりクオリティの高い状態で維持させつつ、作業効率の向上も行える可能性をもつ「StyleGuide」について説明します。 StyleGuideとは StyleGuideを使用するメリット StyleGuideをテストに使用する StyleGuideを作るの便利なStyle Guide […]

よく見られている記事

ふにろぐナビ

About

ふにろぐとは?

ふにろぐは「ふにす株式会社」の「でぐち」が書いているブログです。
このブログでは主にサイトの運営をしている企業のご担当者様向けに、「サイトの運営に役立つTips」や「今更人に聞けないような初歩的なこと」を中心に情報を配信しています。
その他には僕自身の考え方なども書いています。

このブログについて

ふにすのお仕事

このブログを書いている「でぐち」がしている「ふにす株式会社」は大阪と京都の間にある高槻という街で、Webの運用サポートを中心に活動しています。
Webサイトの制作とかもしてますが、ブログを続けるためのサポートとか、会社をどうやってPRすればいいんだろうとか、そういうふわっとした事を相談してください。
どういう内容を相談できるのかをまとめましたので、参考にしていただければと思います。

ふにすにはどんな仕事が頼めるの?

ソーシャルとか。

NewEntry

はてブで人気の記事

PickUP

Webサイトの運用に関する情報

ふにろぐで取り上げたWebサイトの運用に関する記事のまとめです。ツールや運用ノウハウなど、知っていると便利になる情報ですので、まずはこちらをご覧ください。

Category

Month