構文とよくあるタスクの HTML 早見表
HTML を使用しているとき、HTML タグを正しく使用する方法や適用方法を簡単に覚える方法があるととても便利です。MDN は広範にわたる HTML ドキュメント と深い解説である一連の HTML ガイドを提供しています。しかし、多くの場合、手っ取り早くヒントを得たいものです。そのため、早見表では、よく使用するコードの断片をすばやく正確に使用することができるようにしています。
メモ: HTML タグは、見た目ではなく、意味づけのために使用しなければなりません。 常に CSS を使って指定されたタグの見た目をガラリと変えることが可能なので、HTML を使用する際は、見た目よりも意味を重視するようにしましょう。
インライン要素
「要素」とは、ウェブページを構成する単一の部品です。ある要素は大きく、コンテナーのように小さな要素を格納します。既定では、「インライン要素」はウェブページの中で隣り合って現れます。インライン要素は、ページ内で必要な分だけ幅を取り、文中の単語や本が並んでいるように、横方向に並んでいます。インライン要素はすべて <body> 要素の中に所有することができます。
| 用途 | 要素 | 例 |
|---|---|---|
| リンク | <a> |
html |
| 画像 | <img> |
html |
| インラインコンテナー | <span> |
html |
| テキストの強調 | <em> |
html |
| イタリックテキスト | <i> |
html |
| 太字テキスト | <b> |
html |
| 重要なテキスト | <strong> |
html |
| テキストの強調表示 | <mark> |
html |
| 取り消し線のテキスト | <s> |
html |
| 下付き文字 | <sub> |
html |
| 小さなテキスト | <small> |
html |
| 連絡先 | <address> |
html |
| テキスト引用 | <cite> |
html |
| 上付き文字 | <sup> |
html |
| インライン引用 | <q> |
html |
| 改行 | <br> |
html |
| 改行可能な位置 | <wbr> |
html |
| 日時 | <time> |
html |
| コード形式 | <code> |
html |
| 音声 | <audio> |
html |
| 動画 | <video> |
html |
ブロック要素
一方で「ブロック要素」は、ウェブページの横幅いっぱいまでを占めます。ブロック要素は、ウェブページの幅いっぱいに配置され、横に並ぶわけではありません。文章の段落や積み木のように積み重ねられます。
メモ:
この早見表は、固有の構造を表したり、特別な意味づけをするいくつかの要素に限定しているため、div 要素は意図的に含まれていません。div 要素は何らかの構造を表すものではなく、特別な意味づけを持っているわけでもありません。
| 用途 | 要素 | 例 |
|---|---|---|
| 単純な段落 | <p> |
html |
| 広い引用 | <blockquote> |
html |
| 追加情報 | <details> |
html |
| 順序なしリスト | <ul> |
html |
| 順序付きリスト | <ol> |
html |
| 定義リスト | <dl> |
html |
| 水平区切り線 | <hr> |
html |
| テキストの見出し | <h1>-<h6> |
html |