プログラミング学習サービスやら、ペットサロン予約サービス、風俗予約サービスなど色々とやっている「かずきち」です。
◾️その他Qiita記事
「お前らのフリーランスになるメリットは間違っている」というお話
「お前らのフリーランスになるメリットは間違っている」というお話 〜 リク◯◯ト半端ないって!編 〜
エンジニアで稼ぐために大切な20のコト
■運営サービス一部
http://crazy-wp.com/
フリーランスエンジニアを育成するオンライン最大級のプログラミングスクール「ウェブカツ」
http://webukatu.com/
■プログラミングスクール「ウェブカツ」の出版本
「小学生からでもプログラミングを楽しく学べる漫画作りたいなー」と思い立ち、外注してウェブカツで漫画本を作りました。KADOKAWAさんより出版しています。
[はたらくプログラミング 完全版 (コミックエッセイ) KADOKAWA ウェブカツ]
(https://www.amazon.co.jp/dp/B08Q6WZ1QQ/ref=cm_sw_r_tw_dp_8VS38CG94EEAPXJDKHH7)
新宿のホストから不動産・保険の営業を経て、HTMLって何?という状態から3ヶ月独学でプログラミングやデザインを学び、IT業界で1年間実務経験を積んで年収は1本超え。現在は起業家としてサービス運営やら不動産運営をしています。
本記事はHTMLとHTML5の違いを説明します。ちなみにこの記事はSEO実験も兼ねています。
ついでにこっちも読んでなければどーぞ
↓↓↓
エンジニアで稼ぐために大切な13のコト
HTMLの仕様を決めているW3C
バージョンって何?でもちょろっと説明しましたが、HTMLにもバージョンというものがあり、バージョンによって書き方や使えるタグなどの仕様が違っています。このHTMLの仕様を決めているのはW3C(ダブリュスリーシー)です。
W3cはWorld Wide Web Consortiumの略で、World Wide Webで使用される各種技術の標準化を推進する為に設立された標準化団体、非営利団体です。
3種類のHTMLバージョン
HTMLのバージョンには大きく3つあります。昔はバージョンによって対応していないブラウザもありましたが、最近のブラウザはどれも対応しています。
また、バージョンによって、書き方や使えるタグが違ってきます。
HTML4.01 ・・・ 一般的に使われているHTMLのバージョンXHTML1.0 ・・・ HTML 4.01から派生したもので、特徴も似ています。しかし、記述方法に関してはかなり厳密です。その代わり、要素(タグ)を拡張することができるのが最大の特徴です
HTML5 ・・・ 最新のHTMLバージョン。使えるタグがかなり増え、書き方もシンプルになりました。ただブラウザによてまだ一部の機能が使えないものがあります。
Doctype宣言の違い
バージョンによってまずDoctypeの宣言の書き方が違ってきます。Doctype宣言は下記のように<html>の先頭で「このHTMLはこのバージョンで書いてありますよ〜」と機械に伝える(宣言)するためのものになります。
詳しくはこちらのサイトなどを見て下さい。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>
<body>
</body>
</html>
HTML4.01
HTML4.01では、下記3つのうちどれかのDoctype宣言を書く必要があります。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML1.0
下記3つのうちどれかのDoctype宣言を書く必要があります。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
HTML5
HTML5ではDoctype宣言はとてもシンプルになりました。<!DOCTYPE html>
html要素と文字のエンコーディング
HTML4.01
HTML4.01では、下記3つのうちどれかのDoctype宣言を書く必要があります。<html lang="ja">
<head>
<meta charset="UTF-8">
XHTML1.0
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
HTML5
HTML5ではDoctype宣言はとてもシンプルになりました。<html lang="ja">
<head>
<meta charset="utf-8">
リンクタイプ
HTML4.01
<link rel="stylesheet" type="text/css" href="style.css" />
XHTML1.0
<link rel="stylesheet" type="text/css" href="style.css" />
HTML5
HTML5ではtype属性を省略できるようになりました。<link rel="stylesheet" href="style.css" />
バージョンはどれを使えばいいの?
HTML5の基本的な機能はIE9以降から対応しているので、「IE9以降のブラウザで同じような見た目になればいい」といった現場であればHTML5を使いましょう。(IE8以下へも「JavaScript」を用いれば対応は可能です。)