CheatSheet
日本語 icon日本語English iconEnglish
チートシートとはカンニングペーパーのことです。それが転じて、本来覚えることをまとめておいたものです。
要点をすぐに参照できるようにまとめてみました。

HTML

エンジニアのためのWebチートシート

HTMLはWebページの構造を定義するマークアップ言語です。 セマンティックタグ、フォーム要素、メタデータなど、よく使うHTML要素をチートシートにまとめました。

ドキュメント構造

DOCTYPE宣言

  • HTMLドキュメントの先頭に記述し、HTML5であることを宣言します。

    <!DOCTYPE html>

基本構造

  • HTMLドキュメントの基本的な構造です。

    <!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0">
  <title>Page Title</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Hello World</h1>
  <script src="app.js"></script>
</body>
</html>

テキスト要素

見出し（h1〜h6）

  • 見出しレベルを示します。h1が最も重要で、h6が最も低いレベルです。

    <h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

段落 & 改行

  • テキストの段落と改行を表します。

    <p>This is a paragraph.</p>
<p>Line 1<br>Line 2</p>
<hr> <!-- 水平線 -->
<pre>  pre-formatted  text  </pre>
<blockquote>Quoted text</blockquote>

インラインテキスト

  • テキスト内で使用するインライン要素です。

    <strong>Bold (important)</strong>
<em>Italic (emphasis)</em>
<b>Bold (visual)</b>
<i>Italic (visual)</i>
<u>Underline</u>
<s>Strikethrough</s>
<mark>Highlighted</mark>
<small>Small text</small>
<sub>Subscript</sub>
<sup>Superscript</sup>
<code>Inline code</code>
<abbr title="HTML">HTML</abbr>
<time datetime="2024-01-01">Jan 1</time>
<span>Generic inline</span>

リンク

  • ハイパーリンクを作成します。

    <a href="https://example.com">Link</a>
<a href="/about">Internal link</a>
<a href="#section">Anchor link</a>
<a href="mailto:info@example.com">Email</a>
<a href="tel:090-1234-5678">Phone</a>
<a href="..." target="_blank"
   rel="noopener noreferrer">New tab</a>
<a href="file.pdf" download>Download</a>

リスト & テーブル

リスト

  • 順序付きリスト・順序なしリスト・定義リストです。

    <!-- 順序なしリスト -->
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

<!-- 順序付きリスト -->
<ol>
  <li>First</li>
  <li>Second</li>
</ol>

<!-- 定義リスト -->
<dl>
  <dt>Term</dt>
  <dd>Definition</dd>
</dl>

テーブル

  • テーブルを作成します。

    <table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Taro</td>
      <td>25</td>
    </tr>
    <tr>
      <td colspan="2">Merged cell</td>
    </tr>
  </tbody>
</table>

フォーム

input要素で使えるtype属性の一覧です。

type説明
text

テキスト入力

password

パスワード入力

email

メールアドレス

number

数値入力

tel

電話番号

url

URL

date

日付選択

checkbox

チェックボックス

radio

ラジオボタン

file

ファイル選択

range

スライダー

color

カラーピッカー

search

検索入力

hidden

非表示フィールド

submit

送信ボタン

フォーム要素

  • フォームで使用する主な要素です。

    <form action="/submit" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">

  <textarea rows="4" cols="50"></textarea>

  <select name="color">
    <option value="">Select</option>
    <optgroup label="Warm">
      <option value="red">Red</option>
    </optgroup>
  </select>

  <button type="submit">Submit</button>
</form>

フォーム属性

  • フォーム要素に指定できる主な属性です。

    <input type="text"
  placeholder="Enter name"
  required
  readonly
  disabled
  maxlength="100"
  minlength="2"
  pattern="[A-Za-z]+"
  autofocus
  autocomplete="name"
  value="default"
>

メディア

画像（img）

  • 画像を表示します。alt属性は必須です。

    <img src="image.jpg" alt="Description"
     width="300" height="200"
     loading="lazy">

<!-- figure + figcaption -->
<figure>
  <img src="photo.jpg" alt="Photo">
  <figcaption>Photo caption</figcaption>
</figure>

video / audio

  • 動画・音声を埋め込みます。

    <video controls width="640" poster="thumb.jpg">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
</video>

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
</audio>

