3. HTML5の基本的な書き方をまとめてみました

HTML5の基本的な書き方をまとめてみました

HTML5の基本的な書き方をまとめてみました

検索しつつ、なんとなくできてしまうHTML5のコーディングですが、
少しでも理解できるように、HTMLの基本的なコトも含め、HTML5を調べてみました。

今更感ありますが、
詳細を調べれば奥が深くて、知らないタグとかあったのですが、凡そ普段使うものだけピックアップしてみました。 決して不要という訳ではないのですが..

DOCTYPE宣言

文書がHTML5で作成されたものであることを宣言する。
その文書内では、ルールを守ってソースを記述しなくてはならない。
「省略可能」とか「あまり意味を持たない」といわれているけど、書いておきましょう。

<!DOCTYPE html>

html

言語の宣言

日本語の場合

<html lang="ja">

title

SEO対策で重要だといわれています。
適切な文章、文字数をいれましょう。
全角30文字前後がいいようです。

<title>○○○</title>

meta

文字コードの宣言

<meta charset="utf-8">

ページのキーワード

検索エンジンの結果にも影響します。

<meta name="keywords" content="○○○,○○○,○○○">

ページの概要や説明

検索エンジンの結果にも影響します。

<meta name="description" content="○○○">

制作者情報の指定

検索エンジンの結果にも影響します。

<meta name="author" content="○○○">

著作権情報の指定

検索エンジンの結果にも影響します。

<meta name="copyright" content="○○○">

検索エンジンのクローラーの制御

検索結果に表示させないようにし、 リンクを辿ることを拒否すること。

<meta name="robots" content="noindex,nofollow">

link

cssの指定

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

アイコン指定

<link rel="shortcut icon" href="favicon.ico">

RSSフィード指定

<link rel="alternate" type="application/rss+xml" title="RSS" href="feed/">

canonical

複数の類似した内容のページの中で優先されるページを指定できる。
サイトの規模が大きかったり、ECサイトなどの場合に指定するのが最適かと。

<link rel="canonical" href="http://" >
参考サイト

script

javascriptの指定

<script src="js.js"></script>

HTML5未対応の処理（IE8以下）

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

サンプル

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>title</title>
<meta name="keywords" content="○○○,○○○,○○○" />
<meta name="description" content="○○○" />
<meta name="author" content="○○○" />
<meta name="copyright" content="○○○">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/script.js"></script>
</head>
<body>
<!-- Container -->
<div id="container"> 
  <!-- Header -->
  <header id="header">
    <h1>サイトタイトル</h1>
    <nav id="nav">
      <ul>
        <li><a href="#">nav1</a></li>
        <li><a href="#">nav2</a></li>
      </ul>
    </nav>
  </header>
  <!-- //Header -->
  
  <hr />
  <!-- Contents -->
  <div id="contents" class="clearfix">
    <div id="main">
      <article>
      </article>
    </div>
    <aside id="side">
    </aside>
  </div>
  <!-- //Contents -->
  <hr />
  
  <!-- footer -->
  <footer id="footer">
    <p class="copyright"> <small>copyright © alien-house.com All Rights Reserved. </small> </p>
  </footer>
  <!-- //footer --> 
  
</div>
<!-- //Container -->
</body>
</html>

変更OKそうだったので、 necolas/normalize.css · GitHubのnormalize.cssを少し追加してスタイルシート記述しました。 サンプルをみる

ダウンロード

今回のhtmlとcssのデータのダウンロード用意しました。

ライセンス

ご使用について
商用利用・個人利用（営利・非営利）ともに、フリーでご使用いただけます。
免責事項
データのダウンロード・ご使用によって生じた不利益・損害やいかなる問題について、一切責任を負いません。
禁止事項
二次配布（再配布）、素材の転売など。
参考サイト

Related Posts