HTML5とHTMLの違い

プログラミング学習サービスやら、ペットサロン予約サービス、風俗予約サービスなど色々とやっている「かずきち」です。

◾️その他Qiita記事
[「お前らのフリーランスになるメリットは間違っている」というお話](https://qiita.com/kazukichi/items/c458aa9e763b9a3eb25b)
[「お前らのフリーランスになるメリットは間違っている」というお話 〜 リク◯◯ト半端ないって！編 〜](https://qiita.com/kazukichi/items/f8696641afdf65417aff)
[エンジニアで稼ぐために大切な２０のコト](https://qiita.com/drafts/7379b75fba2f90d3cf45)

■運営サービス一部
http://crazy-wp.com/
フリーランスエンジニアを育成するオンライン最大級のプログラミングスクール「ウェブカツ」
http://webukatu.com/

■プログラミングスクール「ウェブカツ」の出版本
「小学生からでもプログラミングを楽しく学べる漫画作りたいなー」と思い立ち、外注してウェブカツで漫画本を作りました。KADOKAWAさんより出版しています。
[はたらくプログラミング 完全版 (コミックエッセイ)  KADOKAWA　ウェブカツ]
(https://www.amazon.co.jp/dp/B08Q6WZ1QQ/ref=cm_sw_r_tw_dp_8VS38CG94EEAPXJDKHH7)
![81fn2zk7e3L.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31304/480c1a36-735e-4ba3-328c-76e889a543b9.jpeg)


新宿のホストから不動産・保険の営業を経て、HTMLって何？という状態から３ヶ月独学でプログラミングやデザインを学び、IT業界で１年間実務経験を積んで年収は１本超え。現在は起業家としてサービス運営やら不動産運営をしています。

本記事はHTMLとHTML５の違いを説明します。ちなみにこの記事はSEO実験も兼ねています。

ついでにこっちも読んでなければどーぞ
　↓↓↓
<a href="http://qiita.com/kazukichi/items/7379b75fba2f90d3cf45" target="_blank">エンジニアで稼ぐために大切な１３のコト</a>

<h2>HTMLの仕様を決めているW3C</h2>
<a href="http://webukatu.com/wordpress/wp-admin/post.php?post=700&amp;action=edit">バージョンって何？</a>でもちょろっと説明しましたが、HTMLにもバージョンというものがあり、<em>バージョンによって書き方や使えるタグなどの仕様</em>が違っています。

このHTMLの仕様を決めているのは<em>W3C（ダブリュスリーシー）</em>です。

W3cはWorld Wide Web Consortiumの略で、World Wide Webで使用される各種技術の標準化を推進する為に設立された標準化団体、非営利団体です。
<h2>３種類のHTMLバージョン</h2>
HTMLのバージョンには大きく３つあります。

昔はバージョンによって対応していないブラウザもありましたが、最近のブラウザはどれも対応しています。

また、バージョンによって、書き方や使えるタグが違ってきます。
<blockquote>HTML4.01　・・・　一般的に使われているHTMLのバージョン

XHTML1.0　・・・　HTML 4.01から派生したもので、特徴も似ています。しかし、記述方法に関してはかなり厳密です。その代わり、要素（タグ）を拡張することができるのが最大の特徴です

HTML5　・・・　最新のHTMLバージョン。使えるタグがかなり増え、書き方もシンプルになりました。ただブラウザによてまだ一部の機能が使えないものがあります。</blockquote>
<h2>Doctype宣言の違い</h2>
バージョンによってまずDoctypeの宣言の書き方が違ってきます。

Doctype宣言は下記のように&lt;html&gt;の先頭で「このHTMLはこのバージョンで書いてありますよ〜」と機械に伝える（宣言）するためのものになります。

詳しくはこちらのサイトなどを見て下さい。

https://9lio.com/column/html-version-and-doctype/
<pre class="lang:xhtml decode:true crayon-selected">&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"&amp;nbsp;"http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html&gt;
　　&lt;head&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;/body&gt;
&lt;/html&gt;</pre>
<h3>HTML4.01</h3>
HTML4.01では、下記３つのうちどれかのDoctype宣言を書く必要があります。
<pre class="lang:xhtml decode:true">&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"&amp;nbsp;"http://www.w3.org/TR/html4/strict.dtd"&gt;</pre>
<pre class="lang:xhtml decode:true">&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&amp;nbsp;"http://www.w3.org/TR/html4/loose.dtd"&gt;</pre>
<pre class="lang:xhtml decode:true">&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"&amp;nbsp;"http://www.w3.org/TR/html4/frameset.dtd"&gt;</pre>
<h3>XHTML1.0</h3>
下記３つのうちどれかのDoctype宣言を書く必要があります。
<pre class="lang:xhtml decode:true">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;</pre>
<pre class="lang:xhtml decode:true">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;</pre>
<pre class="lang:xhtml decode:true">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"&gt;</pre>
<h3>HTML5</h3>
HTML５ではDoctype宣言はとてもシンプルになりました。
<pre class="lang:xhtml decode:true">&lt;!DOCTYPE html&gt;</pre>
<h2>html要素と文字のエンコーディング</h2>
<h3>HTML4.01</h3>
HTML4.01では、下記３つのうちどれかのDoctype宣言を書く必要があります。
<pre class="lang:xhtml decode:true">&lt;html lang="ja"&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;</pre>
<h3 class="lang:default decode:true crayon-selected">XHTML1.0</h3>
<pre class="lang:xhtml decode:true">&lt;html&amp;nbsp; xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-type" content="text/html; charset=utf-8" /&gt;</pre>
<h3>HTML5</h3>
HTML５ではDoctype宣言はとてもシンプルになりました。
<pre class="lang:xhtml decode:true">&lt;html lang="ja"&gt;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;</pre>
<h2>リンクタイプ</h2>
<h3>HTML4.01</h3>
<pre class="lang:xhtml decode:true">&lt;link rel="stylesheet" type="text/css" href="style.css" /&gt;</pre>
<h3 class="lang:default decode:true crayon-selected">XHTML1.0</h3>
<pre class="lang:xhtml decode:true">&lt;link rel="stylesheet" type="text/css" href="style.css" /&gt;</pre>
<h3>HTML5</h3>
HTML５ではtype属性を省略できるようになりました。
<pre class="lang:xhtml decode:true crayon-selected">&lt;link rel="stylesheet" href="style.css" /&gt;</pre>
<h2>バージョンはどれを使えばいいの？</h2>
HTML５の基本的な機能はIE9以降から対応しているので、「IE9以降のブラウザで同じような見た目になればいい」といった現場であればHTML5を使いましょう。

（IE8以下へも「JavaScript」を用いれば対応は可能です。）

http://webukatu.com/wordpress/%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%AE%E7%A8%AE%E9%A1%9E%E3%81%A8%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E5%AF%BE%E5%BF%9C/