中島知子関連についての情報

要素とは？

HTML要素（HTMLようそ、英: HTML element）は、HTMLでマークアップした文書を構成するものである。HTML文書は、複数のHTML要素が入れ子になって構成されている。 要素（element）は、開始タグ (Start-tag)・内容 (Content)・終了タグ (End-tag) の3つから構成される[1]。要素は<と>で囲まれる開始タグで始まり、</と>で囲まれる終了タグで終わる。また、開始タグと終了タグではさまれた部分が内容となる。また、開始タグは属性（attribute）と属性値（value）を取ることができる。 また、XMLでは、開始タグや終了タグとは別に、空要素のための空要素タグ（Empty-Element Tags）が規程されている。空要素タグは<と/>で囲まれ、内容を持たない。 HTMLはSGMLアプリケーションであるHTMLとXMLアプリケーションであるXHTMLに大別される。この違いによる相違は以下のようになる。 SGML宣言でSHORTTAG YESと宣言されているSGMLアプリケーションは省略タグ機構に則って開始タグや終了タグの省略が可能である。HTML 4.01などの大半のHTMLはSHORTTAG YESと宣言されているので、DTDで省略可能とされているタグ[2]を省略することができる。ただし、省略タグ機構に則る必要があるため、いかなる場合でも省略可能というわけではない[3]。 XMLはタグの省略は不可能である。そのため、XMLアプリケーションであるXHTMLでは空要素を表現する場合、次のうちどちらかを用いる必要がある。 なお、古いユーザエージェントのためには、前者のうち「/>」の前にスペースを入れる記述が推奨されている[4]。 SGML宣言でSHORTTAG YESと宣言されているSGMLアプリケーションは属性に関して次のような省略が可能である。なお、HTML 4.01などの大半のHTMLはSHORTTAG YESと宣言されている。 HTML文書のヘッダ部分(document head)を指定する要素。HTML文書自身に関する情報（例：タイトルやスタイルシートに関する情報など）を指定できる。 HTML文書は、ヘッダ部分と本体部分の2つに分けることができる。2007年11月現在で有効なスキーマでは、ルート要素であるhtml要素の直下にはhead要素、body要素をこの順で1つずつだけ取ることができる。 タイトル(document title)を指定する。主なウェブブラウザ実装系では、タイトルバーに表示される。例えば、このページのタイトルは "HTML要素 - Wikipedia" である。 埋め込みオブジェクト(generic embedded object)であることを示す。大抵の場合はインライン要素として使用する。data属性にURI、type属性にMIMEタイプ(image/gif等)を指定することでFLASHや音楽など様々な種類のオブジェクトを出力する事ができる。 内容には代替(オブジェクト要素も可)を記述する。例えば一番外からオブジェクト要素(FLASH)、オブジェクト要素(画像)、説明文、のように入れ子にするとFLASHの利用できない環境では画像が、FLASHと画像の利用できない環境では説明文が出力される。これはimg要素等のalt属性と比べると高性能な代替システムであるが、これに対応しないウェブブラウザも少なくない。 プロパティ値の設定(named property value)を行う。object要素で使用するメディアに対しての初期値を設定するために使用する。 ウェブブラウザによってはインデントして表示することがあるが、この要素はあくまで引用目的に用いるべきであり、単にインデントするために用いるのは好ましくない。また、内容にクォーテーションマーク（「"」 や 「'」）を用いるのは避けるほうが良い。 この要素自体に意味は無い。文書の構造を示すときや、既存の要素には含められない物の代用要素として使用する。 代替となりうるコンテンツを示す要素であるため、「あなたの環境ではスクリプトが使用できません」などと記述するのはユーザにとっては無意味である。 メールアドレスを記述するのが一般的。ただし、address要素内のメールアドレスがメールアドレス検索ロボットの標的になりスパムメールなどの被害に遭う可能性もある。 リストの項目(list items)を示す。ブロック要素を含められるため、入れ子のリストを作成することもできる。 定義のリスト(definition list)であることを示す。dt要素かdd要素を1つ以上含む必要がある。 また正しくマークアップする為には(他の要素に比べ)多少の知識を要する。これは音声ブラウザの挙動など、アクセシビリティを考慮した場合に制約が多いため。 内容はtr要素のみで、1つ以上の記述が必要である。また、各要素内においての列の数は等しくなくてはならない。 グループ化させるには2つの方法があり、span属性で列数を指定する方法かcol属性を列数分記述する方法である。 ヘッダ要素のid属性と、データ要素のheaders属性を結びつける(同じ値を指定する)。これによって音声ブラウザではヘッダとデータの内容を交互に読み上げることが出来る。 上記の省略系といえるscope属性を用いる。ヘッダ属性にcolを指定することで縦方向・rowを指定することで横方向のデータと結びつけることが出来る。 ヘッダ要素にabbr属性で短縮系を指定する。例えば、ヘッダ要素の内容が"価格（円）"等の場合、逐一読み上げるのは冗長になる。abbr属性が"価格"となっていれば、「価格100」等と読み上げられ、冗長さは解消される。 アンカー(anchor)であることを示す。href属性にリンク先URIを指定しハイパーリンクを作成する。 内容にはリンク先の概要を表記する。内容だけを見てリンク先が判断できることが望ましく、「ここをクリック」等は使うべきでないとされる。内容が冗長になる場合はtitle属性で説明を付加することができる。 埋め込み画像(Embedded image)であることを示す。src属性にURIを指定し画像を表示させる。内容は空で終了タグは存在しない。 alt属性で画像の説明を記述することが必要である。これは画像に対応できないユーザーのため。単にレイアウト用の画像(スペーサー画像等)の場合にはaltは空にする。また「画像が表示できません」や「画像」と言った代替テキストはユーザにとっては有用でなく、「犬の写真」など簡素な説明や「飼い犬のポチが…」など情景が把握できる説明が有用である。説明が長文になる場合longdesc属性にURIを指定し、説明の文書を示す事もできる。 他のドメインの画像を指定することも可能であるため、著作権の観点から問題視されることもある。詳細は(無断リンク)の項目参照。 ^ 開始タグ・終了タグをあわせてHTMLタグ（もしくはタグ）と呼ぶこともあるが仕様で定められた表現ではない。 ^ 例えば、タグを省略した場合にでも、どの箇所でどのタグを省略したのかを一意に特定できる必要がある。 この「HTML要素」は、インターネットやウェブに関連した書きかけ項目です。この記事を加筆して下さる協力者を求めています（P:コンピュータ）。

