HTML 早見表

HTML を使用しているとき、HTML タグを正しく使用する方法や適用方法を簡単に覚える方法があるととても便利です。MDN は広範にわたる HTML ドキュメント と深い解説の HTML ハウツーを提供しています。しかし、多くの場合、手っ取り早くヒントを得たいものです。そのため、早見表では、よく使用するコードの断片をすばやく正確に使用することができるようにしています。

メモ: HTML タグは、見た目ではなく、意味づけのために使用しなければなりません。 常に CSS を使って指定されたタグの見た目をガラリと変えることが可能なので、HTML を使用する際は、見た目よりも意味を重視するようにしましょう。

インライン要素

「要素」とは、ウェブページを構成する単一の部品です。ある要素は大きく、コンテナーのように小さな要素を格納します。既定では、「インライン要素」はウェブページの中で隣り合って現れます。インライン要素は、ページ内で必要な分だけ幅を取り、文中の単語や本が並んでいるように、横方向に並んでいます。インライン要素はすべて <body> 要素の中に所有することができます。

インライン要素: 用途と例
用途 要素 例
リンク <a>
html

<a href="https://example.org">
A link to example.org</a>.
画像 <img>
html
<img src="beast.png" width="50" />
インラインコンテナー <span>
html

Used to group elements: for example,
to <span style="color:blue">style
them</span>.
テキストの強調 <em>
html
<em>I'm posh</em>.
イタリックテキスト <i>
html

Mark a phrase in <i>italics</i>.
太字テキスト <b>
html
Bold <b>a word or phrase</b>.
重要なテキスト <strong>
html
<strong>I'm important!</strong>
テキストの強調表示 <mark>
html
<mark>Notice me!</mark>
取り消し線のテキスト <s>
html
<s>I'm irrelevant.</s>
下付き文字 <sub>
html
H<sub>2</sub>O
小さなテキスト <small>
html

Used to represent the <small>small
print </small>of a document.
連絡先 <address>
html

<address>Main street 67</address>
テキスト引用 <cite>
html

For more monsters,
see <cite>The Monster Book of Monsters</cite>.
上付き文字 <sup>
html
x<sup>2</sup>
インライン引用 <q>
html
<q>Me?</q>, she said.
改行 <br>
html
Line 1<br>Line 2
改行可能な位置 <wbr>
html

<div style="width: 200px">
  Llanfair<wbr>pwllgwyngyllgogerychwyrngogogoch.
</div>
日時 <time>
html

Used to format the date. For example:
<time datetime="2020-05-24" pubdate>
published on 23-05-2020</time>.
コード形式 <code>
html

This text is in normal format,
but <code>this text is in code
format</code>.
音声 <audio>
html

<audio controls>
  <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3" type="audio/mpeg">
</audio>
動画 <video>
html

<video controls width="250"
  src="https://archive.org/download/ElephantsDream/ed_hd.ogv" >
  <a href="https://archive.org/download/ElephantsDream/ed_hd.ogv">Download OGV video</a>
</video>

ブロック要素

一方で「ブロック要素」は、ウェブページの横幅いっぱいまでを占めます。ブロック要素は、ウェブページの幅いっぱいに配置され、横に並ぶわけではありません。文章の段落や積み木のように積み重ねられます。

メモ: この早見表は、固有の構造を表したり、特別な意味づけをするいくつかの要素に限定しているため、div 要素は意図的に含まれていません。div 要素は何らかの構造を表すものではなく、特別な意味づけを持っているわけでもありません。

用途 要素 例
単純な段落 <p>
html

<p>I'm a paragraph</p>
<p>I'm another paragraph</p>
広い引用 <blockquote>
html

They said:
<blockquote>The blockquote element indicates
an extended quotation.</blockquote>
追加情報 <details>
html

<details>
  <summary>Html Cheat Sheet</summary>
  <p>Inline elements</p>
  <p>Block elements</p>
</details>
順序なしリスト <ul>
html
<ul>

  <li>I'm an item</li>

  <li>I'm another item</li>

</ul>
順序付きリスト <ol>
html
<ol>

  <li>I'm the first item</li>

  <li>I'm the second item</li>

</ol>
定義リスト <dl>
html
<dl>
  <dt>A Term</dt>

  <dd>Definition of a term</dd>
  <dt>Another Term</dt>
  <dd>Definition of another term</dd>
</dl>
水平区切り線 <hr>
html
before<hr>after
テキストの見出し <h1>-<h6>
html

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