HTML5

Html5のコード

{
  "name": "サイト名",
  "short_name": "短縮サイト名",
  "icons": [
    {
      "src": "/img/icons/android-chrome-36x36.png",
      "sizes": "36x36",
      "type": "image/png"
    },
    {
      "src": "/img/icons/android-chrome-48x48.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "/img/icons/android-chrome-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "/img/icons/android-chrome-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "/img/icons/android-chrome-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "/img/icons/android-chrome-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "/img/icons/android-chrome-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "/img/icons/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/img/icons/android-chrome-256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    },
    {
      "src": "/img/icons/android-chrome-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "/img/icons/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "./index.html",
  "display": "standalone",
  "background_color": "#000000",
  "theme_color": "#FFF"
}

HTML5 PWA向けmanifest.jsonのテンプレート C0d3man52

<?xml version="1.0" encoding="UTF-8"?><urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<urlset>
  <url>
    <loc>URL</loc>
    <lastmod>YYYY-MM-DDD</lastmod>
    <changefreq>daily</changefreq>
  </url>
</urlset>

HTML5 サイトマップの基本フォーマット C0d3man52

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>記事ページのHTML5テンプレート</title>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
    <!--[if lt IE 9]>
    <script src="//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <link rel="shortcut icon" href="">
  </head>
  <body>
    <header>
      <p><a href="">サイト名</a></p>
      <nav>
        <ul>
          <li><a href="#">メニュー</a></li>
          <li><a href="#">メニュー</a></li>
          <li><a href="#">メニュー</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <article class="">
        <header>
          <h1>記事タイトル</h1>
          <p>説明文です。説明文です。説明文です。説明文です。</p>
        </header>
        <section>
          <p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</p>
          <p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</p>
          <p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</p>
        </section>
      </article>
    </main>
    <aside class="">
      <section>
        <h2>新着コンテンツ</h2>
        <ul>
          <li><a href="#">新着記事1</a></li>
          <li><a href="#">新着記事2</a></li>
          <li><a href="#">新着記事3</a></li>
        </ul>
      </section>
      <section>
        <h2>人気コンテンツ</h2>
        <ul>
          <li><a href="#">人気記事1</a></li>
          <li><a href="#">人気記事2</a></li>
          <li><a href="#">人気記事3</a></li>
        </ul>
      </section>
    </aside>
    <footer>
      <p>(C) 2019 サイト名.</p>
    </footer>
  </body>
</html>

HTML5 記事ページのHTML5テンプレート C0d3man52

Html5のコード

Html5に関するノート