[ 145] HTML要素 - Wikipedia
[引用サイト]　 http://ja.wikipedia.org/wiki/HTML%E8%A6%81%E7%B4%A0

map要素（image map, clickable map）は area要素や a要素 を内包して、img要素, input要素, object要素で埋め込まれている画像と連携してクライアントサイド・イメージマップ（クリッカブルマップとも呼ばれる）を作成します。 a要素に対してイメージマップを構成する shape属性, coords属性を指定する場合には、インライン要素である map要素に特別にブロック要素を内包することができます。なお、イメージマップには a要素を使うか、area要素を使うかで、UA の対応状況に大きな開きがあります。現状では a要素の shape属性, coords属性に対応しているのは、Macintosh版Internet Explorer 5, Netscape 7 以上, Firefox 1 以上, Opera 7 以上のみ（Windows版Internet Explorer 6, Windows版Internet Explorer 7, Safari は無効）です。a要素に対して area要素で作るイメージマップの対応状況は良好ですが、こちらも検索エンジンのロボットが area要素の href属性に指定されたリンク先を巡回できないという欠点があります。 a要素でクライアントサイド・イメージマップを作成する場合、HTML4.01 strict, XHTML1.0 strict, XHTML1.1 では map要素の直下に area要素以外のインライン要素を置くことができないため、必ず直接の子要素には p要素や div要素などのブロック要素を1つ以上内包しなければなりません。このように map要素はブロックレベル・インラインレベルの両方を取ることができる要素型に分類されます。ただし、area要素を使用する場合はインライン要素として扱われます。 クライアントサイド・イメージマップに名前を指定します。name属性の値は半角アルファベットの大文字・小文字を区別する（case-sensitive）ので厳密な指定が必要です。map要素につけた名前は img要素, input要素, object要素に指定されている usemap属性の値を参照して連携します。なお、XHTML1.1 では name属性は完全に廃止され、代わりに id属性を指定します。XHTML1.0 では id属性を参照できない UA との後方互換のために id属性と name属性の両方を同じ値で設定することが認められています。 1枚の画像に複数のリンク先を指定できるイメージマップ（Image Map）の作成方法を解説します。なお、イメージマップには、CGI を利用したサーバサイド・イメージマップと map要素で作成するクライアントサイド・イメージマップの2種類があり、ここではクライアントサイド方式のイメージマップを紹介します。 イメージマップはクリッカブルマップ（Clickable Map）とも呼ばれ、1枚の画像の中に色々なリンク先を設定しておき、クリックした位置に応じて指定のリンク先にジャンプする機能です。1枚の画像の中に複数のリンク先を設定できることから、たとえば日本地図の画像を利用して、各都道府県の領域をクリックすると、その詳細なページへ移動するなど応用範囲が広く、Yahoo! JAPAN のトップページでも使用されている人気のある機能です。 img要素の usemap属性は src属性で指定した画像ファイルに適用するマップ設定の名称を指定する属性です。usemap属性の値は map要素の name属性で指定した値になり、マップ名称の文頭にハッシュ（#）を前置して、usemap="#マップ名称" の形で指定します。 map要素はイメージマップを定義する要素で、イメージマップの定義全体を map要素で囲みます。name属性は map要素で定義するイメージマップの名称を指定します。この名称を img要素の usemap属性に指定することで、その画像に map要素内で定義された指定が適用されます。 area要素は map要素の中で使用して、img要素で指定された画像にリンク先を指定します。area要素は内容をもたない空要素で終了タグがありません。area要素を複数記述することで、複数のリンク先を設定できます。 area要素の shape属性は画像にリンクを設定する際の形状を指定し、coords属性が、その領域を座標値で指定します。指定する座標値のポイントは、リンクの形状によっても異なります。shape属性の値には "rect", "circle", "poly" の3種類の形状があり、それぞれ次のようなポイント座標値を coords属性で指定します。 座標値は、全て "x（横座標）, y（縦座標）" の順に表記します。画像の左上が座標値（0 , 0）となり、そこを原点に整数（ピクセル数で解釈）で示します。coords属性の設定は shape属性で指定された形状によって変わります。shape属性の値に矩形の "rect" を指定した場合は、「左上のx座標,左上のy座標,右下のx座標,右下のy座標」の4点を指定します。円形の "circle" を指定した場合は、「円の中心のx座標,円の中心のy座標,半径r」を指定します。多角形の "poly" を指定した場合は、画像の左上（0 , 0）を原点に多角形の各頂点となる「x座標,y座標」をいくつも並べて指定します。 area要素の alt属性は img要素の alt属性と同じで、画像のもつ情報の代替テキスト（altanative text）を指定します。代替テキストとは何らかのトラブルで画像が表示できない場合や音声出力・点字出力などの非視覚環境、画像の表示に対応していない・あるいは表示しない設定にしている環境において、その画像の表現する情報の代替となる文章のことです。なお、この場合の area要素はリンクとして機能するため、代替テキストには通常のアンカーを指定する場合と同じようにリンク先の内容を記述するのが良いでしょう。 注意点として現在の検索エンジンのロボットでは area要素の href属性に指定されたリンク先を巡回することができません。このため重要なナビゲーション部分にイメージマップを使用することはできるだけ避けた方が無難なようです。なお、area要素の代わりに検索エンジンのロボットが巡回できる a要素でもイメージマップは作成可能ですが、Macintosh版Internet Explorer 5, Netscape 7 以上, Firefox 1 以上, Opera 7 以上しか対応していないため（Windows版Internet Explorer 6, Windows版Internet Explorer 7, Safari では無効）、area要素に比べると極端にサポートが落ちます。さらに a要素は、内容をもたない area要素とは違い、終了タグも必須のためアンカー内容をもったリンクボタンが表示され、どうしても見た目が悪くなってしまう欠点があります。 area要素に代わって a要素に shape属性と coords属性を指定したサンプルを用意しました。まず、a要素に shape属性と coords属性を指定する場合は、map要素には特別にブロック要素を内容にしなければなりません。また、a要素は空要素ではなく、リンク先の情報となる内容をもたなければならないため、画像の横にはリンクボタンが並び、見た目はどうしても悪くなります。そこで、map要素の内容となっているブロック要素を対象に CSS の text-indentプロパティに極端な負の値（例："text-indent : -9999px ;" など）を指定することでアンカーテキストは表示域から見えなくなり一応は見た目を整えることができるでしょう。ただし、辛うじてアンカー内容をリンクボタンとして機能することができていた Windows版Internet Explorer 6, Windows版Internet Explorer 7, Safari では全く動作しないことになります。 XHTML1.1 では name属性は完全廃止されたため、img要素, input要素, object要素で埋め込まれているイメージとの関連付けには id属性のみを使用します。

