🌐 HTMLチートシート
| タグ | 用途 | 例 |
|---|---|---|
<!DOCTYPE html> | HTML5宣言 | <!DOCTYPE html> |
<html> | HTML全体の入れ物 | <html lang="ja"> |
<head> | 設定情報 | <head><title>...</title></head> |
<body> | 画面に表示する内容 | <body>...</body> |
<h1>〜<h6> | 見出し | <h1>タイトル</h1> |
<p> | 段落 | <p>文章</p> |
<a> | リンク | <a href="URL">テキスト</a> |
<img> | 画像 | <img src="photo.jpg" alt="説明"> |
<ul> / <ol> / <li> | リスト | <ul><li>項目</li></ul> |
<table> / <tr> / <td> | 表 | <table><tr><td>データ</td></tr></table> |
<form> | フォーム | <form action="/submit" method="POST"> |
<input> | 入力欄 | <input type="text" id="name"> |
<button> | ボタン | <button type="submit">送信</button> |
<div> | ブロック要素の入れ物 | <div class="card">...</div> |
<span> | インライン要素の入れ物 | <span class="red">赤い文字</span> |
<header> | ページ上部のヘッダー | <header><h1>サイト名</h1></header> |
<footer> | ページ下部のフッター | <footer><p>© 2026</p></footer> |
<nav> | ナビゲーション | <nav><a href="/">ホーム</a></nav> |
<main> | メインコンテンツ | <main>...</main> |
<section> | 意味のあるまとまり | <section><h2>見出し</h2>...</section> |
<article> | 独立した記事 | <article><h2>記事タイトル</h2>...</article> |
<aside> | 補足情報・サイドバー | <aside>関連リンク</aside> |
<figure> / <figcaption> | 図とキャプション | <figure><img ...><figcaption>説明</figcaption></figure> |
<video> | 動画の埋め込み | <video src="movie.mp4" controls></video> |
<audio> | 音声の埋め込み | <audio src="sound.mp3" controls></audio> |
<details> / <summary> | 折りたたみ | <details><summary>詳細</summary>内容</details> |
<meta viewport> | スマホ表示の設定 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
<link rel="stylesheet"> | CSSファイルの読み込み | <link rel="stylesheet" href="style.css"> |
<script> | JavaScriptの読み込み | <script src="app.js"></script> |
<iframe> | 外部ページの埋め込み | <iframe src="https://example.com"></iframe> |
📖 関連する用語
❓ よくある質問
HTMLチートシートはどんな人向け？
HTML初心者〜中級者向け。基本タグからセマンティックタグまで網羅しています。
印刷して使える？
はい。印刷ボタンを押すと印刷に最適化されたレイアウトで出力されます。
タグの意味がわからないときは？
用語集ページで詳しい解説を読めます。
⚠️ よくあるエラー
- スタイルが反映されない — linkタグの書き忘れ
- 画像が表示されない — srcパスの間違い
- レイアウトが崩れる — タグの閉じ忘れ
📎 このチートシートを紹介する
ブログや記事で紹介する際は、以下のURLをご利用ください。
https://start-web-programming.com/cheatsheet/html/