HTML要素と有効なDOCTYPE

 

 

HTML元素と有効なDOCTYPES

HTML（HyperText Markup Language）はウェブページを構築するための基本的な言語です。HTML文書は、構造化されたテキスト、画像、リンク、フォーム要素などの組み合わせで構成されます。HTML元素は、ウェブページ内でこのようなコンテンツを定義するために使用されます。さらに、有効な DOCTYPE 宣言は、ブラウザに文書の種類を伝え、適切なレンダリングを保証します。

HTML元素 - 有効な DOCTYPES

以下の表は、すべての HTML5、HTML 4.01、および XHTML 元素と、それらが登場する文書タイプ (!DOCTYPE) を示しています：

HTMLタグのサポート状況

タグ HTML5 Transitional Strict Frameset XHTML 1.1
<a> ✅ ✅ ✅ ✅ ✅
<abbr> ✅ ✅ ✅ ✅ ✅
<acronym> ❌ ✅ ✅ ✅ ✅
<address> ✅ ✅ ✅ ✅ ✅
<applet> ❌ ✅ ❌ ✅ ❌
<area> ✅ ✅ ✅ ✅ ❌
<article> ✅ ❌ ❌ ❌ ❌
<aside> ✅ ❌ ❌ ❌ ❌
<audio> ✅ ❌ ❌ ❌ ❌
<b> ✅ ✅ ✅ ✅ ✅
<base> ✅ ✅ ✅ ✅ ✅
<basefont> ❌ ✅ ❌ ✅ ❌
<bdi> ✅ ❌ ❌ ❌ ❌
<bdo> ✅ ✅ ✅ ✅ ❌
<big> ❌ ✅ ✅ ✅ ✅
<blockquote> ✅ ✅ ✅ ✅ ✅
<body> ✅ ✅ ✅ ✅ ✅
<br> ✅ ✅ ✅ ✅ ✅
<button> ✅ ✅ ✅ ✅ ✅
<canvas> ✅ ❌ ❌ ❌ ❌
<caption> ✅ ✅ ✅ ✅ ✅
<center> ❌ ✅ ❌ ✅ ❌
<cite> ✅ ✅ ✅ ✅ ✅
<code> ✅ ✅ ✅ ✅ ✅
<col> ✅ ✅ ✅ ✅ ❌
<colgroup> ✅ ✅ ✅ ✅ ❌
<command> ✅ ❌ ❌ ❌ ❌
<datalist> ✅ ❌ ❌ ❌ ❌
<dd> ✅ ✅ ✅ ✅ ✅
<del> ✅ ✅ ✅ ✅ ❌
<details> ✅ ❌ ❌ ❌ ❌
<dfn> ✅ ✅ ✅ ✅ ✅
<dir> ❌ ✅ ❌ ✅ ❌
<div> ✅ ✅ ✅ ✅ ✅
<dl> ✅ ✅ ✅ ✅ ✅
<dt> ✅ ✅ ✅ ✅ ✅
<em> ✅ ✅ ✅ ✅ ✅
<embed> ✅ ❌ ❌ ❌ ❌
<fieldset> ✅ ✅ ✅ ✅ ✅
<figcaption> ✅ ❌ ❌ ❌ ❌
<figure> ✅ ❌ ❌ ❌ ❌
<font> ❌ ✅ ❌ ✅ ❌
<footer> ✅ ❌ ❌ ❌ ❌
<form> ✅ ✅ ✅ ✅ ✅
<frame> ❌ ❌ ❌ ✅ ❌
<frameset> ❌ ❌ ❌ ✅ ❌
<h1> - <h6> ✅ ✅ ✅ ✅ ✅
<head> ✅ ✅ ✅ ✅ ✅
<header> ✅ ❌ ❌ ❌ ❌
<hgroup> ✅ ❌ ❌ ❌ ❌
<hr> ✅ ✅ ✅ ✅ ✅
<html> ✅ ✅ ✅ ✅ ✅
<i> ✅ ✅ ✅ ✅ ✅
<iframe> ✅ ✅ ❌ ✅ ❌
<img> ✅ ✅ ✅ ✅ ✅
<input> ✅ ✅ ✅ ✅ ✅
<ins> ✅ ✅ ✅ ✅ ❌
<kbd> ✅ ✅ ✅ ✅ ✅
<keygen> ✅ ❌ ❌ ❌ ❌
<label> ✅ ✅ ✅ ✅ ✅
<legend> ✅ ✅ ✅ ✅ ✅
<li> ✅ ✅ ✅ ✅ ✅
<link> ✅ ✅ ✅ ✅ ✅
<map> ✅ ✅ ✅ ✅ ❌
<mark> ✅ ❌ ❌ ❌ ❌
<menu> ✅ ✅ ❌ ✅ ❌
<meta> ✅ ✅ ✅ ✅ ✅
<meter> ✅ ❌ ❌ ❌ ❌
<nav> ✅ ❌ ❌ ❌ ❌
<noframes> ❌ ✅ ❌ ✅ ❌
<noscript> ✅ ✅ ✅ ✅ ✅
<object> ✅ ✅ ✅ ✅ ✅
<ol> ✅ ✅ ✅ ✅ ✅
<optgroup> ✅ ✅ ✅ ✅ ✅
<option> ✅ ✅ ✅ ✅ ✅
<output> ✅ ❌ ❌ ❌ ❌
<p> ✅ ✅ ✅ ✅ ✅
<param> ✅ ✅ ✅ ✅ ✅
<pre> ✅ ✅ ✅ ✅ ✅
<progress> ✅ ❌ ❌ ❌ ❌
<q> ✅ ✅ ✅ ✅ ✅
<rp> ✅ ❌ ❌ ❌ ❌
<rt> ✅ ❌ ❌ ❌ ❌
<ruby> ✅ ❌ ❌ ❌ ❌
<s> ✅ ✅ ❌ ✅ ❌
<samp> ✅ ✅ ✅ ✅ ✅
<script> ✅ ✅ ✅ ✅ ✅
<section> ✅ ❌ ❌ ❌ ❌
<select> ✅ ✅ ✅ ✅ ✅
<small> ✅ ✅ ✅ ✅ ✅
<source> ✅ ❌ ❌ ❌ ❌
<span> ✅ ✅ ✅ ✅ ✅
<strike> ❌ ✅ ❌ ✅ ❌
<strong> ✅ ✅ ✅ ✅ ✅
<style> ✅ ✅ ✅ ✅ ✅
<sub> ✅ ✅ ✅ ✅ ✅
<summary> ✅ ❌ ❌ ❌ ❌
<sup> ✅ ✅ ✅ ✅ ✅
<table> ✅ ✅ ✅ ✅ ✅
<tbody> ✅ ✅ ✅ ✅ ❌
<td> ✅ ✅ ✅ ✅ ✅
<textarea> ✅ ✅ ✅ ✅ ✅
<tfoot> ✅ ✅ ✅ ✅ ❌
<th> ✅ ✅ ✅ ✅ ✅
<thead> ✅ ✅ ✅ ✅ ❌
<time> ✅ ❌ ❌ ❌ ❌
<title> ✅ ✅ ✅ ✅ ✅
<tr> ✅ ✅ ✅ ✅ ✅
<track> ✅ ❌ ❌ ❌ ❌
<tt> ❌ ✅ ✅ ✅ ✅
<u> ❌ ✅ ❌ ✅ ❌
<ul> ✅ ✅ ✅ ✅ ✅
<var> ✅ ✅ ✅ ✅ ✅
<video> ✅ ❌ ❌ ❌ ❌
<wbr> ✅ ❌ ❌ ❌ ❌

事例

例として、標準的な HTML5 文書の基本構造は次のようになります：

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>サンプルHTML5文書</title>
</head>
<body>
    <h1>これは見出しです</h1>
    <p>これは段落です。</p>
</body>
</html>

この例では、HTML5 の DOCTYPE 宣言が使用され、簡単な見出しと段落が定義されています。

関連QA

Q1: DOCTYPE 宣言は必要ですか？

A1: はい、DOCTYPE 宣言は文書の種類をブラウザに伝え、正しい表示を保証するために重要です。

Q2: HTML5 で新しい元素はどれですか？

A2: HTML5 で新しく追加された元素には <article>、<aside>、<figure>、<figcaption>、<footer>、<header>、<nav>、<section> などがあります。

Q3: XHTML と HTML の違いは何ですか？

A3: XHTML は HTML を XML に基づいて再構築したもので、より厳密な構文規則があります。例えば、すべてのタグは閉じられなければなりません。