カテゴリー

キーワード

 
> 代表的なHTMLタグをご紹介し...

代表的なHTMLタグをご紹介します。使用例つきで。


2015 年 2 月 10 日 投稿    view: 7458
タグ:
このエントリーをはてなブックマークに追加

HTMLタグ

今日はHTMLタグについてお話しさせていただきたいと思います。
よろしくお願いします。

まずは記述ルールから

紙幅の関係上、HTMLタグについて全てを述べることはできませんので、
代表的なものというか、「これはよく使うよ。絶対覚えてね」というもののみ紹介します。


その前に基本の記述ルールをいくつか挙げます。


ルール1.開始タグと終了タグを必ず書く。

【例】

 

<h1>これはテストです</h1>
<ul>
    <li>
        段落1
    </li>
    <li>
        段落2
    </li>
</ul>

※HTML5では終了タグを省略できるものも多く存在しますが、初めの頃は省略しないのが無難です。
構造を把握しやすいからです。省略するのは慣れてきてからにしましょう。


ルール2. 開始タグと終了タグの要素を一致させる。

1に関係することですが、これも基本です。

【正解】

<h1>これはテストです</h1>

<p>これはテストです</p>

【誤り】

<h1>これはテストです</h2>

<p>これはテストです</div>


ルール3.タグは必ず入れ子にする

これは以前も説明しましたが、以下のような形です。

【正解】

<div>
    <p>
        これはテストです。
    </p>
</div>

【誤り】

<div>
    <p>
        これはテストです。
</div>
    </p>

よく使うタグ一覧

文書構造を定義する3つのタグ

<html>~</html>

文書の最初と最後に書く。その文書がHTMLで書かれたことを示す。

<head>~</head>

文書のタイトル等のヘッダ情報を書く。

<body>~</body>

ブラウザに表示される文書本体を間に書く。
訪問者に見られる場所はここ。


【使用例】
<html>
<head>
<title>文書のタイトル</title>
</head>
<body>
文書本体(ここに他のHTMLタグを書く)
</body>
</html>

<h1>~<h6>


<h1>・<h2>・<h3>・<h4>・<h5>・<h6>タグは見出しをつけるときに使います。
数値が大きい方が、より重要性が高いです。
同じ数値の場合は同ランクです。

※HTML5では見出し要素を配置すると、暗黙的にそこが一つのセクションと見なされます。
それでも間違いではありませんが、セクションで区切って明示することが推奨されています。
この件はいずれ別の記事でお話ししたいと思います。

【使用例】

<h1>海外旅行で行きたい国</h1>
<section>
    <h2>イタリア</h2>
    <section>
        <h3>イタリアで行きたい都市</h3>
        <p>
            ローマ
        </p>
        <p>
            ミラノ
        </p>
    </section>
</section>

<div>~</div>

<div>はそれ自体に意味を持っていません。
<div>~</div>で囲んだ範囲をひとかたまりとして、そこに装飾や位置づけをします。
HTML5以前では「ブロック要素」と呼ばれていました。
細かい説明は省きますが、今でも初期設定で<div>~</div>の前後に改行が入ります。

【使用例】

<div align="right">
    これはテストです。<br>
    テスト以外のなにものでもありません。<br>
    テストです。
</div>

WEB制作をしていて<div>を見ない日はありません。
というより、<div>ばかり見ます。
僕は意識していないと、<div>を多用してしまいます。
便利ですが、多くなると構造が複雑になりメンテナンスしづらいので、使う部分でも必要最低限にしましょう。自戒をこめて。(笑)


<p>~</p>


<p>はparagraphの略です。
<p>~</p>で囲まれた部分が一つの段落であることをしめします。
これも<div>と同じくHTML5以前では「ブロック要素」と呼ばれ、前後に改行が入ります。

【使用例】

<p>
    これはテストです。
</p>
これはテストなんですよ。

<ul>~</ul>

<ul>はunordered listの略で、順序のないリストを表示する際に使用します。
子要素は<li>タグで指定します。


【使用例】

