ドキュメント構造
基本ページテンプレート
すべての HTML5 ドキュメントは <!DOCTYPE html> で始まり、アクセシビリティと SEO のために lang 属性を持つ <html> が続きます。<head> にはメタデータ(charset、viewport、title)が含まれ、<body> には表示されるコンテンツが含まれます。viewport メタタグによりモバイルデバイスでの適切なレンダリングが保証されます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Web Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>Welcome to my page.</p>
</body>
</html>Head セクションとメタデータ
<head> 要素には機械可読なメタデータが含まれます。charset は文字エンコーディングを宣言し(UTF-8 はほぼすべての文字をカバー)、description メタタグは SEO に不可欠です — 検索エンジンが結果に表示します。HTML 解析後にスクリプトを読み込むには defer を使用してください。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Title - Site Name</title>
<meta name="description" content="A brief description for SEO">
<meta name="author" content="John Doe">
<link rel="stylesheet" href="style.css">
<script src="app.js" defer></script>
</head>コメントと条件付きコメント
HTML コメントは <!-- で始まり --> で終わります。ブラウザには表示されませんがページソースで見えます。コメントはメモ残し、セクションのマーク(TODO、FIXME)、ドキュメント化に便利です。条件付きコメント(IE 専用)は廃止されましたがレガシーコードに存在する可能性があります。
<!-- This is a single-line comment -->
<!--
This is a
multi-line comment
-->
<!-- TODO: Add form validation -->
<!-- FIXME: Fix layout on mobile -->
<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->見出しの階層
HTML には h1(最高位)から h6(最低位)までの 6 レベルの見出しがあります。レベルを飛ばさず階層順に使用してください。検索エンジンは見出しを使ってページ構造を理解します。ベストプラクティス :ページごとに h1 を 1 つ、主要セクションに h2、サブセクションに h3 など。
<h1>Main Page Title</h1>
<h2>Major Section</h2>
<h3>Subsection</h3>
<h4>Sub-subsection</h4>
<h5>Minor Heading</h5>
<h6>Lowest Level Heading</h6>
<!-- Use only one h1 per page for SEO -->
<h1>Blog Post Title</h1>
<h2>Introduction</h2>
<h3>Background</h3>Div と Span コンテナ
<div> は要素をグループ化しスタイルを適用するブロックレベルコンテナです。<span> はテキストの一部をスタイルするインラインコンテナです。どちらも意味を持たない汎用要素です — アクセシビリティと SEO のため、適切な場合はセマンティックタグ(header、nav、main、article)を優先してください。
<div class="container">
<div id="header" class="header">
<span class="logo">MySite</span>
<span class="tagline">Best Content</span>
</div>
<div class="content">
<p>Main <span class="highlight">content</span> here.</p>
</div>
</div>テキストフォーマット
太字、イタリック、強調
<strong> は重要なテキストを示し(スクリーンリーダーが強調します)、<b> は純粋に視覚的な太字です。同様に <em> はストレス強調を示し(セマンティック)、<i> は視覚的なイタリックです。アクセシビリティには <strong> と <em> を優先してください。<b> と <i> はセマンティックな重要性なしのスタイル目的で許容されます。
<p>This is <strong>important</strong> text.</p>
<p>This is <b>bold</b> text.</p>
<p>This is <em>emphasized</em> text.</p>
<p>This is <i>italic</i> text.</p>
<p><strong>Warning:</strong> Do not touch!</p>Mark、Delete、Insert
<mark> は関連性のあるテキストをハイライトします(検索ハイライトのように)。<del> は削除テキスト、<ins> は挿入テキストをマークし — 編集の表示に便利です。<s> は古い情報に取り消し線を引きます。<small> はサイドコメントや著作権用です。<u> はリンクに似るため慎重に使用してください。
<p>Please <mark>highlight this</mark> word.</p>
<p>The price is <del>$99</del> <ins>$79</ins> now.</p>
<p><s>Old information</s> is struck through.</p>
<p>Use <u>underline</u> sparingly.</p>
<p>Small <small>print</small> for side comments.</p>上付き文字と下付き文字
<sub> は下付き文字(ベースラインより下)を作成し、化学式(H2O)や数学変数に使用します。<sup> は上付き文字(ベースラインより上)を作成し、指数(x²)、序数(1st)、脚注に使用します。どちらも垂直位置とフォントサイズを調整するインライン要素です。
<p>H<sub>2</sub>O is water.</p>
<p>E = mc<sup>2</sup> is Einstein's equation.</p>
<p>1st<sup>st</sup> January 2024</p>
<p>CO<sub>2</sub> emissions are rising.</p>
<p>x<sup>2</sup> + y<sup>2</sup> = r<sup>2</sup></p>引用と出典
<blockquote> はブロックレベルの引用(インデント、複数行)用です。<q> はインラインの短い引用用です(引用符を自動的に追加)。cite 属性はソース URL を提供します。<cite> は作品のタイトルや著者名をタグ付けします。これらの要素は引用コンテンツのセマンティックマークアップを向上させます。
<blockquote cite="https://example.com/source">
<p>The best way to predict the future is to invent it.</p>
<footer>— <cite>Alan Kay</cite></footer>
</blockquote>
<p>As <q cite="https://example.com">someone once said</q>,
knowledge is power.</p>コードと整形済みテキスト
<code> はインラインコードスニペット(等幅フォント)をマークします。<pre> は整形済みテキストの空白と改行を保持します。<pre><code> の組み合わせで適切なインデント付きのコードブロックを表示します。<kbd> はキーボード入力を表します。<samp> はプログラム出力用、<var> は数学式の変数用です。
<p>Use the <code>console.log()</code> function.</p>
<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.</p>
<pre><code>function hello() {
console.log("Hello, World!");
return true;
}</code></pre>改行と水平線
<br> はテキスト内に改行を作成します(控えめに使用し、CSS を優先)。<hr> はセクション間の主題の区切りを表す水平線を作成します。<wbr> は長い単語や URL に改行機会を提案し、ブラウザが最適なポイントで改行できるようにします。間隔のための <br> の使用は避けてください — CSS マージンを使用してください。
<p>First line<br>Second line<br>Third line</p>
<p>Paragraph one.</p>
<hr>
<p>Paragraph two after a thematic break.</p>
<wbr><!-- word break opportunity for long URLs -->
https://example.com/<wbr>very<wbr>long<wbr>urlリンクとナビゲーション
基本リンク
<a> 要素がハイパーリンクを作成します。href は宛先 URL を指定します。外部リンクは完全 URL(https://...)を使用し、内部リンクは絶対パス(/about)、相対リンクはファイルパス(../index.html)を使用します。アンカーリンク(#section)は同じページの一致する id 属性を持つ要素にジャンプします。
<!-- External link -->
<a href="https://www.example.com">Visit Example</a>
<!-- Internal link (same site) -->
<a href="/about">About Us</a>
<!-- Relative link -->
<a href="../index.html">Home</a>
<!-- Anchor link (same page) -->
<a href="#section1">Jump to Section 1</a>