HTML5とは？初心者でも分かる基礎と活用方法
login_userこの記事では、Web制作の基本となるHTML5について、初心者でも理解できるように解説します。HTML5の特徴や基本タグ、便利な機能までをまとめました。
1 HTML5の基本とは
HTML5は、Webページを作るための最新のマークアップ言語です。以前のHTML4に比べて、構造化やメディア対応が強化されています。
- より意味のあるタグで構造化できる
- 動画や音声を直接埋め込める
- フォームや入力機能が強化されている
- モバイル・レスポンシブ対応が容易
2 HTML5の新しいタグ
HTML5では、文章やページの構造をわかりやすくする新しいタグが導入されています。
| タグ | 用途 |
|---|---|
| <header> | ページやセクションのヘッダー部分 |
| <nav> | ナビゲーションメニュー |
| <section> | 意味のあるセクションを区切る |
| <article> | 独立した記事やコンテンツ |
| <aside> | サイドバーや補足情報 |
| <footer> | ページやセクションのフッター部分 |
| <video> / <audio> | メディアの埋め込み |
3 HTML5のフォームの便利な機能
HTML5ではフォームも強化され、入力チェックや新しいタイプの入力が簡単にできます。
type="email"でメールアドレス入力を自動チェックtype="number"で数値専用入力type="date"でカレンダーから日付選択required属性で必須入力を設定
4 HTML5の活用例
HTML5を活用すると、モダンで使いやすいWebサイトを作ることができます。
- ブログ記事の構造化（<article>、<section>）
- 動画や音声を直接埋め込み（<video>、<audio>）
- フォームの入力を簡単に検証
- モバイルフレンドリーなサイト構築
5 HTML5タグの使い方例
| タグ | 用途 | 使用例 |
|---|---|---|
| <header> | ページやセクションのヘッダー部分 |
<header> <h1>サイトタイトル</h1> <p>サブタイトル</p> </header> |
| <nav> | ナビゲーションメニュー |
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">記事一覧</a></li>
</ul>
</nav>
|
| <section> | 意味のあるセクションを区切る |
<section> <h2>最新ニュース</h2> <p>ニュースの内容がここに入ります。</p> </section> |
| <article> | 独立した記事やコンテンツ |
<article> <h2>ブログ記事タイトル</h2> <p>記事本文がここに入ります。</p> </article> |
| <aside> | サイドバーや補足情報 |
<aside>
<h3>関連記事</h3>
<ul>
<li>リンク1</li>
<li>リンク2</li>
</ul>
</aside>
|
| <footer> | ページやセクションのフッター部分 |
<footer> <p>© 2025 サイト名. All Rights Reserved.</p> </footer> |
| <video> / <audio> | メディアの埋め込み |
<video controls width="320"> <source src="sample.mp4" type="video/mp4"> お使いのブラウザは video タグに対応していません。 </video> <audio controls> <source src="sample.mp3" type="audio/mpeg"> お使いのブラウザは audio タグに対応していません。 </audio> |
6 HTML4.01とHTML5の違いを解説
Web制作で使われるHTMLには、古いHTML4.01と最新のHTML5があります。この記事では、両者の違いや特徴を初心者向けに分かりやすく解説します。
6.1 DOCTYPE宣言の違い
HTML4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
長く複雑で、DTD（文書型定義）を指定する必要があります。
HTML5
<!DOCTYPE html>
シンプルで覚えやすく、ブラウザは自動的にHTML5として認識します。
6.2 意味論タグ（セマンティック要素）の違い
HTML4.01では主に<div>や<span>を使っていましたが、HTML5では意味のあるタグが増えました。
| HTML5タグ | 用途 | 使用例 |
|---|---|---|
| <header> | ページやセクションのヘッダー |
<header><h1>サイトタイトル</h1></header> |
| <nav> | ナビゲーションメニュー |
<nav><ul><li>ホーム</li></ul></nav> |
| <section> | 意味のあるセクション |
<section><h2>最新ニュース</h2></section> |
| <article> | 独立した記事やコンテンツ |
<article><h2>ブログ記事タイトル</h2></article> |
| <aside> | サイドバーや補足情報 |
<aside><h3>関連記事</h3></aside> |
| <footer> | ページやセクションのフッター |
<footer><p>c 2025 サイト名</p></footer> |
| <video> / <audio> | メディアの埋め込み |
<video controls><source src="movie.mp4" type="video/mp4"></video> <audio controls><source src="music.mp3" type="audio/mpeg"></audio> |
6.3 メディア埋め込みの違い
HTML4.01では、動画や音声はプラグイン（Flashなど）が必要でした。HTML5では、<video>や<audio>タグで直接再生できます。
6.4 フォームの違い
HTML5ではフォーム機能が強化され、入力タイプや属性で自動チェックや補助が可能です。
| 属性/タイプ | 用途 |
|---|---|
| type="email" | メールアドレスの自動チェック |
| type="number" | 数値専用入力フィールド |
| type="date" | カレンダーから日付選択 |
| required | 必須入力を指定 |
| placeholder | 入力ヒントを表示 |
6.5 その他の違い
- HTML5はCanvasやGeolocation、Web Storageなどの新APIが利用可能
- レスポンシブ対応やモバイル対応がしやすい
- CSSやマルチメディア対応が強化されている
6.6 まとめ
HTML5は、HTML4.01に比べてシンプルで意味論的、マルチメディアやモバイル対応に優れています。Web制作を始めるならHTML5を覚えることが必須です。
7 まとめ
HTML5は、Web制作の基本でありながら、機能が豊富で便利です。新しいタグやフォーム機能を活用して、より意味のある、使いやすいWebページを作りましょう。
まずは基本のタグから覚え、徐々に動画や音声、フォームの機能まで活用してみてください。HTML5を理解することで、モダンなWeb制作がより簡単になります。
