さまざまなHTMLタグ

概要

HTMLの基本的なタグを紹介します。 body要素の中で使用する(ブラウザで表示される)タグに限って紹介します。

全てのタグは紹介しませんので必要に応じてリファレンスサイトなどを参照してください。

HTMLはあくまでも文書の構造を表現する言語なので文書の構造に注目して読んでください。デザインはCSSで行います。

h1, h2, h3, h4, h5, h6要素

文書の章や節のタイトル・見出しを定義する要素です。

数字が小さいほど階層が上であることを示します。次のようなイメージです。

<h1>自己紹介</h1>
  <h2>趣味</h2>
    <h3>読書</h3>
      <h4>ミステリー</h4>
        <p>犯人を考えるのが楽しい</p>

      <h4>恋愛小説</h4>
        <p>どきどきする</p>
    <h3>プログラミング</h3>
      <h4>Ruby</h4>
        <p>書いてて楽しい</p>

      <h4>JavaScript</h4>
        <p>動きがあって楽しい</p>

  <h2>特技</h2>
    <h3>...</h3>

p要素

段落(paragraph)を表す要素です。

<p>吾輩は猫である。名前はまだ無い。<p>
<p>
  どこで生れたかとんと見当がつかぬ。
  何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
  吾輩はここで始めて人間というものを見た。
  ...
</p>

section要素

文書の塊、セクションを定義します。

<h1>自己紹介</h1>

<section>
  <h2>趣味</h2>

  <section>
    <h3>読書</h3>

    <section>
      <h4>ミステリー</h4>
      <p>犯人を考えるのが楽しい</p>
    </section>

    <section>
      <h4>恋愛小説</h4>
      <p>どきどきする</p>
    </section>
  </section>

  <section>
    <h3>プログラミング</h3>

    <section>
      <h4>Ruby</h4>
      <p>書いてて楽しい</p>
    </section>

    <section>
      <h4>JavaScript</h4>
      <p>動きがあって楽しい</p>
    </section>
  </section>
</section>

<section>
  <h2>特技</h2>
  ...
</section>

文書全体やセクションのヘッダを表します。タイトルや目次などをいれます。

<body>
  <header>
    <h1>自己紹介</h1>
  </header>
  <section>
    <header>
      <h2>趣味</h2>
      ...
    </header>
  </section>
</body>

文書全体やセクションのフッタを表します。著者の連絡先や関連ページへのリンクをいれます。

<body>
  ...

  <footer>
    <p>Copyright (c) nownabe<p>
    <p>連絡先: @nownabe xxx-yyyy-zzzz</p>
  </footer>
</body>

a要素

リンクをはります。ブラウザでa要素の内容をクリックすると違うページに移動できるようになります。

リンク先はhref属性で指定します。

<a href="./profile.html">自己紹介</a>

.は相対URLという書き方です。相対URLではリンク先のURLをリンク元のファイルからの相対的なパスで指定します。対照的に絶対的なURLで表す絶対URLというものもあります。

絶対URLでは次のように普通にURLを書きます。

<a href="https://www.google.co.jp">Google</a>

相対パスではそのファイルからみて同じフォルダ階層を「.」、一つ上の階層を「..」で表し、フォルダの区切りを「/」で表します。

html
├── index.html
├── profile.html
└── programings
    ├── javascript.html
    └── ruby.html

例えば上のようなフォルダ構成の場合、profile.htmlからindex.htmlにリンクをはる場合は、

<a href="./index.html">戻る</a>

とします。javascript.htmlにリンクをはるには、

<a href="./programings/javascript.html">JavaScript</a>

とします。javascript.htmlからprofile.htmlへリンクをはるにはひとつ上の階層になるので

<a href="../profile.html">自己紹介へもどる</a>

とします。javascript.htmlからruby.htmlは同じ階層なので

<a href="./ruby.html">Ruby</a>

とします。

ol, ul, li要素

箇条書きを表現する要素です。

ol要素は順序付きリスト(ordered list)、ul要素は順序なしリスト(unordered list)です。 li要素はリストのひとつひとつの項目(list item)です。

次のようにして使います。

順序ありリスト:

<ol>
  <li>HTML5/CSS3</li>
  <li>SQL</li>
  <li>Ruby</li>
  <li>Sinatra</li>
</ol>

表示例:

HTML5/CSS3

SQL

Ruby

Sinatra

順序なしリスト:

<ul>
  <li>JavaScript</li>
  <li>Ruby</li>
</ul>

表示例:

JavaScript

Ruby

b, i, em, strong要素

テキストの意味を表す要素です。

b要素: 文書のキーワードや製品名など他と区別したいテキストを表す
i要素: 技術単語や外来語など他と区別したいテキストを表す
em要素: 強調したいテキストを表す
strong要素: 重要なテキストを表す

<p>
  どの実装が生き残るか、さらにもう一段階<i>パラダイムシフト</i>が
  あるのか？っていう懸念はありますが、僕は
  <em>
    間違いなく<strong>仮想DOM</strong>が次世代の<b>フロントエンド環境</b>のスタンダードになる
  </em>
  と思っています。
<p>

img要素

文書に画像を埋め込むための要素です。src属性で画像ファイルの絶対URLか相対URLを指定します。

<img src="./mypicture.jpg">
<img src="http://k.yimg.jp/images/top/sp2/cmn/logo-ns-131205.png">

table要素

表を定義する要素です。 table要素で表全体を囲みます。 tr要素で表の行を表します。 td要素で表の各セルを表します。

見出しにはthを使います。

<table>
  <tr>
    <th>国名</th>
    <th>首都</th>
    <th>国旗</th>
  </tr>
  <tr>
    <td>日本</td>
    <td>東京都</td>
    <td><img src="http://tamenal.com/wp-content/uploads/2015/07/356ca5e02c1fe8688d29743aaa46a317.jpeg" width="141" height="89"></td>
  </tr>
  <tr>
    <td>アメリカ合衆国</td>
    <td>ワシントンD.C.</td>
    <td><img src="http://bookclub.japantimes.co.jp/userimg/image/No_41-Q2-2.jpg" width="122" height="88"></td>
  </tr>
</table>

国	首都	国旗
日本	東京都
アメリカ合衆国	ワシントンD.C.

Webアプリを作ろう！