HTML インライン要素 〜<span>要素と<a>要素〜

どうも、irisawaです。
今回のHTMLでは、「インライン要素」、span要素、a要素について学びました。

以下、内容となります。

前回までのHTMLの授業では「ブロックレベル要素」を中心に学習してきましたが、 今回から「インライン要素」を学んでいくので、改めてこの2つの要素を確認してみたいと思います。

ブロックレベル要素とインライン要素

ブロックレベル要素って何?

文章のまとまりを示すもの。例えば、段落を示す<p>や見出しを示す<h1~h6>などがブロックレベル要素に当たります。

決まり事

  • <body>要素の直下はブロックレベル要素で始める
  • インライン要素の中にブロックレベル要素を書いてはいけない
  • 一部を除いて、ブロックレベル要素の中にブロックレベル要素は可能

じゃあ、インライン要素って何?

ブロックレベル要素が、文章のまとまりを示すものに対して インライン要素は「ブロックレベル要素内の特定の部分に何らかの意味、機能を付与する」ものです。

では、具体的なインライン要素を確認していきましょう。今日は、span要素,a要素について学びました。

span要素

span要素は汎用のインライン要素です。これはブロックレベル要素のdiv要素に当たります。使い方としては、他のインライン要素に当てはまらない意味付けをしたい時に使用します。

a要素

a要素はテキストにリンクを設定する際に使用する要素です。aというのはanchor(アンカー:錨)の頭文字を意味してます。制限事項として、a要素を入れ子にしてはいけません。
また、可能な限り意味のあるテキスト記述をしましょう。
以下の例では、何にリンクを設定しているのかが分かりません。

【悪い例】

  • <a href=”>ここ</a>をクリック
  • トップページは<a href=”>こちら</a>

属性

  • name
    • アンカーの名前を指定(フラグメント識別子)の名前を設定する。
    • XHTMLでは互換性の為に、id、nameの両方を指定する。
    • XHTML1.1では廃止予定
  • href(Hypertext REFerence)
    • リンク先のURLを指定
    • メールアドレスを指定する場合「mailto:メールアドレス」と指定する
  • charset
    • リンク先の文字コードを指定する。
  • hreflang
    • リンク先の言語を指定する。
  • type
    • リンク先のMIMEタイプを指定する。
      • MIMEタイプって? 「タイプ名/サブタイプ名」の形式の文字列。例:text/html(HTML),text/plain(テキスト)など
  • rel
    • リンク先のリンクタイプを指定する。
      • リンクタイプとは? MIMEタイプとは別に指定するもので、そのリンクを何として使うのかを指定する。
  • rev
    • リンク先から見たこの文書のタイプを指定する。

今回習ったspan要素、a要素は重要なので、自分の中でしっかり理解しておきたいです。
a要素の属性はまだあり、次回以降に続くと思いますのでお楽しみに!

—-
(2008/06/24 17:23 hirafuji追記)
動画をご覧下さい〜!

1 件のコメント so far »

  1. by スタートアップ研修記 » HTML a要素,img要素, on 06.25.08 @ 6:27 PM

     

    [...] 今日は前回に引き続きa要素と、img要素について勉強しました。 [...]

Comment RSS · TrackBack URI

コメントをどうぞ

名前: (Required)

eMail: (Required)

Website:

Comment:

Spam Protection by WP-SpamFree