フロントエンド

【セマンティックウェブ】 HTML5をわかりやすくまとめてみる【初心者向け】

パソコンやスマホで毎日のように目にする『ホームページ』。

グーグルやヤフーで検索して『ホームページ』を表示することもあれば、

最近ではスマホに『オッケーグーグル』なんて声をかけても、
検索できるようにもなってきました。

文字を認識して音声で読んでくれる機能もあったり。

昔の『ホームページ』は、『HTML4』の簡単な『タグ』と文章だけだったのですが。

アオキ
『タグ』って何?と思ったらこちらの記事も参考にしてください。

参考記事

テクノロジーが進化するにつれ、

『HTMLタグ』にも意味を持たせる事で、

人にとっても検索エンジンにとっても、

もっとわかりやすくしようという流れになりました。

今回は、

『HTMLタグ』に意味を持たせてわかりやすくするための、

『セマンティックウェブ』についてまとめてみたいと思います。

  • セマンティック(Semantic)・・意味をもたせる
Sponsored link

セマンティックウェブ わかりやすく意味をもたせて

『セマンティック(Semantic)』は英語で『意味の』という意味で。

似たような言葉に、

  • セマンティックデザイン(セマンテックデザイン)
  • セマンティックコーディング(セマンテックコーディング)
  • セマンティック検索(セマンテック検索)
  • セマンティックマークアップ(セマンテックマークアップ)

などもあります。

いずれも文章だけではなく、
『ホームページ』や『ブログ』の構造自体にも意味をもたせようという事で。

例えば、

  • どれがページのタイトルで、
  • どれがメニューで、
  • どれが本文で、
  • 本文の中でどこまでが1まとまりで、
  • どれが補足情報で、

というのを、

『HTMLのタグ』でわかりやすくしようというのが『セマンティックウェブ』になります。

セマンティックウェブ よく使うHTML5タグ

2014年頃に誕生した『HTML5』ではたくさんの『タグ』が追加されているのですが、

その中でもよく使う『タグ』は以下になります。

  • header・・ヘッダー(グローバルのヘッダー、セクション内のヘッダー)
  • main・・メインコンテンツ
  • nav・・ナビゲーション
  • section・・1コンテンツごとの区切り。
  • article・・独立したコンテンツ。ブログの1記事。ニュースの1記事など。本文そのもの。
  • aside・・補足的なコンテンツ
  • footer・・フッター
アオキ
『HTML4』の頃はほとんど全部divでしたからね・・div divばかりじゃ意味わからんですよね・・
Sponsored link

セマンティックウェブ を意識したコーディング HTML5タグの使用例

『セマンティックウェブ』をつくるには、ざっくりこんな構成でつくることになります。

bodyタグの中に、

header、main、aside、footerとわかれて、

mainの中に、articleやsectionが入ると。

コードにするとこんな感じです。

※一部レスポンシブ化やCSS・JavaScript読み込みも想定しています。

中でも頻出するのがsectionで、
sectionでキレイに区切られているとわかりやすいのかなと思います。

セマンティックウェブ HTML5のオススメ覚え方

世の中には無料でハイクオリティの『ホームページテンプレート』が山程あるので、

一度ダウンロードして中身のコードを見てみるといいんじゃないかなと思います。

例えば『Titan』というテンプレートは今どきでキレイでスッキリしててオススメですが、

【Bootstrap製】90ページ超えの無料HTML5/CSS3テンプレート素材 Titan

他にもたくさん良質なテンプレートがあるので、

お気に入りの『HTMLテンプレート』を探して、

『HTML5タグ』が使われている事を確認しつつ、

さーっと読んでみたり修正したりしながら身につけていくといいかなと思います。

Sponsored link

セマンティックウェブ HTML5.2でmainが複数OKに

『HTML』も徐々に進化していて、

2017年12月に『HTML5.2』がリリースされていました。

main要素が複数位置できるようになったり、
いくつか変更点があるようなので、
興味があればチェックしてみてください。

W3C「HTML5.2」勧告。HTML5からの仕様変更点を確認しよう!

セマンティックウェブ HTML5まとめ

ブログをやっている身としては、

アオキ
やっぱり文章、中身でしょ

と思ったりはするのですが、

キレイな構造の方が『検索ランキング』も上位に上がりやすいようで、

昔よりも構造のキレイさは重要になってきています。

ホームページを修正するにつれ、ぐちゃぐちゃになりがちなので、

キレイな構造を意識してつくっていきたいものですね。

アオキ
このブログのテンプレートもいずれ変えようと思ってはいるんですけどね・・

関連記事

HTML5の文書構造「セマンティックマークアップ」まとめ
セマンティックなマークアップをするメリット(WebアクセシビリティPart2)
Webデザイナー必見!セマンティックコーディングに欠かせない構造化データ。【基礎編】
応用48. HTML5で追加された要素 – header,footer,main,nav, article,aside,section

『web初心者』『HTML/CSS関連』ではこんな記事も読まれています。

1. 【厳選8冊】ホームページを作れるようになるためのおすすめ本【初心者向け】

2. ホームページつくり方を3ステップでわかりやすくまとめてみた【初心者向け】

3. 【セマンティックウェブ】HTML5をわかりやすくまとめてみる【初心者向け】

4. 【CSS】の書き方をまとめてみた 『レスポンシブ対応』※随時更新中

5. プログラム入門おすすめの言語はJavaScriptで決まり〜分かりやすさ第一で説明してみる〜

6. 【P5.js】遊ぶようにプログラムできるクリエイティブコーディング〜はじめのいっぽ〜(1)

7. パソコンのキーボード練習の4つのステップをまとめてみた

8. レスポンシブサイトの作り方をめっちゃわかりやすく書いてみた【Bootstrap4】【初心者向け】

9. ホームページの作り方をわかりやすくまとめてみた〜5つの方法【初心者向け】

10. 【サーバー】とは 種類についてわかりやすくまとめてみた【初心者向け】

アオキ
ツイッターでも記事ネタ含めちょろちょろ書いていくので、よろしければぜひフォローお願いしますm(_ _ )m

アオキのツイッターアカウント


関連記事一覧 (一部広告あり)

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


最近の記事

  1. バックエンド

    【厳選8冊】ホームページを作れるようになるためのおすすめ本【初心者向け】
  2. CG関連

    【P5.js】遊ぶようにプログラムできるクリエイティブコーディング〜はじめのいっ…
  3. 音楽

    コードの転回形の練習方法をまとめてみた【大人のピアノ】
  4. バックエンド

    【Python】手軽に試す方法2つとwebフレームワークについて【初心者向け】
  5. CG関連

    【3Dプログラム】初心者にオススメな方法はこれ(9)【P5.js】
PAGE TOP