web構築準備（HTML）

2023.06.05

2024年版のHTMLテンプレート

<!doctype html>
<html class="no-js" lang="" prefix="og:http://ogp.me/ns# fb:http://ogp.me/ns/fb# website:http://ogp.me/ns/website#">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <link rel="stylesheet" href="css/style.css">
  <meta name="description" content="">

  <meta property="og:title" content="">
  <meta property="og:type" content="">
  <meta property="og:url" content="">
  <meta property="og:image" content="">
  <meta property="og:image:alt" content="">

  <link rel="icon" href="/favicon.ico" sizes="any">
  <link rel="icon" href="/icon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="icon.png">

  <link rel="manifest" href="site.webmanifest">
  <meta name="theme-color" content="#fafafa">
</head>

<body>

  <!-- Add your site or application content here -->
  <p>Hello world! This is HTML5 Boilerplate.</p>
  <script src="js/app.js"></script>

</body>

</html>
2024年版最近の実装に合わせた、HTMLでWebページを実装するための必要最小限をまとめたテンプレート一式
...
coliss.com

HTMLファイル基本型

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>###</title>
  <meta name="description" content="###">
  <link rel="stylesheet" href="###.css">
</head>

<body>
  <header>
    <!-- ヘッダ領域 -->
  </header>

  <main>
    <!-- メインコンテンツ -->
  </main>

  <footer>
    <!-- フッター領域 -->
  </footer>
</body>

</html>

TwitterOGP

OGP（Open Graph Protocol）の使用を宣言するために、まずhtml要素（またはhead要素）にprefix属性を指定する。
prefix属性とは「これからOGPを設定します」という宣言文のようなものである。

<!-- TOPページの場合 -->
<html lang="ja" prefix="og:http://ogp.me/ns# fb:http://ogp.me/ns/fb# website:http://ogp.me/ns/website#">

<!-- TOPページ以外の場合 -->
<html lang="ja" prefix="og:http://ogp.me/ns# fb:http://ogp.me/ns/fb# article:http://ogp.me/ns/article#">

<meta property="og:url" content="https://sample.com">
<meta property="og:title" content="###">
<meta property="og:description" content="###">
<meta property="og:image" content="https://###.png">
<meta property="og:type" content="website">
<meta property="og:locale" content="ja_JP">
<meta property="og:site_name" content="###">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@###">
inserted by FC2 system