HTML5を簡単に説明

HTML5を簡単に説明「教えてマリオ」

ホーム>>教えてマリオトップ>>HTML5を簡単に説明

このブログはマリオデザインアルバイトスタッフがこれからWEbを勉強してみたいと思われている方や会社でホームページの更新業務を担当されているがよく意味が分からないという方のために、ホームページ作成の基礎を綴っていくものです。難しい言葉を使わず（使えない）噛み砕いた言葉で書いていくので、参考になればと思います。
＊勉強中の為、間違った解釈を説明すると思いますので、ご指摘コメントもお待ちしておいります。

HTML5を簡単に説明

2013年7月8日
html

HTML5を簡単にご説明いたします。弊社でも徐々にHTML5に移行しているのでこれだけはというものを簡単にご説明いたします。

HTML5にするメリットは
＜head＞＜/head＞部分を置き換える
新しく追加されたタグ
今までの＜div＞タグと置き換える

1.HTML5にするメリットは

まずはHTML5のメリットについて考えます。

個人的には移行するメリットはあまり感じていません。覚えることをふやすなって感じです。

ではなぜHTML5を勉強するかというと、新しいことができたらかっこいい・・・・

現状これだけです。

しかし、実際にメリットはありますので一般的に言われているメリットをご紹介します。

一番のメリットは

【マークアップが細かくできる】

ということだと思います。

細かく言えばメリットはたくさんありますが、一番大きなメリットはこれだと思います。

今まではつくりてが＜div＞タグなどに

＜div id=”header”＞と記述してこの部分はヘッダーの部分ですと記述していましたが

極端な話サイトの構造を見るグーグル先生からしたら何のことだかわかりません。

これをサイトの構造を見るグーグル先生によりわかりやすくしたものがHTML5です。

ようするに今までタグの種類が少なく＜div＞タグなどを使っていましたが
サイト構造にあった意味のあるタグがたくさん追加されました。

今回はその追加されたタグと、今まで使ったいた＜div＞タグとの置き換えをご説明します。

▲目次へ戻る

2.＜head＞＜/head＞部分を置き換える

HTML5を使用するにはまずは＜head＞＜/head＞の中身を今までと変更しなければいけません。

（＜head＞＜/head＞はサイトの脳みその部分にあたり、見ている人には表示されません。）

今までのHTML1.0の場合は下記のような記述になります。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ホームページのタイトルを記述</title>
</head>

上記の＜head＞＜/head＞にはこのサイトはXHTML1.0で書きますよ、とかモジコードはutf-8ですよ、と書かれています。

これをHTML5用にすると

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ホームページのタイトルを記述</title>
</head>

上記のように簡素化して記述することができます。

▲目次へ戻る

3.新しく追加されたタグ

次はHTML5で新しく追加されたタグをご紹介します。

追加されたタグはたくさんありますが、よく使うものだけ紹介します。


<header></header>

<nav></nav>

<article></article>

<section></section>

<footer></footer>

上記のようなものが追加されました。（ほんとに一部ですいません）

追加されたものは上記以外にもたくさんありますが、よく使うのは上記の5個だと思います。

また、HTML5はタグが追加されただけでなくタグのもつ意味が変わっているものもあるので注意が必要です。

では5つのタグの意味をご説明いたします。

まずは＜header＞＜/header＞です。

＜header＞＜/header＞はその名のとおりサイトの上部（頭の部分）を記述するタグです。

当サイトを例にすると、ロゴやナビゲーション（ボタン）の部分です。

＜nav＞＜/nav＞タグはナビゲーション（ボタン）の部分に使用するタグです。

＜article＞＜/article＞は自己完結・このタグの中で完結する内容を記述します。少し難しい表現になりましたが、大きなコンテンツを囲むタグです。

＜section＞＜/section＞は一つの項目（セクション）を囲むものになります。

＜footer＞＜/footet＞もその名の通りサイトの下部（足元）の部分を記述するタグです。

▲目次へ戻る

4.今までの＜div＞タグと置き換える

例を上げて、今までのサイトのタグの記述の仕方と、HTML5のタグの記述の仕方をご説明します。

今までだとタグが少なかったので一般的なホームページを制作する際は下記のようになっていました。

xhtml
上記のように＜div＞タグにIDやクラスを振って記述するのが今まででは一般的でした。

しかしHTML5では下記のように記述できます。

html5
HTML5ではタグが増えましたので上記のように意味のあるマークアップが可能になりました。

まだまだ、HTML5にはタグがたくさんあり、より詳しくHTMLを記述することが可能になりました。

私も少しずつ覚えていきたいと思います。以上でHTML5簡単説明を終了致します。