[ 146] map要素
[引用サイト]　 http://w3g.jp/xhtml/dic/map

HTMLは文書の構造を分かりやすくするため、その内容を「要素」という単位（パーツ）でとらえ、それぞれを「タグ」という記号で識別する仕組みです。HTML要素は「見出し」「段落」など通常の文書の構成要素と同じ考え方になっているので、理解するのは容易です。一般の文書の構造と比較しながら、基本となる要素について見ていきましょう。 普通、文書はその内容を分かりやすく表現するため、章、見出し、段落などのいくつかの役割を持つ“要素”（部品）を組み合わせて構成されます。HTMLはこのような「要素（element）」を、タグと呼ばれる目印（マークアップ記号）で示す方法です。ブラウザはHTMLデータの中からこうした目印を探し出し、どの部分が見出しでどれが段落であるかを識別して、読者がその役割を理解しやすいように大きな文字で表示したり行空けしたりして表示するのです。 タグは <samp> というように要素の名称（この場合samp）を山括弧で囲んだもので、通常 のようにペアで要素の内容（つまり見出し、段落などそのもの）を挟んで用います。先頭に来る<samp>を「開始タグ」、</samp>のように最後に来るものを「終了タグ」と呼びます。終了タグは「</」で始めることに注意してください。 〔補足〕XHTMLでは、要素型名は全て小文字に統一され、タグの表記も同様に小文字でなければなりません。旧来のHTMLでは、タグは大文字でも小文字でも、混在していてもよいことになっていましたが、今後はタグには全て小文字を使う習慣を身につけておくと良いでしょう。 文章の構成要素を示してブラウザに適切な表現を任せることで、環境や機種に依存せずに、誰もが利用可能な情報発信ができる 文書をマーク付けする時は、これらの目的がうまく達成できるよう、適切にHTML/XHTMLを使うことが重要です。 さて、文書の構造を「要素」として示そうというわけですが、この要素の考え方が人によってまちまちでは情報を共有することができません。たとえばある人が「大見出し」と呼ぶ要素を、別の人が「セクションヘッダ」と呼んでいては、せっかくの構造表現もうまく機能しなくなってしまいます。 そこで、HTMLの文書構造を示すための「要素タイプ」がたくさん定義されています。この定義では、どの要素をどのようなタグで表現するかということに加え、それぞれがどんな親子関係になるか、どんな付加情報を持つことができるかなども定め、その組み合わせで的確に情報を表現し、共有できるようになっているのです。 細かく言うと、“段落を示すp”“本文を表すbody”などの定義によって文書の構成単位を（抽象的に）示すときは「要素タイプ」（element type = JIS用語では要素型）と呼ばれ、それが実際にHTML文書中に出現しているものを「要素」と呼びます。例えていえば、要素タイプはクッキーの「抜き型」、要素は焼き上がったそれぞれのクッキーみたいなものです。ですから、要素タイプp（抜き型）はそれぞれのDTDにつき一つしかありませんが、実際の文書に出現するp要素（クッキー）は段落の数だけ存在します。 またタグに記述する時に使うhead, bodyなどの名前は「要素タイプ名（JIS用語では要素型名）」で、厳密にはこのような使い分けがあります。以下はできるだけこの違いを区別して説明してきますが、かえって煩雑で読みにくいケースでは、「要素」という言葉で代用することもあります。 HTML文書はhead要素とbody要素で構成されます。ヘッドとは文書自身に関する情報（タイトル、関連ページなど）を納めた部分で、普通の文書でいえば表紙とか文書管理票のようなものに相当します（このような情報をメタ情報といいます）。ボディが文書の本文です。これらをHTMLで記述すると： のようになります。全体がhtmlタグで囲まれていますね。つまり、HTMLでは文書自体も“html要素”という要素として捉えているのです。 head要素とbody要素は必ずこの順序で記述します。当然ながら、1つの文書にそれぞれ1回しか使うことはできません。また、XHTML文書として多様な応用を可能にするために、html要素には名前空間を示すxmlns属性を記述します。 名前空間を示す属性は馴染みにくいかも知れませんが、常に同じなのでこれをコピーするなどして使いましょう。XHTMLとして記述するのは、HTMLのような例外が少なくかえって分かりやすい上に、ソフトウェアで処理しやすい文書とするためにも重要ですから、ぜひこの方法を採用されることをお奨めします。 〔補足〕ここではhead, bodyタグの左に余白を設けて（インデントして）いますが、これはHTMLを（人間が直接読む場合に）読みやすくする目的で挿入したものです。ブラウザがHTML文書を表示するときは、余分な空白や改行は無視されますので、どれだけインデントしても表示には影響しません。ただし空白は半角で。全角空白は普通の文字として扱われ、表示にも影響しするので注意してください。 この例をみると、html要素の中にhead要素とbody要素が含まれ、それぞれの内部にはさらに別の要素が含まれるという形になっています。このような関係にあるとき、外側の要素を親要素、その内部に含まれる要素を子要素と呼びます。親要素から子要素、さらにその子要素というつながりで、一つの文書はhtml要素を出発点（ルート要素と呼びます）とする要素のツリー構造として表現することができるのです。 開始タグと終了タグを正しく対応させてツリー構造をきちんと表現することが、ソフトウェアによる自動処理などXHTMLの可能性をきちんと発揮させるために極めて重要です。 要素どうしは自由きままに親子縁組みできるという訳ではなく、要素タイプごとに子要素になり得るもの（内容に含んでよいもの）は決まっています。例えばbody要素はhead要素の子要素となることはできず、必ずhtml要素の子要素になるというようなルールです。この関係を内容モデルと呼び、文書型定義（DTD）というHTMLの文法書で定められています。 文書を書くときに、一番最初にくるものは何でしょうか。通常は、その内容が何であるかを示す表題（タイトル）を最初に書くはずです。大学のレポートで表題がなければレポートとして失格ですし、会社の報告書に表題がなければ仕事の進め方を知らないとみなされるでしょう。 という形で表します。タイトルはその文書自身についての情報なので、ヘッド要素の中に置かれます。これまた当然ながら、1つの文書には1つのタイトルしかつけることができません。 レポートの表題が「夏休み課題」よりも「日本のウェブサイトにおけるHTMLの正確さに関する研究」といった具体的なものが望ましいように、HTMLのタイトルも具体的で分かりやすいものにするべきです。多くのブラウザでは、タイトルはウインドウのタイトルバーに表示されるだけで目立たないために「おまけ」のように思われがちですが、その文書を代表する重要な要素ですから、いい加減なものではなく、よく考えたタイトルを付けるようにしましょう。 ある程度の長さの文章を書くときは、本文の大きな内容のまとまりを分かりやすく示すために見出しをつけます。さらに長い文章の場合は、内容を細分化して大見出し、中見出し、小見出しといった具合に、段階に応じた階層的な見出しをつけていくでしょう。 この階層的な見出しを表現するために、HTMLではレベル1からレベル6まで6段階の見出し（Heading）要素タイプが用意されています。レベル1がもっとも重要な見出しで、数字の順に階層が大見出しから中見出し、小見出しといった具合に移行します。文章の構造に合わせ、レベル1から順番に使用してください。 という階層で、見出しを使い分けます（この例で、h1, h2, h3とレベルに応じてHTMLの左に余白を置いているのは最初に述べたようにHTMLそのものの読みやすさのためで、ブラウザによる表示には影響しません）。 見出し要素がきちんとつけられていると、ソフトウェアによって自動的にページのアウトライン（目次）を生成でき、効率的な文書の理解に役立ちます。たとえば、iCabはコンテクスト・メニューで「ページの概観」として見出しを階層的にリストアップしてくれます。W3CのHTML検証サービスのoutlineオプションを使って、このページのアウトラインを抽出してみるとイメージが湧くでしょう。もちろん、このアウトラインが成立するためには、見出しのレベルが適切でなければなりません。 それぞれの見出しがどの程度の大きさになるかはブラウザや設定によって異なります。場合によっては文字の大きさを変えずに、字下げや書体による見出しレベルの表現をしているかもしれません。<hn>は文字の大きさを変えるためのタグではないのです。 XHTML 2.0ではsectionとhという新しい要素タイプが導入される予定で、入れ子によって文書構造と見出しを表現できます。 音声ブラウザでは、内容が先頭から直線的に読み上げられていくので、視覚ブラウザのようにページをざっと眺めて全体像を把握することができません。そのため、ページの概要をきちんと把握するには、見出しの役割がとても重要になっています。 IBMホームページリーダー（HPR）では、「見出し読みモード」によって、文書内の見出し要素だけを順番に読んでいくことができます。このとき、見出しのレベルも合わせて読み上げられるので、文書の階層も把握可能です。 また、通常の行読みモードでも、「現在位置を確認する」という操作により、直前の見出しを読み上げさせ、現在の内容を把握できるようになっています。HPR 3.01の標準設定では、見出しにさしかかるとチャイムが鳴り、少しゆっくり読み上げられて、セクションの移行が意識できます。フォントサイズを変えるだけでは、これらの機能が働かないことは言うまでもありません。 一般に文章はいくつかの段落（Paragraph）の集まりとして構成されますね。段落は文書の内容的なまとまりを示す基本的な「要素」です。HTMLにおける段落は、ワープロ文書のように改行したり字下げしたりして示すのではなく、p要素タイプを用いて という具合になります。2番目の段落の例のように、HTML文書の途中で改行しても一続きの段落として扱われることに注意してください。HTMLでの改行は、pre要素の場合を除き、最初に述べた空白と同様に扱われます。 多くのブラウザでは段落の間に1行分のスペースが置かれますが、これはHTMLが定めた表示方法ではなく、必ずしも全てのブラウザでそうとは限りません。たとえばPDAのような小さな画面用のブラウザは、スペースを節約するために改行するだけになっているものがあります。×：p要素は「1行空白をあけるためのタグ」ではありません。 <p>タグは終了タグ</p>とペアで使います（XHTMLでは終了タグを省略することは一切できません）。p要素に限らず、タグは必ずペアで使ってください。 段落の表示の途中でどうしても強制的に改行を入れる必要がある場合は、br要素タイプを使います。最初に述べたように、ふつうのタグは このように内容を持たず終了タグもない要素は、空要素と呼ばれます。XHTMLでは、終了タグがないことを明示するために、空要素のタグを />という特別なかたちで閉じます。br要素の場合ならば、<br />となります。 通常の散文では、段落の途中で改行は不要です。改行が欲しいと思ったら、そこはたぶん新しい段落の始まりです。br要素タイプを使用する場面は、内容的には一連のもの（段落）だけれども改行した方が分かりやくなる特殊なケースに限られるでしょう。 プログラムのリストのようなものには整形済み要素のほうが適切です。XHTML 2.0ではlineという新しい要素タイプが導入され、パラグラフ内で改行が必要な「サブパラグラフ」を表現するような案が出されています。 HTMLは論理的な文書のマーク付けを念頭において設計されており、見出しやパラグラフといった要素タイプも、論理の骨格をきちんと示すためのものです。叙情的な作品や韻文などには、これらの要素タイプがしっくり来ないこともあるでしょう。そんな場合は、HTMLとして公開することで何を共有したいのかを考え、それに応じて適宜HTMLの要素タイプやスタイルシートを（あるいはXHTML2.0を）利用すればいいと思います。 HTMLは万能のマーク付け言語ではなく、表現できる情報のかたちはかなり大まかで限定的なものです。しかし、たとえ単純なかたちでも、情報を一貫した形で表現し、正確に共有できればそのメリットは図り知れません。できる範囲で見出しやパラグラフをきちんと用い、情報の共有・再利用が可能になるようこころがけたいものです。 ここまで述べてきた本文中で使われる（body要素の子要素となる）要素タイプの中で、見出しおよび段落と、最後の改行は性格が異なるので、それぞれを“ブロックレベル要素”、“インライン要素”と呼んで区別します。 改行要素が行を変えるという形で段落の中の一部分を「修飾」するように、ブロックの一部分に対して適用され、そこにある役割を与える要素 これから先に取り上げるさまざまな要素は、基本的にこの「ブロックレベル要素」か「インライン要素」かのいずれかに分類できます。文章を分かりやすくマークアップするには、ブロックレベル要素とインライン要素の違いをきちんと理解しておくことが大切です。詳しくはブロックレベル要素とインライン要素のページを参照してください。