<h2>国内旅行で行きたい都道府県</h2>
<ul>
    <li>
        北海道
    </li>
    <li>
        沖縄
    </li>
    <li>
        京都
    </li>
    <li>
        福岡
    </li>
</ul>

※HTML5ではHTML4.01にあったul要素のtype属性は廃止されました。
li要素に含まれる文章の先頭に黒丸や白丸、黒い四角をつけたい場合はcssのlist-style-typeプロパティを使ってください。


<a>~</a>


anchorの略で、HTMLの重要な役割の一つであるリンクを設定できるタグ。
<a>~</a>の間にテキストや画像を囲むことで、そこを基点に同ページの指定場所や別ページへ行くことができるようになる。


【使用例】

<a href="http://sample.html">サンプルページ</a>

※HTML5ではtarget属性が非推奨ではなくなりました。
※HTML5になってインライン要素・ブロック要素という分類がなくなりましたので、a要素でdiv要素やp要素を囲むことができます。
ただし、親要素が許すコンテンツ・モデルでなければなりません。
このことについてもいずれお話しさせていただきたいと思います。

<image>


画像を表示するときに用います。
src属性は必須で、画像ファイルのURLを指定します。
alt属性はアクセシビリティを考えて必ず入れるようにしましょう。(必須ではありません)

【使用例】

<img src="sample.jpg" alt="サンプル写真">

※HTML5からは終了を表す>の前に/をつけなくてもよくなりました。
ただし、/をつけていても間違いではありませんし、両方が混在することも認めれています。


<table>~</table>


<table>~</table>内に<tr>~</tr>で横一列を指定し、その中に<th>~</th>、<td>~</td>で各セルを記述します。


テーブルをレイアウト目的で使用するのは正しい記述ではありません。

【使用例】

<table>
    <tr>
        <th>
            テストテーブル見出し1
        </th>
        <td>
            テストテーブルセル1
        </td>
    </tr>
    <tr>
        <th>
            テストテーブル見出し2
        </th>
        <td>
            テストテーブルセル2
        </td>
    </tr>
</table>

※HTML5ではborder属性・cellpadding属性・cellspacing属性・frame属性・rules属性・width属性が廃止されました。
表の説明・要約を指定するsummary属性のみが残っています。


<style>~</style>

スタイルシートを記述する際に使います。
外部ファイルを読み込むことが推奨されているので、あまり使用することはないかもしれません。


<!DOCTYPE html>
<html lang="ja">
<head>
         <title>おすすめの観光地</title>
<style>
         p.test {color:white; background:black;}
</style>
</head>
<body>
         <p class="test">
            京都市内だと龍安寺です。
         </p>
         <style>
            h3 {font-size:18px;color:blue;}
         </style>
         <h3>他のおすすめは?</h3>
</body>
</html>

まとめ

今日ご紹介したタグだけで基本的なレイアウトは組むことができます。
実際にコーディングしているとわかりますが、頻繁に使うものはそれほど多くありません。

 

とはいえ、上記以外にもHTMLタグはまだまだ沢山あります。
ですので、最低限のタグだけ覚えておいて、あとは

 

「あれってどう書くんだっけ?」
「こんなことしたいけど、適したタグはあるかな?」

 

ってときに、リファレンスサイトや本で確認すればいいと思います。

 

最後までお読みいただきありがとうございました。


おすすめのタグリファレンスはこちらになります。

HTMLクイックリファレンス

 

 

 

杉尾成行 顔写真

この記事を書いた人

杉尾成行

株式会社SceneLive Webマーケティング部長

ウェブマーケティングコンサルタントとして、クライアントのウェブ集客をサポートしている。
また、ウェブ制作、システム制作にも携わり、数々のサイトを手掛けている。
当ホームページ、ブログシステムも制作。

前職:ライター、小説家

ウェブマーケティングコンサルタントとしてのブログ
ウェブ参謀

個人ブログ(オリジナル小説他) ⇒ 35deFA

 


カテゴリー

タグ
この記事が気に入りましたら、是非、他の方にもシェアしてください。
このエントリーをはてなブックマークに追加
関連記事