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

ホーム
フロントエンド
【セマンティックウェブ】 HTML5をわかりやすくまとめてみる【初心者向け】

フロントエンド

2019.07.26

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

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

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

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

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

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

アオキ

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

参考記事

もんプロ～問題発見と解決のためのプログラミング〜

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

https://coinbaby8.com/sidebusiness-homepage.html

ホームページをつくってみたいんだけど、どこから始めたらいいかよくわからないんだよなぁ・・今回の記事ではこんな悩みにお答えします。ホームページを作れるようになるためにホームページを作れるようになるためには、いくつかのスキルが必要になります。必須・HTML (エイチティーエムエル)・CSS (シーエスエス)追加で覚えたいスキル・jQuery (ジェイクエリー)・Javascript (ジャバスクリプト)・PHP (ピーエイチピー)・Bootstrap(ブートストラップ)まずはHTML(エイチティーエムエル)の説明から。ホームページのつくり方まずは必須の...

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

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

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

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

今回は、

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

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

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

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

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

似たような言葉に、

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

などもあります。

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

例えば、

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

というのを、

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

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

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

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

header・・ヘッダー(グローバルのヘッダー、セクション内のヘッダー)
main・・メインコンテンツ
nav・・ナビゲーション
section・・1コンテンツごとの区切り。
article・・独立したコンテンツ。ブログの1記事。ニュースの1記事など。本文そのもの。
aside・・補足的なコンテンツ
footer・・フッター

アオキ

『HTML4』の頃はほとんど全部divでしたからね・・div divばかりじゃ意味わからんですよね・・

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

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

bodyタグの中に、

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

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

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

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

    <title></title>

    <link rel="stylesheet" href="style.css">
    <script src="js/script.js"></script>
</head>

<body>

<header>

<nav>
</nav>

</header>

<main>
<article>

<h1>記事タイトル</h1>

<section>
<h2>見出し1</h2>
</section>

<section>
<h2>見出し2</h2>
</section>

<section>
<h2>見出し3</h2>
</section>

</article>

</main>

<footer>
</footer>

<script src="js/main.js"></script>
</body>
</html>

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

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