HTML 5.2
HTML（エイチティーエムエル）は HyperText Markup Language の略で、Web 表示のベースとして用いられるマークアップ言語です。WHATWG が仕様を策定し W3C にて勧告されます。拡張子は .html ですが古いサイトでは .htm が使われている場合もあります。
近年は生の HTML を Web 制作で書くことは少なくなりました。Pug からコンパイルしたり、Framework や CMS を用いてレンダリングするのが主流です。直書きまたは Vue・PHP ファイル内で HTML を書く場合は短縮記法の Emmet を使います。
Example
HTML は入れ子構造でタグを書いていく記法です。すべてのタグが < から始まり > で完結、閉じタグが必要なものと単一のタグで成り立つ 2 種類に分かれます。改行やインデントはブラウザ表示に影響しませんが、メンテナンスを考慮し規則正しく書くのが作法。最低限、以下のタグは必要です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトルをここに書きます</title>
</head>
<body>
ブラウザで表示される内容をここに書きます
</body>
</html>
Default Document
index.html というファイル名のみ URL から省略できます。たとえば、https://example.com/index.html に対して https://example.com や https://example.com/ でアクセスが可能。index.html という名称の HTML ファイルはデフォルトドキュメントとして認識されるルールがあります。
Comment
コメントは <!-- で始まり --> で閉じます。共同制作者に納品する際、コメントでコンテンツの始点と終点を記載すれば確認が容易になります。
<!-- + Demo Content -->
<div class="demo-content">
<p>DEMO CONTENT</p>
</div>
<!-- - Demo Content -->
Escape
HTML 内の文章に以下の文字が含まれている場合、タグと解釈されないようエスケープします。よくあるのが、Web に「HTML の書き方」を載せる場合です。
| & | < | > | " | ' | 空白 |
|---|---|---|---|---|---|
& | < | > | " | ' | |
DOCTYPE
HTML ファイルの最初には <!DOCTYPE html> を書きます。宣言しない場合に HTML としてレンダリングしない旧ブラウザが残っているからです。古いサイトにはさらに長いタグが存在しますが現在は不要です。
<!DOCTYPE html>
Base Element
<html> 〜 </html> で HTML 要素を表します。lang 属性を付与することで言語を指定でき、lang="ja" であれば日本語、lang="en" とすれば英語サイトであることをブラウザに示せます。
<head> 〜 </head> は文書のヘッダー情報を表します。主にサイトのタイトルやメタ情報を記述する他、ページレンダリング時に読み込む CSS ファイルへのリンクなどを書き込みます。
<body> 〜 </body> はブラウザに表示される実際のコンテンツを表します。
<html lang="ja">
<head>
<!-- headの中身をここに書きます -->
</head>
<body>
<!-- bodyの中身をここに書きます -->
</body>
</html>
Meta Data
charset
<meta charset="UTF-8"> を <head> 直下の最初に書きます。charset は文字コードを表し、特別な理由がない限りは UTF-8 に設定。世界の 90%以上のサイトが UTF-8 で書かれており、HTML の仕様を策定している WHATWG によって 指定もされているからです。
UTF-8 では絵文字やコピーライトなどをエスケープさせずに書くことができます。日本で多く使われていた Shift-JIS には「2 バイト文字データの軽量化・ガラケー表示ができる」というメリットがありました。
<meta charset="UTF-8">
title
<title> ～ </title> にページのタイトルを書きます。ブラウザのタブ・ブックマーク・Google の検索結果タイトルなど多くの場所に影響します。
<title>ページのタイトル</title>
description
<meta name="description" content="XXX"> でページのディスクリプションを書きます。ここに書いた内容は Google の検索結果などにも用いられ、およそ 140 文字程度が表示されています。
<meta name="description" content="ここにページのディスクリプションを書きます">
viewport
<meta name="viewport" content="XXX"> は表示領域を表します。content にベースの設定とデバイス固有の設定をカンマ区切りで複数書きます。
レスポンシブサイトでは、デバイスに応じた拡大縮小されていない状態で表示させるために width=device-width, initial-scale=1 を設定します。古い PC 専用サイトでは width=1024 とピクセルで最低幅を指定して、それ以下のウィンドウサイズでは横スクロールを発生させていました。その他よく使う値は以下。
shrink-to-fit=no：iOS Safari / 初期表示の要素縮小を制限しガタつく処理を防ぐviewport-fit=cover：iPhone X / ノッチ等に被らないよう制限された表示を最大化
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover">
format detection
<meta name="format-detection" content="XXX"> は自動フォーマットを制御します。主に、電話番号・メールアドレスと判別されたテキストが自動的にリンク化する処理を防ぐ用途で使います。
<meta name="format-detection" content="telephone=no, email=no, address=no">
open graph
Facebook や Twitter などのサービスでページを共有した際に表示される内容をメタタグで設定できます。共用設定に加えて Twitter 専用のプロパティを設定。Share の表示確認やキャッシュの更新は各サービスのデバックツールで行えます。
| property | content |
|---|---|
| og:title | ページタイトル |
| og:description | ディスクリプション |
| og:url | ページの URL |
| og:image | 表示させたい画像の絶対パス（推奨画像サイズは 1200 x 630px） |
| og:site_name | サイト名 |
| og:type | サイトトップは website, 下層やブログ記事は article |
| twitter:card | Twitter 大カードは summary_large_image, 小カードは summary |
| twitter:creator | Twitter アカウント（任意） |
<meta property="og:title" content="ページタイトル">
<meta property="og:description" content="ディスクリプション">
<meta property="og:url" content="https://example.com/index.html">
<meta property="og:image" content="https://example.com/img/ogp.png">
<meta property="og:site_name" content="サイト名">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:creator" content="@XXX">
theme color
<meta name="theme-color" content="#XXX"> はブラウザ UI にテーマカラーを渡します。Android 5 以降の Chrome でアドレスバーの色が変化。
<meta name="theme-color" content="#51af66">
apple mobile web app
専用のメタタグを入れることで、iOS Safari の「ホーム画面に追加」を行った Web をフルスクリーンアプリケーションのような UI で立ち上げることができます。ただ、この仕様は iOS のバージョンによって変更が多いため注意しましょう。
| property | content |
|---|---|
| apple-mobile-web-app-capable | yes でモードをオン |
| apple-mobile-web-app-status-bar-style | ステータスバーの変化 / default or black or black-translucent |
| apple-mobile-web-app-title | ホーム画面追加時の初期タイトル |
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="タイトル">
IE compatible
残念なことですが、企業には IE8 や IE9 での閲覧を強制している独自システムがあり、IE には古い IE の互換モードでブラウジングできる機能が備わっています。つまり、IE11 を使いながら IE8 表示になっている社員がいるということです。
このような方が Web 制作のクライアントになった場合、多くの CSS が崩れている状態で見られ不毛なやりとりが続きます。そこで、以下のコードを head 内に書き込み IE を強制的に最新表示させます。
<meta http-equiv="x-ua-compatible" content="ie=edge">
Style
<style> ～ </style> は HTML に CSS を直接書く場合に使用します。基本的に <head> 内で使用。外部スタイルシートと異なり http リクエスト無しに CSS を使えるため、Nuxt などでは必要なコンポーネントの CSS を <style> で出力する手法が取られます。
<style> には type 属性で MIME タイプを指定し、media 属性で反映させたいメディアを指定できます。古いサイトには type="text/css" が見られますが、現在は初期値となっているため省略できます。
| media | detail |
|---|---|
| all | すべて（初期値） |
| screen | ディスプレイ表示全般 |
| 印刷する場合の表示 |
<style>
.home {
background-color: #fff;
}
</style>
<style media="screen and (min-width: 768px)">
.home {
background-color: #fafafa;
}
</style>
<style>
@media (min-width: 1024px) {
.home {
background-color: #fcfcfc;
}
}
</style>
Link
<link> は外部リソースを読み込む場合などに使用します。基本的に <head> 内で使用。リンクタイプを表す rel 属性と、ハイパーリンクを書く href 属性が必須です。
stylesheet
スタイルシートを読み込む場合は rel 属性を stylesheet とし href 属性にパスを書きます。style タグと同じく media 属性で反映させたいメディアを指定することもできます。
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:700">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/over-tablet.css" media="screen and (min-width: 768px)">
alternate stylesheet
rel 属性を alternate stylesheet とすることで、デフォルトでは読み込まれない代替スタイルシートを用意できます。ユーザー側で認識しやすくさせるために title 属性で用途を表記しましょう。※対応状況や切り替えの UI はブラウザに依存
<link rel="stylesheet" href="css/style.css" title="デフォルトスタイル">
<link rel="alternate stylesheet" href="css/high-contrast.css" title="コントラスト強め">
icon
ファビコンの設定は rel 属性 icon で設定します。以前よく使われていた shortcut は非準拠となったため無視されます。ほとんどのブラウザには root の favicon.ico をデフォルトで読み込む設定があるため、設置している場合、このリンク設定は不要です。
ブラウザや解像度によって必要な画像サイズが異なり面倒ですが、多くの場合は 152 x 152px の PNG 画像を 1 つ用意しておけば大概のモダンブラウザで問題なく表示できます。
<link rel="icon" href="img/favicon.png">
apple touch icon
iOS Safari でホーム画面に追加する場合は rel 属性 apple-touch-icon の画像が使用されます。512 x 512px の PNG 画像を用意すればほとんどの場合対応できます。
<link rel="apple-touch-icon" href="img/apple-touch-icon.png">
canonical
canonical は、そのページの URL を正規化を行います。パラメーター付きなどで複数の URL が存在してしまった場合に一本化できるので、検索エンジンに対しては重複コンテンツの防止、SNS にシェアする場合には URL の分散を防くことが可能です。
<link rel="canonical" href="https://example.com">
JaveScript
script
<script> 〜 </script> は主に外部 JavaScript の読み込みや直に書く場合で使用します。ページのレンダリング前に完了する必要がある JavaScript は <head> 内に書き、そうでないものは </body> の手前に書くことで表示速度の向上を図ります。
また、書く場所にかかわらず、defer 属性・async 属性を付与し読み込むタイミングを調整できます。defer 属性は必ずページのレンダリング前に実行できますが、それまでページのレンダリングはブロックされます。
async 属性は非同期に実行できページの表示速度に貢献できますが、実行タイミングが予測できません。jQuery プラグインなどの実行順序が決まっているスクリプトを使っている場合は注意が必要です。
| attribute | detail |
|---|---|
| defer | ページのレンダリング前に読み込み・実行 |
| async | 非同期に読み込み・実行 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="/js/app.js"></script>
<script src="/js/loading.js" defer></script>
<script src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXX-XX" async></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments)};
gtag('js', new Date());
gtag('config', 'UA-XXXXXXXX-XX');
</script>
noscript
<noscript> 〜 </noscript> は JavaScript を動作させないようにしている場合に表示させる要素です。
<noscript>ご利用中のブラウザーでは、JavaScriptが無効になっています。サイトをご利用の際はブラウザー設定でJavaScriptを有効にしてご利用ください。</noscript>
Grouping
div
HTML には機能を持たずグルーピングする目的で使うタグが多く存在し、<div> 〜 </div> はその中でもっとも汎用的なタグです。class 等を付与し CSS で装飾する目的で使います。
<div> と機能を持つタグだけ HTML は成立しますが、よりセマンティックな（ブラウザや検索エンジンが意味を読み取れる）マークアップを心がけて後述するグルーピングタグを使い分けましょう。
<div class="decoration">
装飾したい場所
</div>
semantic
グルーピングに意味を持たせる場合は以下のようなタグを使います。
| tag | detail |
|---|---|
<header> 〜 </header> | コンテンツの導入箇所として見出しやナビゲーションをまとめる |
<footer> 〜 </footer> | コンテンツの関連情報へのリンクやコピーライトをまとめる |
<nav> 〜 </nav> | ナビゲーション |
<main> 〜 </main> | ページ内のメインコンテンツエリア（ページ内に 1 つのみ） |
<aside> 〜 </aside> | サイドバーなどメインコンテンツの関連項目 |
<article> 〜 </article> | 記事等の自己完結型ブロック（個別に<header> <section> <footer> を持てる） |
<section> 〜 </section> | ページ内の 1 つのセクションを表す（汎用的な利用が可能） |
<header>
<h1>Site Home</h1>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>
</nav>
</header>
<main>
<section class="section-first">
<article>
<header class="article-header">
<h2>Article Header</h2>
</header>
<section class="article-contents">
<p>Article Contents</p>
</section>
<footer class="article-footer">
<p>Article Footer</p>
</footer>
</article>
</section>
<section class="section-second">
<p>Second Contents</p>
</section>
</main>
<aside>
<h3>Sidebar</h3>
<p>Sidebar Contents</p>
</aside>
<footer>
<p>©️ 2018 XXX</p>
</footer>
Heading
<h1> 〜 </h1> から <h6> 〜 </h6> はページの見出しを表す要素として使います。<h1> がもっとも高位であり、検索エンジンにもその順序に沿って読まれます。
<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>
Anchor
unfinished
Download
download 属性を付与すれば、リンク先のファイルをダウンロードさせるよう指定できます。主にブラウザ上でプレビューされてしまう PDF を即ダウンロードさせたい場合に使います。
<a href="/dist/hearing-sheet.pdf" download="hearing-sheet.pdf">ダウンロード</a>
Text
unfinished
List
unfinished
Ordered list
<ol> タグは順序のあるリストを表示できます。ブラウザデフォルトのリストマーカーを使用する場合は、CSS の list-style-type プロパティ・start 属性・ reversed 属性で表示を調整可能です。type 属性は HTML5 で廃止されました。
<ol start="10" reversed>
<li>ぺんちゃん</li>
<li>ぺん太</li>
<li>ぺんぺん</li>
</ol>
Table
unfinished
Form
unfinished
Media
unfinished
Blockquote
unfinished
Preformat
unfinished
Touch Action
iPhone などのタッチデバイスではタップすると CSS の :hover 状態に切り替わり、他をタッチするまで戻りません。これは多くの場合意図通りの動作とは言えないため、ontouchstart 属性と :active の CSS を書くことで調整します。
ontouchstart を付与した要素〜子要素は、タッチしている時に :active の CSS が適応されるようになります。<body> に ontouchstart を付与することで、全体にタッチアクションを設定できます。
<body ontouchstart>
<main>
<button>押してる時だけ光るボタン</button>
</main>
</body>
Robots
head 内に <meta name="robots" content="XXX"> を書き込むことで検索エンジンのクローラー（robots）に対して指示を出します。ページを検索対象にしたくない場合は、除外する noindex とリンクを辿らない nofollow を設定するのが一般的です。
<meta name="robots" content="noindex, nofollow">
Redirect
URL を変更した場合はサーバーや CMS の設定で 301 リダイレクトを行う方法が Google にも推奨されていますが、GitHub Pages などではサーバー側で設定を行うことはできません。
そういった場合は、リダイレクトを実行する <meta http-equiv="refresh" content="秒数; URL=新しいサイトのURL"> と重複コンテンツの正規化を行う <link rel="canonical" href="新しいサイトのURL"> を書き込み対応します。
<meta http-equiv="refresh" content="0; URL=https://example.com">
<link rel="canonical" href="https://example.com">