HTML5の簡単な紹介 #HTML5

はじめに

対象

HTML５について簡単に触りたい人に対して簡単な基礎知識について紹介します．

HTML5とは

HTML5とは，HTMLのバージョン5，改訂第5版のことです．
2014年10月28日にHTML5が発表されました．

何にが変わった？

HTML4と比べて改善されたところを一言で表すとすれば，
「今まで複雑だった処理が簡単にすることができるようになった!」
改善された箇所は数多くあるのですが，その中から2つをご紹介します．

文書構造がシンプルになった

HTML5では，文書構造を表す新しい要素が加わることで，シンプルに見やすくなっただけでなく，ブラウザや検索エンジンに対してより明確に文書構造を伝えられるようにもなりました．
例えば，ヘッダを示す<header>，フッタを示す<footer>，一つのセクションであることを示す<section>，記事であることを示す<article>，ナビゲーションであることを示す<nav>などの要素が追加されており，それぞれの役割に応じて適切な要素に割り当てることができるようになりました．

動画や音声の埋め込みが簡単になった

これまでのHTML4では，動画を使うには「Flash」(多少複雑)というものを使っていました．
HTML5では，<video>や<audio>という「タグ」を使用して，動画や音声をシンプルに扱えるようになりました．
また，PCのみではなく，スマホなどでも再生可能ようになった．
HP制作時などに対応機種を気にする必要がなくなりました．(気楽！)

サンプル

下のindex.htmlはHTML5を使って作った簡単なサンプルコードとなっています．

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
  <!-- ShiftJISの時は"SJIS" -->
  <meta charset="UTF-8">
  <title>HTML5サンプル</title>
</head>

<body id="index">
  <div id="title">
    <header>
      <address>
        <p>TEL：000-0000-0000/E-mail：XXXX@YYY.ZZZ</p>
      </address>
    </header>

    <nav>
      <h2>メニュー</h2>
      <ul>
        <li><a href="index.html">メニュー1</a></li>
        <li><a href="index.html">メニュー2</a></li>
      </ul>
    </nav>
  </div>

  <h1>見出し1</h1>
  <h2>見出し1</h2>
  <h3>見出し6</h3>
  <h4>見出し1</h4>
  <h5>見出し6</h5>
  <h6>見出し6</h6>
  <p>「p」を使用</p>

  <div id="div">
    <h2>「dl」の使い方</h2>
    <dl>
      <dt>dtを使用</dt>
      <dd>ddを使用</dd>
      <dt>dtを使用</dt>
      <dd>ddを使用</dd>
    </dl>
  </div>

  <footer>
    <small id="copy">copyright&copy;2019 著作権者名 Kenta</a></small>
  </footer>
</body>

</html>

表示結果：

基本的な内容はHTML4と変わらず，先ほど話したようにナビゲーションやフッターなど新しい要素を使って，自分で見たぜひ色々試してください．

今回の「HTML5の簡単な紹介」は以上で終わります．
読んでいただいてありがとうございます．
また今度で会いましょ！