<!-- YouTube embed -->
<iframe src="https://www.youtube.com/embed/ID"
  allowfullscreen></iframe>

picture（レスポンシブ画像）

  • 画面サイズに応じて異なる画像を表示します。

    <picture>
  <source media="(min-width: 1024px)"
          srcset="large.jpg">
  <source media="(min-width: 768px)"
          srcset="medium.jpg">
  <img src="small.jpg" alt="Responsive">
</picture>

<!-- WebP fallback -->
<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Fallback">

セマンティックHTML

文書構造を意味的に表すHTML5のタグです。

タグ用途
<header>

ヘッダー領域

<nav>

ナビゲーション

<main>

メインコンテンツ（1ページに1つ）

<article>

独立したコンテンツ

<section>

テーマ別セクション

<aside>

サイドバー・補足情報

<footer>

フッター領域

<details>

折りたたみコンテンツ

<dialog>

ダイアログ / モーダル

メタ情報 & OGP

metaタグ

  • ドキュメントのメタ情報を指定します。

    <meta charset="UTF-8">
<meta name="viewport"
  content="width=device-width, initial-scale=1.0">
<meta name="description" content="Page description">
<meta name="robots" content="index, follow">
<meta name="author" content="Author Name">
<link rel="canonical" href="https://example.com/page">
<link rel="icon" href="/favicon.ico">

OGP（Open Graph Protocol）

  • SNSでシェアされた際の表示を制御します。

    <meta property="og:title" content="Title">
<meta property="og:description" content="Desc">
<meta property="og:image" content="https://...">
<meta property="og:url" content="https://...">
<meta property="og:type" content="website">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Title">
<meta name="twitter:description" content="Desc">
<meta name="twitter:image" content="https://...">

属性

グローバル属性

  • すべてのHTML要素に指定できる共通属性です。

    <div id="unique-id">id</div>
<div class="class-name">class</div>
<div style="color: red;">style</div>
<div title="Tooltip text">title</div>
<div hidden>hidden</div>
<div tabindex="0">focusable</div>
<div role="button">ARIA role</div>
<div aria-label="Label">ARIA label</div>
<div lang="en">language</div>
<div dir="rtl">direction</div>
<div contenteditable>editable</div>
<div draggable="true">draggable</div>

data-*属性

  • カスタムデータ属性でJavaScriptとデータを受け渡しします。

    <div data-user-id="123"
     data-role="admin"
     data-active="true">
  User
</div>

<script>
const el = document.querySelector('[data-user-id]')
el.dataset.userId   // "123"
el.dataset.role     // "admin"
el.dataset.active   // "true"
</script>

引用・参考リンク

Related Cheatsheets

Related Goods

  • シリーズ40万部突破の大ヒット！ Webサイト制作者必見の一冊です。
    シリーズ40万部突破の大ヒット！ Webサイト制作者必見の一冊です。
    詳細をみる
  • 困ったらコレ！ 目的、やりたいことで引けるリファレンスです。
    困ったらコレ！ 目的、やりたいことで引けるリファレンスです。
    詳細をみる
  • ケーブルに取り付け可能なTypeCとLightningの変換アダプタです。 スタイリッシュなデザインで、Apple製品との相性抜群です。
    ケーブルに取り付け可能なTypeCとLightningの変換アダプタです。 スタイリッシュなデザインで、Apple製品との相性抜群です。
    詳細をみる
  • お気に入りのサウンドデバイスをすぐ取り出せる位置にディスプレイさせておくことができます。
    お気に入りのサウンドデバイスをすぐ取り出せる位置にディスプレイさせておくことができます。
    詳細をみる

WebTerm - Recommended tools

WebTermは、ブラウザでLinuxコマンド・Gitコマンドを安全に実行でき、チュートリアル式で学べるターミナルサンドボックスです。
AIコーディングツールの普及に伴い、CLIの基礎知識を身につける重要性は増しています。実際のターミナルを操作するのに抵抗がある方でも、WebTermはローカル環境を壊す心配がありません。「会員登録不要・無料」で利用でき、学習環境として最適です。

WebTerm Logo

WebTerm

Browser Terminal Sandbox for Learning CLI

開く

All Cheatsheets

エンジニア・プログラマー向けの便利なチートシートを多数まとめています(SP/Tablet/PC対応)
すべてのチートシートを見る