HTMLの雛形のチェックをお願いしたいです。

HTML
1<!doctype html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6  <meta name="viewport" content="width=device-width,initial-scale=1">
7  <title>HTML</title>
8  <meta name="description">
9  <meta name="keywords"> 
10  <!--[if lt IE 9]>
11  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
12  <link rel="stylesheet" href="css/ normalize.css ">
13  <link rel="stylesheet" href="css/stylesheet.css">
14  <!-- 作者名 -->
15  <meta name="author" content="makoto-h">
16</head>	
17
18<body>
19  <header role="banner">
20    <h1>タイトル</h1>
21  </header>
22  <nav role="navigation">
23    <ul>
24      <li><a href="#">メニュー</a></li><li><a href="#">メニュー</a></li>
25    </ul>
26  </nav>
27  <main role="main">
28
29  </main>
30  <footer role="contentinfo">
31    <h6>&copy;2015&nbsp;makoto-h</h6>
32  </footer>
33</body>
34</html>

規約を作っています。
こういうのは初めて作成したのでおかしい部分もあると思います。
チェックをお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

chrome=1 はもう要らないです。Googleがこのプラグインの開発をやめてしまったので(；´Д｀)

<meta name="description"> <meta name="keywords">

フォーマットにするなら

HTML
1<meta name="description" content="">
2<meta name="keywords" content="">

にしておいた方が間違いないと思います。

<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <link rel="stylesheet" href="css/ normalize.css "> <link rel="stylesheet" href="css/stylesheet.css">

読み込み順はCSSが先、JSが後のほうが良いです。
あとIE8以下向けの条件コメントの閉じタグがありません。

<footer role="contentinfo"> <h6>©2015 makoto-h</h6> </footer>

コピーライト表記が<h6>というのは不適切と思います。コピーライト表記は何かのコンテンツの見出しじゃないですよね？
一般的には

HTML
1<footer>
2  <p><small>コピーライト表記</small></p>
3</footer>

のようにすることが多いと思います。（※コピーライト表記のみしかない<footer>の場合、わざわざ<p>でマークアップする必要は無いという意見もあります。）

【その他】
viewportの下あたりに念のためこちらのメタタグを入れておいたほうがいいと思います。
（iOSの自動電話番号認識機能をオフにする）

HTML
1<meta name="format-detection" content="telephone=no">

投稿2015/09/16 04:49

aKusano

総合スコア3763

makoto-n

2015/09/16 05:23

> Googleがこのプラグインの開発をやめてしまったので(；´Д｀) ww(^^;) > <meta name="description" content=""> > <meta name="keywords" content=""> content忘れていました(汗 > あとIE8以下向けの条件コメントの閉じタグがありません。すみません、それは何でしょうか？

aKusano

2015/09/16 05:38

←コレです。

makoto-n

2015/09/16 05:41

了解しました。ありがとうございます。

makoto-n

2015/09/16 06:11

これをローカルで開くと文字化けするのですがなんででしょうか？

kaputaros

2015/09/16 06:12

横から失礼します。 > <!--[if lt IE 9]> > <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> > <link rel="stylesheet" href="css/ normalize.css "> > <link rel="stylesheet" href="css/stylesheet.css"> > 読み込み順はCSSが先、JSが後のほうが良いです。このjsの場合、HTML5を使えるようにするJSなので、CSSより前に記述して読み込んでやる必要があるようです。参考⇒http://www.xml.vc/HTML5/kiso/ie-script.html

aKusano

2015/09/16 06:23

> makoto-nさんブラウザの文字コード変更機能で直るなら、HTML上の文字コード指定とファイルの実際の文字コードが違うということが考えられます。 >kaputarosさんおや？もうかれこれ何年もheadの最後に条件コメント読み込ませてやってますが、それで表示が崩れたことはないですけどね・・・？

makoto-n

2015/09/16 06:25

文字化けは直りました。ファイル保存が勝手にShift-JISになっていただけでした。

kaputaros

2015/09/16 06:30

> aKusanoさんそうなんですね！実際使ったことがなかったのと、ちょっとこういうことを書いているサイトを見つけたもので。。。大変失礼しました。

aKusano

2015/09/16 06:32

>kaputarosさんいえいえ、仕様と実装が違うなんてことはよくある話ですからｗ

makoto-n

2015/09/16 07:57

<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="format-detection" content="telephone=no"> <title>HTML</title> <meta name="description" content=""> <meta name="keywords" content=""> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/stylesheet.css">  <meta name="author" content="makoto"> </head> <body> <header role="banner"> <h1>タイトル</h1> </header> <nav role="navigation"> <ul> <li><a href="#">メニュー</a></li><li><a href="#">メニュー</a></li> </ul> </nav> <main role="main"> </main> <footer role="contentinfo"> <p>©2015 makoto</p> </footer> </body> </html> これを雛形に問題ないですか？

aKusano

2015/09/16 08:27

コピーライトのところはHTML5だと <p><small>©2015 makoto</small></p> みたいな感じで<small>でマークアップするのがセオリーですね。あと「©2015 著作権保有者名 All Rights Reserved.」って書くことが多いですけど別に「All Rights Reserved.」に意味はないんですかね？（この辺の法的なことは詳しくないので別途調べてください。）

makoto-n

2015/09/16 09:36

<small>ですね。知りませんでした…。 AllRightは必要ないと思っています。慣習化しているのかと。「https://ja.wikipedia.org/wiki/%E8%91%97%E4%BD%9C%E6%A8%A9%E8%A1%A8%E7%A4%BA#All_rights_reserved」 wikiを信用するのは不注意とは知っていますが。

makoto-n

2015/10/03 18:33 編集

<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="format-detection" content="telephone=no"> <title>HTML</title> <meta name="description" content=""> <meta name="keywords" content=""> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/stylesheet.css">  <meta name="author" content="makoto"> </head> <body> <header role="banner"> <h1>タイトル</h1> </header> <nav role="navigation"> <ul> <li><a href="#">メニュー</a></li><li><a href="#">メニュー</a></li> </ul> </nav> <main role="main"> </main> <footer role="contentinfo"> <p><small>©2015 makoto</small></p> </footer> </body> </html>

行動規範の内容に同意します