Team-SKY30 サイトのPVを増やそう計画

HTML5で「head」が驚くほどスッキリ!

公開日:

近頃は、HTML5+css3で制作することが増えてきましたね。

少し昔話になりますが、私、児島は2004年ごろからWebサイトの制作を行ってきました。
当時は、もちろん「HTML5+css3」は存在せず
「スタイルシート?何それ、おいしいの?」
って言ってた時代です。

そんなわけで、昔に作ったサイトは旧バージョンのHTMLに準拠しているものばかりでした。

ところが、時代の流れとともにマルチスクリーンへの対応が必要になり、ここ何年か運営サイトを「HTML5」へ移行するという作業を、人差し指が疲労骨折しそうなぐらいひたすら繰り返してきたように思います。

このページの目次

HTML5

HTML5に移行した理由

さて、苦労話はこれぐらいにして・・・
実は私が、旧バージョンのHTMLを「HTML5」へわざわざ移行したのには、レスポンシブWebデザインの実現以外にも理由がありました。

それは!
「ソースがかなり省略できるから!」

HTML5では、ドキュメント宣言と「head」内の主な記述をかなり省略して記述することができるようになった!
ソースコード軽量化至上主義の私には、これがたまらない魅力でした 笑
まるで部屋を掃除したときのようにスッキリ気分よ~くなります。

これに共感していただけるかは微妙ですが、「head」内を、スッキリ最適化しておくことは、SEO的にも重要なことです。是非やってみてほしいと思います。

というわけで、下に「HTML5」のドキュメント宣言から、「head」までの最適化をまとめてみた!
※「HTML 4.01 Transitional」から「HTML5」への移行という流れで解説します。

①ドキュメント宣言

まずはドキュメント宣言。HTML5ではドキュメント宣言を次のように大幅に短縮できます。

従来

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

HTML5

<!DOCTYPE html>

これだけでもかなりスッキリ!

②「html」タグ要素のlang属性

「HTML 4.01」等で使用できていた「ja-JP」の言語要素が有効ではなくなりました。
従来のlang属性、HTML5では×

<html lang="ja-JP">

HTML5ではこう書く

<html lang="ja">

③METAの 「charset」

HTML5ではcharset属性を次のように簡略できます。

従来

<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

HTML5

<META charset="Shift_JIS">

④METAの「HTTP-EQUIV」

HTML5では基準となるスタイルやスクリプト言語を指定する必要がなくなりました。
因みにHTTP-EQUIV の属性値として「Content-Style-Type」や「Content-Script-Type」は使用
できません。

次のような記述はHTML5では不要

<META http-equiv="Content-Style-Type" content="text/css">
<META http-equiv="Content-Script-Type" content="text/javascript">

⑤linkの「type」属性

HTML5ではlinkのタイプを指定する必要がなくなりました。

従来

<link href="style.css" rel="stylesheet" type="text/css">

HTML5では省略

<link href="style.css" rel="stylesheet">

続けて書いてみると!

それでは続けて書いてみましょう!

HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html lang="ja-JP">
<head>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>HTML5で「head」が驚くほどスッキリ!</title>
<META http-equiv="Content-Style-Type" content="text/css">
<META http-equiv="Content-Script-Type" content="text/javascript">
<link href="style.css" rel="stylesheet" type="text/css">
</head>

HTML5

<!DOCTYPE html>
<html lang="ja">
<head>
<META charset="Shift_JIS">
<title>HTML5で「head」が驚くほどスッキリ!</title>
<link href="style.css" rel="stylesheet">
</head>

もうこれを見ていただければ何も書く必要はないかと!


タグ


執筆者


新着記事

2017.12.04 Mon

収益性が40%向上したアクティブビュー改善の施策!


2017.12.04 Mon

アクティブビュー率向上施策 ゲーム攻略サイトはアクティブビュー率との相性がめちゃ悪い!


2017.11.28 Tue

AdSense広告の視認率を高めると収益性が向上する?


2017.11.14 Tue

【Team-SKY30の取り組み】アクティブビュー(視認率)向上の施策


2017.02.20 Mon

【告知】宮崎智之氏をゲスト講師にお招きして「第15回ゲームライターコミュニティセミナー」を開催します


2016.09.20 Tue

グローバル(多言語)サイトのURLってサブドメイン?サブディレクトリ?


2016.07.09 Sat

wordpressでループの途中に簡単に広告を入れる方法


2016.07.09 Sat

【旬?】最近やっているモバイル対策


2016.05.05 Thu

1か月PVアップトライアル!結果報告


2016.04.23 Sat

1か月PVアップトライアル!2016年4月13~20日の施策




にほんブログ村 ブログブログ ブログアクセスアップへ