HTML5 基本 - user000422/0 GitHub Wiki
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>sample-title</title>
<link rel="stylesheet" href="css/style.css">
</head>
</html><要素名 属性="値">○○○</要素名>
インデントはスペース2つ（タブは禁止）
HTML5で開始タグ終了タグを省略できる要素 … <html> <head> <body> <colgroup> <tbody>
HTML5.2でユーザが画面を拡大することを妨げることをしてはいけないと勧告されている
空要素（終了タグがない要素<br>など）のタグ終了直前に / は必要ない（あっても問題はない）
script
JavaScriptファイルは </body> 直前に指定すること
HTML内に直接JavaScriptを記述する場合はtype属性を省略可能
速度差 … 速 defer > async > デフォルト 遅
<body>
<script> xxx </script> <!-- type属性省略可 -->
<!-- 省略 -->
<script src="script.js"></script> <!-- Jsファイル読み込み body直前に指定 -->
<script src="async.js" async></script> <!-- async 非同期（HTML読み込み後実行）-->
<script src="defer.js" defer></script> <!-- defer 非同期（ページ全体解析完了後実行 今までのwindow.onloadイベント）-->
</body>meta … 他のメタデータ以外のメタデータ
「name属性」と「http-equiv属性」は「content属性」とセットで使用する必要がある
charset属性はtitle要素にも影響するのでtitle要素より前に記述しなければならない
<meta charset="utf-8"> <!-- 文字コード指定 -->
<meta http-equiv="refresh" content="3; url=index.jsp"> <!-- リダイレクト（3 秒後に index.jsp へ遷移） -->
<meta name="viewport" content="width=device-width"> <!-- デバイスの画面幅に合わせて表示領域を設定 -->
<meta name="viewport" content="user-scalable=no"> <!-- ズーム（拡大縮小）操作拒否 -->
<meta name="format-detection" content="telephone=no"> <!-- ブラウザ上の数字が勝手に電話番号として認識されるのを禁止 -->link
rel属性とhref属性は必須
クエリストリング … css更新の際に強制的にキャッシュを更新させるため( ? の後ろ自由 )
URL正規化 … SEO対策
Webページリンク（ホーム画面アイコン） … OSに関係なくapple-touch-iconもしくは下記参照
<link rel="stylesheet" href="css/style.css?ver=1.00"> <!-- クエリストリング -->
<link rel="canonical" href="https://www.○○○.○○/" /> <!-- URL正規化（必ずフルパスで記述） -->
<!-- Webページリンク（ホーム画面アイコン） -->
<link rel="apple-touch-icon" href="パス/ファイル名"> <!-- 端末によるデザイン補正受容 -->
<link rel="apple-touch-icon-precomposed" href="パス/ファイル名"> <!-- 端末によるデザイン補正拒否 -->
<link rel="icon" href="img/favicon.png"> <!-- ブラウザのブックマークやタブに表示するアイコン -->
<!-- media属性でメディアクエリ指定 -->
<link rel="stylesheet" href="css/sample.css" media="screen and (max-width: 500px)">
<link rel="alternate" href="en.html" hreflang="en-US"> <!-- alternate 代替文書へのリンクなど -->title要素は1つのhtmlに1つしか指定してはいけない
title要素は必須ではない（HTML4.01までは必須）
main … メインコンテンツ（他ページで共有するコンテンツは入れないこと）
最も重要な文書コンテンツ（HTML5.2からページ内で複数使用可）
IE（最新バージョンも含む）に対応させるには <main role="main"> と記述する必要がある
time … 日時を意味する要素（IE使用不可）
time要素内には機会が識別可能な文字列を入れること
datetime属性を使うことで機械に正確な時間を伝えることもできる（必須ではない）
<time>2020-01-01</time>
<time>2020-01-01T23:59:59</time>
<time datetime="2019-01-01">1月</time>
<time datetime="23:59:59">24時前</time>トランスペアレント … その要素のコンテンツモデルが透過される（9種類）
<a> <ins> <del> <object> <audio> <video> <canvas> <map> <noscript>
セクショニングコンテンツ … <article> <section> <aside> <nav>
セクショニングコンテンツ要素と見出し要素はセットで使用することが推奨されている
セクショニングルート … <body> <blockquote> <fieldset> <figure> <td> <details>
<nav> <!-- nav要素 リンクを含むナビゲーション（複数使用は非推奨） -->
<ul>
<!-- 割愛 -->
</ul>
</nav>
<article> <!-- article要素 記事（新聞や雑誌の意）（一部分ではなく、記事の始終含める大枠）-->
<section> <!-- section要素 記事の一部分（他のセクショニングコンテンツ以外という意で使うのが良い） -->
<h2> 見出し2 </h2>
<!-- 記事内容 -->
</section>
</article>
<aside> <!-- aside要素 補足記事、補足内容、広告記事など -->
<!-- 内容割愛 -->
</aside>文章要素
<b> … HTML5以降は太字目的で使用してはいけない（太字はcssで対応すること）
<em>test</em> <!-- 強調文字 斜体 -->
<strong>test</strong> <!-- 重要文字 強調文字 （emより上位） -->
<mark>参照</mark><!-- ハイライトで目立たせるような箇所 ユーザの参照目的 -->
<b>ファミコン</b> <!-- キーワードや製品名（実用的な使い方 -->
<q site="akutagawa.html">道徳は常に古着である</q> <!-- q 引用文 site属性で引用元のURL -->
<i>No I'm cool</i> <!-- i 区別 多言語の慣用句 専門用語 -->
<u>test</u> <!-- u 中国語のテキストでの固有名詞 綴りミス -->
<address>xxx</address> <!-- 問い合わせ先情報（著作権情報や、現在問い合わせできないものは入れてはいけない） -->
<cite>夏目漱石「吾輩は猫である」</cite> <!-- 創作物の出典、出所をマークアップ -->
x<sup>2</sup> <!-- sup 上付き文字（べき乗など） -->
co<sub>2</sub> <!-- sub 下付き文字（化学式記号など） -->
<ins>税率10%</ins> <!-- 後から追加されたテキストを表す（下線が表示される） -->
<bdi>إليسا</bdi> <!-- 周囲に影響を及ぼさないように調節（アラビア語など） -->input
type属性 … 初期値は text
size属性 … 入力フィールド幅
form属性 … 関連付けさせたいform要素のid属性と同じ値にすることで関連付けする
IE11に対応していないtype属性の値 … date month week datetime-local time color
submitの扱いについて … 画面上で適当に「Enter」キーを押下されて困る処理をsubmitにしないこと
<input type="text"> <!-- 1行のテキスト入力フィールド -->
<input type="password"> <!-- パスワード用テキスト入力フィールド（入力したテキストは * で表示される） -->
<input type="checkbox" value="red"> <!-- チェックボックス（value属性に値が記述されている場合、値が送信される） -->
<input type="checkbox" checked> <!-- checked属性で選択済みに -->
<input type="radio" name="animal"> <!-- ラジオボタン（name属性の値が同じものでラジオグループ化） -->
<input type="radio" name="animal" value="lion"> <!-- value属性に値が記述されている場合、値が送信される、初期値は"on" -->
<input type="search" name="q"> <!-- 検索用テキスト入力フィールド（name属性に値がないと送信されない） -->
<input type="email"> <!-- メールアドレス用テキスト入力フィールド -->
<input type="url"> <!-- URL用テキスト入力フィールド（サーバ側で値の検証が必須） -->
<input type="tel"> <!-- 電話番号用入力フィールド（モバイルブラウザでは専用の入力パッドが表示される） -->
<input type="number" min="0" max="99"> <!-- 数値入力フィールド（min属性とmax属性で上限下限を設定可能、value属性の値は既定値として表示される） -->
<input type="range" min="0" max="10"> <!-- 一定の範囲から値をスライダー等で選択（min属性とmax属性で上限下限を設定可能 ※初期値はmin属性は0、max属性は100） -->
<input type="range" min="0" max="100" step="10"> <!-- step属性でスライダーで値が吸着する刻み値を設定（初期値は1） -->
<input type="submit" value="送信ボタン"> <!-- フォーム送信ボタン（value属性で表示テキストを設定） -->
<input type="reset"> <!-- フォーム初期化ボタン ※非推奨 -->
<input type="button"> <!-- 単純なボタン（value属性で表示テキストを設定） -->
<input type="image" src="img/button.png" alt="画像ボタン"> <!-- フォーム送信ボタン デザインが画像（src属性で画像を設定） -->
<input type="file"> <!-- 端末のストレージからファイルを選択（属性で各種設定が可能だが、結局サーバでの設定が必須なため割愛） -->
<input type="color" value="#ff0000"> <!-- 色指定（value属性の値に既定色を設定 初期値は#000000） -->
<input type="date"> <!-- xxx -->
<input type="date" value="2020-01-01"> <!-- 日付選択（入力欄の既定値 : yyyy-mm-dd） -->
<input type="time"> <!-- 時分秒入力フォーム（value属性で表示既定値を設定） -->
<input type="month"> <!-- 年月入力フォーム -->
<input type="week"> <!-- 年と何周目かのフォーム -->
<input type="datetime-local"> <!-- 年月日入力フォーム（value属性で表示既定値を設定） -->
<input type="hidden"> <!-- 送信用隠しデータ（ページ上では非表示） --><!-- 指定先へ遷移（ form のあるページとは相性悪い ） -->
<button onclick="location.href='./○○.html'"> ○○○ </button>label … 要素と一体化
<!-- 1パターン目 label要素で囲む -->
<label><input type="checkbox"> ラベルテキスト </label>
<!-- 2パターン目 label要素とidで関連付ける -->
<input type="checkbox" id="1">
<label for="1"> ラベルテキスト </label>textarea
要素内にかかれたテキストは最初から入力されているテキストになる
cols … 1行に入力可能な文字数（初期値:20）
rows … 入力エリアの行数（初期値:2）
maxlength … 入力可能な最大文字数（省略した場合は入力可能文字数無制限）
大きさを変更する右下のハンドルは、CSSのresizeプロパティで無効にできる
<textarea cols="40" rows="4">
最初から入力されているテキスト
</textarea>select
option value属性 … 値がサーバに送信される（value属性を省略する場合は内容が送信される）
option selected属性 … 既定で選択状態にする
option disabled属性 … 選択不可状態にする
アクセシビリティの考慮にてlabel要素との紐づけ推奨。（chromeでは対応しない場合に警告）
<label for="sample-select">サンプルラベル</label>
<select id="sample-select">
<option value="dog" selected>犬</option>
<option value="wolf" disabled>狼</option>
</select>datalist … input要素にサジェスト機能（入力候補）を与える
関連付けるには、input要素のlist属性の値をdatalist要素のid属性と合わせる
datalist要素に入れたoption要素が選択肢になる
<input type="text" list="certifications">
<datalist id="certifications">
<option value="選択肢A">
<option value="選択肢B">
</datalist>placeholder
IE10以上でしか対応していないので、対策が必須（スクリプト埋め込む）
<input type="text" placeholder="表示したいテキスト">
<!-- /body 直前に ブラウザ対策 --><script src="lib/placeholders.min.js"></script>table
border="1" で枠線表示、border="" で枠線非表示（1か空の二択）※「living standard」でborder廃止。
<th>要素にrowspan="0"を指定すると、そのセル以降のセルが1つのセルとしてまとまる
<caption>要素は <table>要素の開始タグ直後に記述しなければならない
border-collapse: collapse;にしているとborder-radiusが無効化される
<!-- 横テーブル -->
<table>
<tr>
<th> HEADER </th>
<td> DATA </td>
</tr>
</table>iframe … 外部ページのコンテンツを埋め込む
※2023 iframeはSelenium（Python）と相性が非常に悪い frameで分かれていると要素が見つからない
iframe要素のwidth属性には px しか使えないので % を使う場合はcss等で
src … 埋め込みたいコンテンツのURL
sandbox … 項目の制限を制御する（セキュリティ対策
sandboxを空で記述すると全ての項目を制限する <iframe src="x" sandbox></iframe>
sandboxの値は半角スペースを挟むことで複数指定
<iframe
src="https://xxx"
sandbox="allow-forms allow-scripts">
</iframe>a … リンク
HTML5からa要素内にdiv要素を含むことが可能になった
disabled 属性を使えない
tabindex属性を使い、値に負の整数を指定することでTABキーでフォーカスが当たるのを防ぐ
<a href="/" target="_blank"> <!-- リンク先表示方法を指定（"_blank"は別タブで表示）-->
<a href="img/sample.jpg" download="test.jpg"> <!-- download属性 保存する際の名前を指定 -->
<a href="sample.html" tabindex="-1"> xxx </a> <!-- tabindex -1 TABキーでフォーカスが当たるのを防ぐ -->img ※深いのでまとまっていません
alt属性 … 可能な限り使用推奨（音声読み取りにも使われる）
sizes属性 … サイズ指定（%は禁止）
srcset … 画像候補
<img src="img/img.png" alt="テスト画像"><picture> … 画像の条件による候補指定特化要素
<img>要素は最下部に記述すること（sourceが効かなくなるため）
CSSでメディアクエリを使うレスポンシブ対応より表示速度が早い
<picture>
<source srcset="sample_500.png" media="(min-width: 500px)"> <!-- media属性の条件の場合この画像を表示 -->
<img src="sample.png" alt=""> <!-- 基本はこの画像を表示 -->
</picture>figure … 図、図表、挿絵などのコンテンツを囲む（自己完結型）
<figcaption> … figure要素で示すキャプション（要素内なら記述位置は自由）
details … 詳細情報を開いたり閉じたりする要素
open属性を指定すると最初から詳細情報が開いた状態になる
summary属性 … 省略すると「詳細」というテキスト等になる（デフォルト）
※ブラウザ対策注意
<details open>
<summary>詳細情報の見出し</summary> <!-- summary属性は先頭にしか配置できない -->
<p>詳細情報A</p>
</details>video … 動画再生、audio … 音楽再生
width height poster の3種属性以外の属性は共通
<video src="movie.mp4" controls></video> <!-- controls コントローラを表示 -->
<video src="movie.mp4" autoplay></video> <!-- autoplay ページ読み込み後自動再生 -->
<video src="movie.mp4" muted></video> <!-- muted デフォルトで音量0 -->
<video src="movie.mp4" loop></video> <!-- loop 繰り返し再生 -->
<video src="movie.mp4" poster="load.png"></video> <!-- poster 再生準備中画像 ※audio要素では禁止 -->
<video controls>
<!-- source要素で複数形式のソースを提供 ブラウザーは理解できる最初のものを使用する -->
<source src="movie/sample.mp4" type="video/mp4">
<source src="movie/sample.webm" type="video/webm">
</video>ルビ
<rt>（Ruby Text）… ルビのテキストを囲う
<rp>（Ruby Parentheses）… 括弧等を囲う
<rb>（Ruby Base）… ルビを振る対象の感じを囲う ※使用非推奨
<ruby>文字<rt>もじ</rt></ruby> <!-- まとめて設定 -->
<ruby>文<rt>も</rt>字<rt>じ</rt></ruby> <!-- 文字ごとに設定 -->
<ruby>文字<rp>（</rp><rt>もじ</rt><rp>）</rp></ruby> <!-- 代替を考え（）を添えて設定 -->文字実体参照
「 < 」 … 「 < 」
「 > 」 … 「 > 」
「半角スペース」 … 「 」
「 円マーク 」 … 「 ¥ 」
「 & 」 … 「 & 」
「 " 」 … 「 " 」
誤植修正
東日本大震災は<del>2010</del><ins>2011</ins>年に発生した。アイコンフォント … Webページ中で表示するアイコン
ベクターファイルなのでジャギーが出ない
画像ではなくフォントなので、細かい変更点に簡単に対応できる（CSSで編集可）
サーバへのリクエスト負担が少ない
アイコン設定
<head>内に記述します
icoはコチラで制作 https://ao-system.net/favicongenerator/
favicon.ico , apple-touch-icon.pngこの2種類の画像を使います
<!-- 正規化URL -->
<link rel="icon" href="./favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="./apple-touch-icon.png" sizes="180x180"> コピーライト（雛形） … コピーライトマーク 、 日付 、 著作者名 の3つ推奨
<footer>
<small> © 2020 html </small>
</footer>ダミーテキスト … 文章が未決定の箇所に挿入するテキスト
Lorem ipsum dolor sit amer, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.