[ 147] 文書の骨格となる基本要素 -- ごく簡単なHTMLの説明
[引用サイト]　 http://www.kanzaki.com/docs/html/htminfo11.html

引用した文章であることを表す。ブロックレベル要素。cite属性で引用元のURIを示す。多くのブラウザのデフォルトスタイルでは左右に空きができるが、インデントのための要素ではない。 引用した語句であることを表す。インライン要素。cite属性で引用元のURIを示す。対応ブラウザはq要素の前後に引用符を付け加えて表示するはずだ。 上の例では、WEBブラウザが表示できれば hoge.movというクイックタイムムービーを、できなければ hoge.png というPNG静止画を、PNG も表示できなければ JPEG画像 hoge.jpg を、それも表示できなければ文字列「ほげほげ。」を埋め込み表示する。 日本人にとってはabbr要素との使い分けが今ひとつわかりにくいが、とりあえず一般的な要素であるabbrを使っておけば問題ないようだ。 文書に画像をはりつける。要素の内容を持たない。alt属性は省略不可。これには画像が表示されない時の代わりの文字を書き、画像の説明にはtitle要素を使う。 いったん公開した後で、変更のため削除された部分を表す。インライン要素としてもブロックレベル要素としても使えるが、インライン要素として記述しているときにブロックレベルの内容を含めることはできない。 Unicodeでは文字に書字方向情報が含まれているが、これを変更したいとき、dir属性を使って上書きする。 HTML文書にスクリプトを組み込む。要素の内容がスクリプトになるが、いろいろ制約があるので外部ファイルにして読み込むようにする方がよい。スクリプトはJavaScriptとは限らない。そのため type属性でMIMEタイプを指定して使うスクリプトが何かを明示する必要がある。またスクリプトを使うにはhead要素内でmeta要素を使いデフォルトのスクリプトを宣言する必要がある。 HTML文書内でスタイルの指定をする。head要素内で使う。記述に制限があるため、独立したファイルにして link要素で読み込ませる方がよい。 HTMLでは連続した空白は無視され、改行は空白と同じものとして扱われるが、pre要素内ではそのまま扱われる。詩の表記やメールの引用などの目的で使われる。また画面の端で折り返し表示されず改行コードがでてくるまで一行で表示されることが期待できるので、行の途中で折り返されては困る、プログラムコードの表示などに使われることも多い。 いったん公開した後で、変更のため追加された部分を表す。インライン要素としてもブロックレベル要素としても使えるが、インライン要素として記述しているときにブロックレベルの内容を含めることはできない。 文書のタイトルを表す。head要素内に書く。HTML文書にはこの要素が必ず1つ存在しないといけない。 スクリプトが実行されない場合の代替内容を記述する。例えば JavaScriptでメニューを出力している場合など、(セキュリティ対策などで)JavaScriptを無効にしているブラウザでは先のページに進めなくなることがある。そのようなことがないようにnoscript要素を使って代替メニューを記述すべし。 <p>文章はウインドウの幅で折り返し表示されます。br要素(強制改行)で文章を細切れにすると見づらい表示になることが多々あります。</p> <p>たいがいの場合は、ひとまとまりの文章をpタグで囲むだけで十分です。</p> 重要な語句が初めて出てきた部分など、定義を表す。id属性でIDを振っておけばほかの個所から参照できるようになる。 <dd>油揚げをのせたうどん。ちなみにきつねそばというのは存在しない。</dd> 文字を等幅フォントにする。なぜ字を等幅にしたいか考え、他の要素とCSSを組み合わせて実現した方がよい。 <p>去年はすっかり忘れててえらい目にあったので、今年はきっちり買いに行った。</p> id属性やclass属性を併用することで文書に構造を付け加える。(複数のブロックレベル要素をひとまとめにするなど) 表の各行は、ヘッダとフッタ1つづつと、1つ以上の本体とにグループ化できる。そのうちフッタ部分がこれである。 表の各行は、ヘッダとフッタ1つづつと、1つ以上の本体とにグループ化できる。そのうちヘッダ部分がこれである。 ひとつの table の中に複数の tbody を含めることができる(ただし、列の数が同じでないといけない)。データのグループ化のために使う。 HTML文書の本文部分。この中にはブロックレベル要素(block-level と表示したもの)しか置けない。画像などのインライン要素は、段落などのブロックレベル要素に入れる必要がある。 視覚系メディアにおいては、コマ内容すべてをレンダリングするのに充分な空間がない場合に、後者を用いるのが適切であろう。 非視覚系メディアにおいては、コマに適用される見出しがコマの内容と共にレンダリングされる場合、見出しの省略形としてabbr属性が用いられるであろう。 ルビテキストをルビベースの脇にレンダリングできない場合、漢字(ふりがな) のようにルビベースとルビテキストを明確に分けるための括弧を表す。 HTML文書が他の文書とどう関係しているかを表す。head要素内で使う。要素の内容を持たない。スタイルシートやページアイコンの指定もこの要素を使う。rel属性を使ってHTML文書側から見てどんな関係かを表す。 一行だけの入力欄やチェックボックス、送信ボタンなどフォームの入力項目を作る。この形式は type属性によって決まる。 メニュー項目をグループ化する。一部のブラウザではグループ化された項目がサブメニューとして表示される。

