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が公開しているウェブマスターアカデミーを紹介します。 サイトをこれから作ろうという場合、まず何からしていいものやらと思うことになりますが、その手順をGoogleが教えてくれるコンテンツという非常に効果的かつ有益な内容になっています。 この内容をしっかり学習することで、Webサイトの作成、運用をスムーズに行うことができるよう […]
  • Webサイトの運用にかかせないテスト環境構築のススメWebサイトの運用にかかせないテスト環境構築のススメ 今日は、サイト運用をより効果的に行うための方法の一つとして僕も実践している「テスト環境を作成する」ことについて書きます。 Webサイトのテスト環境を作る理由とメリット まず、テスト環境を作るというと、「そんなのめんどくさい」とか、「作る側の人だけでしといてくれたらいい」とか、そういう意見をいただくこともあるのですが、テスト環境は作成して使っていくことで多くのメリッ […]
  • 会社概要のページと会社沿革のページはけっこう大切会社概要のページと会社沿革のページはけっこう大切 最近サイトを運用する事もしてますが、実は作る仕事の方が今は多くて、サイトの制作をけっこうしているんですが、作っているコンテンツで会社概要や会社の歴史コンテンツを編集する機会があってそこで感じた事を今日は書こうと思います。 その作っているサイトはとある会社のサイトなんですが、特徴のある商品を1世紀以上売っているようなところで、けっこうな歴史があります。 なので、会社概要ペー […]
  • ホームページ/Webサイトのアクセスアップの基礎知識。流入経路を把握する。ホームページ/Webサイトのアクセスアップの基礎知識。流入経路を把握する。 今回はホームページ/Webサイトのアクセスアップを行う際の基礎知識として、サイトへのアクセスが発生する流入経路にはどの様なものがあるのかを考察します。 単純にサイトにアクセスを集めれば売上が上がるということではありませんが、どの様な人に見てもらうかや、ホームページ/Webサイト上での成果を出すためには、アクセスをどこからどうやって集めるのかということを知っておくことは必要で […]
  • これからECをはじめる方向け。ECサービスの比較と特徴など調査【2015年6月版】これからECをはじめる方向け。ECサービスの比較と特徴など調査【2015年6月版】 今日は先日お客さんにECサイトをはじめたいという質問があったので、今後の事もかねて手軽にはじめる事が出来るサービスを比較してまとめてみました。 今回比較するサービスはSTORES.jp、BASE、Yahooショッピング、カラーミーショップ、Makeshop、ショップサーブの6つ。 ECのサービスというか一般的にはASPといわれる部類のものですが、これからはじめる人がASP […]
  • キャッシュよさらば【Webサイトのキャッシュを削除する方法のまとめ】キャッシュよさらば【Webサイトのキャッシュを削除する方法のまとめ】 今日はキャッシュの削除方法を紹介します。 え?キャッシュ?今さら?とか思わないでください。 キャッシュに関する一般の人の理解は未だかなり低く、そもそもキャッシュとは何か?という事を知らない人がまだまだたくさんいます。 仕事上色々なWebに関する相談をいただくのですが、その中でもキャッシュに関する質問はいつまでたっても減りません。 「それキャッシュが原因ですよ」 […]

よく見られている記事

ふにろぐナビ

About

ふにろぐとは?

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

このブログについて

ふにすのお仕事

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

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

ソーシャルとか。

NewEntry

はてブで人気の記事

PickUP

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

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

Category

Month