HTML5のひな形

自分用ですが、サイトを作るときいちいちヘッダを探すのが面倒なのでメモ。
下のはスマホ用HTML5に使うパターンです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="サイトの説明文">
<meta name="keywords" content="キー1,キー2,キー3">
<script src="js/jquery.js"></script>
<link rel="stylesheet" href="css/hoge.css">
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">
<title>サイト名</title>
</head>
<body>

<h1>サイト名</h1>

</body>
</html>

ちなみにAndroidディベロッパー向け公式サイトでは「ヘッダにこれ↓を入れてね」と言っているようです。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
<html lang="ja">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

Best Practices for Web Apps
http://developer.android.com/guide/webapps/best-practices.html

でもこれはHTML5用ではないです。

PC用ブラウザでHTML5はまだまだ対応が追いついていないので、「PC用とスマホ用はCSSで分けちゃえ」という場合、現時点ではHTML5は使わないほうがいいと思います。

でもスマホに特化している場合はHTML5の方がいいみたいです。
どっちみち端末依存は避けられないし、HTML5独特の動きのあるサイトの方がいいと思うので。
 

コメントを残す

メールアドレスが公開されることはありません。

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください