(私の)HTMLコーディングルール

使用すべきHTML5タグ

header

main

footer

nav

article

section

figure
「文書の本文から参照されるようなイラスト・図・写真・ソースコード」であることを示す際に使用

figcaption
・図表のキャプションを示す際に使用
・<figure>～</figure>の中へ配置する

使用しないHTML5タグ

aside
・あまり重要でない部分を示すセクション要素
・見出しを必要としない要素
→ 使用メリットを感じない

使用イメージ

<html>

  <body>

    <header>...</header>

    <nav>...</nav>

    <article>

      <section>

        <h1>コンテンツ内容見出し</h1>

        <p>コンテンツ内容1</p>

      </section>

      <section>

        <h1>コンテンツ内容見出し</h1>

        <p>コンテンツ内容2</p>

      </section>

      <section>

        <h1>コンテンツ内容見出し</h1>

        <figure>

          <img src="..." alt="...">

          <figurecaption>画像のキャプション</figurecaption>

        </figure>

      </section>

    </article>

    <footer>...</footer>

  </body>

</html>

その他

iframe

<?php

$refererUrl = parse_url($_SERVER["HTTP_REFERER"]);

if($refererUrl['host']!=$_SERVER['SERVER_NAME']){

  header('location: /');

  exit();

}

?>

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

  </head>

  <body>

  </body>

</html>

タグ内で属性を記述する順番

link

フォーム要素

submit属性

hタグ

「ページ固有の値」を指定する

「ページ共通の値」を指定しない
<footer>のh3タグ → 削除

favicon

favicon.ico
・必ず設置する(表示しなくても良い)
・console.logにおける404エラー回避が目的

サイズ
48×48

作成方法
P7検索結果ページに表示される「identicon.php?size=24」を「48」へ変更後、favicon.icoファイル名として保存

設置方法
・ドキュメントルート直下へ配置
・表示目的ではないため、「<link rel="icon" href="favicon.ico">」を記述しない(記述しても良い)
・<link>: 外部リソースへのリンク要素

Link
・favicon.ico と Webサイトの表示度速度について
・favicon.ico の問題

アフィリエイト

楽天アフィリエイト
deferを付与する
・async ／ defer

P41

トップページ

<body>

  <nav id="jquery-pop-menu"></nav>

  <nav class="switchin"></nav>

  <div><!-- 広告 --></div>

  <header>

    <h1></h1>

    <h2></h2>

  </header>

  <main>

    <div class="pager"></div>

    <article class="sorted_table">

      <section></section>

      <section></section>

    </article>

    <div class="pager"></div>

  </main>

  <section id="accessrank"></section>

  <div><!-- 広告 --></div>

  <footer></footer>

</body>

P46

<body>

  <header></header>

  <main>

    <article>

      <section>

        <!-- トピック -->

      </section>

    </article>

    <article>

      <section>

        <!-- レス -->

      </section>

    </article>

    <article>

      <section>

        <!-- レス -->

      </section>

    </article>

    <section><!-- ユーザーコメント表示 --></section>

    <section><!-- ユーザーコメント投稿 --></section>

    <section><!-- ゲストコメント表示 --></section>

    <section><!-- ゲストコメント投稿 --></section>

  </main>

  <footer></footer>

</body>

・HTML5タグ
・HTML タグ配置階層