[ 148] XHTML1.1 要素一覧
[引用サイト]　 http://rinrin.saiin.net/~aor/hms/tag

a要素に対して shape属性, coords属性を指定する場合には、インライン要素である map要素に特別にブロック要素を内包することができます。 area要素には、主要視覚ブラウザ全てが対応していますが、現状では検索エンジンのロボットがリンク先を巡回できない欠点もあります。 a要素でクライアントサイド・クリッカブルマップを作成する場合、HTML4.01 strict, XHTML1.0 strict, XHTML1.1 では map要素の直下に area要素以外のインライン要素を置くことができないため、必ず直接の子要素には、p要素や div要素などのブロック要素を 1つ以上内包しなければなりません。 このように map要素は、ブロックレベル・インラインレベルの両方を取ることができる要素に分類されますが、area要素を使用する場合は、インライン要素として扱われます。 map要素につけた名前は、img要素, input要素, object要素に指定されている usemap属性の値を参照して連携します。 1枚の画像に複数のリンク先を指定できる、クリッカブルマップ（イメージマップともいう）の作成方法を解説します。クリッカブルマップには、CGI を利用したサーバサイド・クリッカブルマップと HTML の map要素で作成するクライアントサイド・クリッカブルマップの 2種類があります。ここではクライアントサイド方式のクリッカブルマップを扱います。 先の図には、青色の四角の領域、黄色の円の領域、赤色の多角形の領域にそれぞれリンクが指定されています。 クリッカブルマップ（Clickable Map）とは、1枚の画像の中に色々なリンク先を設定しておき、クリックした位置に応じて指定のリンク先にジャンプする機能です。1枚の画像の中に複数のリンク先を設定できることから、たとえば地図の画像を利用して、都市の領域をクリックすると、その詳細なページへ移動するなど応用範囲が広く、Yahoo! JAPAN のトップページでも使用されている人気のある機能です。 img要素（または、input要素, object要素）の usemap属性は、src属性で指定した画像ファイルに適用するクリッカブルマップ設定の名称を指定する属性です。この属性値に指定する名称は、map要素に対して name属性と id属性で指定した値になり、マップ名称の文頭には、Number sign（#）を前置して、｢usemap="#マップ名称"｣の形で指定します。ただし、XHTML1.1 では Number sign（#）を前置する必要はありません。usmap属性の値は「usemap="マップ名称"」と ID名だけを指定します。 name属性と id属性は、map要素で定義するクリッカブルマップの名称を指定します。この名称を img要素（または、input要素, object要素）の usemap属性で指定することで、その画像に map要素内で定義された指定が適用されます。 area要素は、"<map>〜</map>" の中で使用して、img要素（または、input要素, object要素）で指定された画像にリンク先を指定します。area要素は、内容をもたない空要素で終了タグがありません。area要素を複数記述することで、複数のリンク先を設定できます。 area要素の shape属性は、画像にリンクを設定する際の形状を指定し、coords属性が、その領域を座標値で指定します。 座標値は、全て "x（横座標）, y（縦座標）" の順に表記します。画像の左上が座標値（0 , 0）となり、そこを原点にピクセル数で示します。coords属性の設定は、shape属性の値によって変わります。 shape属性の値に "rect" を指定した場合は、「左上のx座標,左上のy座標,右下のx座標,右下のy座標」の 4点を指定します。 "circle" を指定した場合は、「円の中心のx座標,円の中心のy座標,半径r」を指定します。 多角形の "poly" を指定した場合は、画像の左上（0 , 0）を原点に多角形の各頂点となる「x座標,y座標」をいくつも並べて指定します。 area要素の alt属性は、img要素の alt属性と同じで、画像の内容の代替テキスト（altanative text）を指定します。代替テキストとは何らかのトラブルで、指定された画像ファイルが読み込めない場合や、画像の表示に対応していない環境で閲覧している場合に、その画像の内容を代替する文章を表示します。この場合の area要素は、リンクとして機能するため、代替テキストには、通常のアンカーテキストを指定する場合と同じリンク先の説明を記述するのが良いでしょう。 注意点として、現在の検索エンジンのロボットでは、 area要素の href属性に指定されたリンク先を巡回することができません。 このため重要なナビゲーション部分にクリッカブルマップを使用することはできるだけ避けた方が無難なようです。 area要素の代わりに、検索エンジンのロボットが巡回できる a要素でも代替が可能ですが、Mac版Internet Explorer 5, Netscapte 7 以上, Firefox 1 以上, Opera 7 以上の比較的新しいブラウザ（Win版Internet Explorer 6, Win版Internet Explorer 7, Safari では無効）しか対応していないので、極端にサポート状況が落ちて、さらに a要素は、内容をもたない area要素とは違い、終了タグも必須のため下記サンプルのようにアンカー内容をもったリンクボタンが表示されるため、どうしても見た目が悪くなってしまう欠点があります。 一応、area要素に代わって、a要素に shape属性と coords属性を指定したサンプルも置いておきます。 まず、a要素に shape属性と coords属性を指定する場合は、map要素には特別にブロック要素を内容にしなければなりません。 また、a要素は空要素ではないため、area要素の alt属性で指定していた代替テキストを、a要素の内容にしなければならないので、画像の横にリンクボタンが並んだりして、どうしても見た目が悪くなります。そこで、map要素の内容となっているブロック要素を対象に CSS の text-indentプロパティに極端な負の値（"text-indent : -9999px ;" など）を指定することで一応は見た目を整えることができるでしょう。ただし、辛うじてアンカー内容をリンクボタンとして機能することができていた Win版Internet Explorer 6, 7、及び Safari では全く動作しないことになります。 なお、XHTML1.1 では、map要素の name属性は廃止されたため、画像ファイルとの関連付けには id属性のみを使用します。 この文書の最新版はw3g.jp配下の｢map要素｣に移動済みです。内容が古くなっていたり、間違いを含んでいる可能性があるので、必ず最新版を参照ください。

[ 149] map要素 HTML辞典
[引用サイト]　 http://www.seo-equation.com/html/html/map