ウェブデザイン技能検定3級学科の解説その9

3.ウェブデザイン技術

3-1. ハイパテキストマーク付け言語および拡張可能ハイパテキストマーク付け言語(HTML・XHTML)とそのコーディング技術

1.次に掲げる記述言語について一般的な知識を有すること。

1)ハイパテキストマーク付け言語(HTML)

2)拡張可能ハイパテキストマーク付け言語(XHTML)

3)拡張可能マークアップ言語(XML)

2.以上のハイパテキストマーク付け言語における各種タグおよびコーディングについて一般的な知識を有すること。

 

ハイパーテキストマーク付け言語(HTML)について

HTMLとは

HTMLとは、HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ)

の略で、ハイパーテキストを記述するためのマークアップ言語の1つである。

World Wide Web (WWW)において、ウェブページを表現するために用いられる。

ハイパーリンクや画像等のマルチメディアを埋め込むハイパーテキストとしての機能、

見出しや段落といったドキュメントの抽象構造、

フォントや文字色の指定などの見た目の指定、などといった機能がある。

 

ハイパーテキスト (hypertext) とは、

複数の文書(テキスト)を相互に関連付け、結び付ける仕組みである。

「テキストを超える」という意味から”hyper-“(~を超えた) “text”(文書)と名付けられた。

テキスト間を結びつける参照のことをハイパーリンクと言う。

 

HTML で書かれた文書をHTML文書と言い、HTML では、まず文書型宣言を書く。

文書型宣言が無いものは、HTML の規格に従っているとはいえない。

HTML5 の文書型宣言は以下のようなものである。

 

<!DOCTYPE html>

次にHTML文書の例を挙げる。

<!DOCTYPE html>

<html lang=”ja”>

 <head>

  <meta charset=”UTF-8″>

  <link rel=”author” href=”mailto:mail@example.com”>

  <title lang=”en”>HyperText Markup Language – Wikipedia</title>

 </head> 

 <body>

  <article>

    <h1 lang=”en”>HyperText Markup Language</h1>

    <p>HTMLは、<a href=”http://ja.wikipedia.org/wiki/SGML”>SGML</a>

アプリケーションの一つで、ハイパーテキストを利用してワールドワイドウェブ上で

情報を発信するために作られ、

ワールドワイドウェブの<strong>基幹的役割</strong>をなしている。

情報を発信するための文書構造を定義するために使われ、

ある程度機械が理解可能な言語で、

写真の埋め込みや、フォームの作成、

ハイパーテキストによるHTML間の連携が可能である。</p>

</article>

</body>

</html>

 

このHTML文書は次のような構造を示している。

<!DOCTYPE html>:文書型宣言

このテキストがHTML5であることを示す。

<html lang=”ja”>:html 要素。また、lang=”ja”で、言語コード ja の言語が使われていることの明示。

<head>:head 要素(この文書のヘッダ情報の明示)

<meta :meta要素(文書のメタ情報)。ここでは、charset=”UTF-8″で、文字コードが、「UTF-8」であることを示す。

link 要素(他のリソースとの関連を明示。この場合、作者の明示)

<title lang=”en”>:title 要素(この文書のタイトル)の明示。また、この部分は en の言語が使われていることの明示。

<body>:body要素(この文書の内容の明示)

<article>:article 要素(この要素が、記事であることを明示)

<h1 lang=”en”>:h1要素(第一レベル)の見出しを明示。また、lang=”en”>で、この部分の見出しは en の言語が使われていることを明示。

<p>:p(段落)要素の明示。

<a href=”http://ja.wikipedia.org/wiki/SGML/”>SGML</a>:a(アンカー)要素(他のリソースへのアンカー)であることの明示。

hrefで、「””」内にリンク先のURLを記述する。

ちなみに、このURLの場合は、WIKIPEDIA 日本語版のSGMLの記事。

<strong>:strong 要素(強い強調であることの明示)

 

タグによって文字列を括ることによりその文字列の意味付けがなされる。

ユーザエージェントはそれを解釈して、例えば GUIによるウェブブラウザであれば

strong 要素で括られたテキストを太字として表示するなどする。

また、スタイルシートを用いることで見た目などを指定することができるようになっている。

尚、テキストエディターで改行をしても、ウェブブラウザ上では br 要素がなければ改行はされない。

 

HTMLタグとは

「タグ」とは、HTML等の中のマークアップ、すなわちHTMLやSGMLやXMLであれば、

文字「<」で始まり、文字「>」で終わっている部分のみを指し、

開始タグ~終了タグに囲まれた全体を指す用語である「要素」(エレメント)

とは異なる概念である(ただし <br/> のようなタグでは、そのタグのみが要素の全てと一致するが)。

しかし、「<br>タグで改行、<p>タグで改段落」などといった初期の粗悪な解説の影響の後に、

「正しくはタグではなく要素」という粗悪な解説によって知識を上書きされたためか、

現在もなお、混乱したままの解説等が後を絶たない。

W3C勧告の HTML4.01 仕様書にはわざわざ、要素はタグではないと明確に否定する文面がある。

 

XHTMLとは

XHTML(エックスエイチティーエムエル)とは、

Extensible HyperText Markup Language

(エクステンシブル ハイパーテキスト マークアップ ランゲージ)の略で、

SGMLで定義されていたHTMLをXMLの文法で定義しなおしたマークアップ言語である。

その仕様はHTMLと同じくW3Cによって勧告されている。

XMLを採用したため、MathMLやSVGなど他のXML文書を埋め込むことができるようになった。

なお、「eXtensible HyperText Markup Language の略である」とされることがあるが、

これは間違いであり、XはExの発音を表している

 

HTMLとの相違点

XHTMLはXMLアプリケーションである。

よって、XMLの文法に従うために、HTMLと異なる部分が存在する。

以下は、主な文法上の相違点とソースのサンプルである。

 

XML宣言を書く

XML文書であるため、文書の頭にXML宣言を書くことが奨励されている。

文字コードについては、UTF-8ないしUTF-16の場合や

HTTPなどのプロトコルで文字コードが指定されている場合は省略可能であるが、

常に付与することが推奨される。

 

<?xml version=”1.0″ encoding=”UTF-8″?>

 

要素名・属性名は小文字で書く

XMLでは大文字・小文字が厳密に区別される。

XHTML勧告の場合、要素名・属性名は全て小文字でのみ定義されていることから、

要素名・属性名は共にすべて小文字で表記しなければならない(なお、属性値はこの限りではない)。

正: <p id=”iroha”>色は匂へど 散りぬるを</p>
正: <p id=”IROHA”>色は匂へど 散りぬるを</p>
誤: <p ID=”iroha”>色は匂へど 散りぬるを</p>
誤: <P id=”iroha”>色は匂へど 散りぬるを</P>
誤: <P ID=”iroha”>色は匂へど 散りぬるを</P>

 

要素の終了タグを書く

要素は必ず開始タグと終了タグを備えていなければならない(終了タグの省略は許されない)。

正: <p>色は匂へど 散りぬるを</p><p>我が世誰ぞ 常ならん</p>
誤: <p>色は匂へど 散りぬるを<p>我が世誰ぞ 常ならん

 

空要素の終了タグも書く

空要素についても同様に終了タグを付与するか、開始タグの末尾を「/>」としなければならない。

終了タグを付与する <br></br> という表記の場合は、タグの間に空白類文字すら含めてはいけない。

また、後方互換性のために <br></br> ではなく、<br /> と表記することが推奨されている。

XMLを解釈できない古いUAで <br/> という表記に対し、

“br/” を要素名とみなし無視してしまう可能性があることを考慮し、

XHTMLでは <br /> のようにスラッシュの前に半角スペースを先行させる表記が一般的である。

正: <em>色は匂へど 散りぬるを</em><br />(推奨)
正: <em>色は匂へど 散りぬるを</em><br/>
正: <em>色は匂へど 散りぬるを</em><br></br>
誤: <em>色は匂へど 散りぬるを</em><br>
誤: <em>色は匂へど 散りぬるを</em><br> </br>

属性値はダブルクォーテーションで囲む

属性値はすべて ” ” (ダブルクォーテーション)ないし

‘ ‘(シングルクォーテーション)で囲まなければならない。

正: <input type=”text” size=”8″ />
正: <input type=’text’ size=’8′ />
正: <input type=”text” size=’8′ />
誤: <input type=text size=8 />

属性名を省略せず書く

属性名を省略してはならない。なお、これらを属性値の省略という例が存在するが正しいとはいえない。

正: <input type=”checkbox” checked=”checked” />
誤: <input type=”checkbox” checked />

 

推奨されるメディアタイプ

推奨されるメディアタイプが「text/html」から「application/xhtml+xml」に変更された。

また、HTMLで従来使用されていたtext/htmlは、XHTML1.1以降では非推奨となっている。

 

<meta http-equiv=”Content-Type” content=”application/xhtml+xml; charset=Shift_JIS” />

 

メディアタイプがapplication/xhtml+xmlの場合、meta要素のhttp-equiv属性の使用は非推奨となる。

代わりにHTTPのヘッダでメディアタイプを指示することが必要となる。

 

XMLとは

XMLとは、Extensible Markup Language(エクステンシブル マークアップ ランゲージ)の略で、

基本的な構文規則を共通とすることで、

任意の用途向けの言語に拡張することを容易としたことが特徴の

マークアップ言語の総称である。

一般的にXML(エックスエムエル)と略称で呼ばれる。

JISによる訳語は「拡張可能なマーク付け言語」。

SGMLからの移行を目的として開発された。

文法はSGMLの構文解析器と互換性を保つように

SGMLのサブセットに定められシンプルになり、

機能はSGMLに無いものが追加されている。

XML の仕様は、World Wide Web Consortium (W3C) により策定・勧告されている。

1998年2月に XML 1.0 が勧告された。

2010年4月現在、XML 1.0 と XML 1.1 の2つのバージョンが勧告されている(#バージョン)。

ちなみに、「eXtensible Markup Language の略である」と書かれることがあるが、

これは間違いであり、XはExの発音を表している。

 

SGMLとは

SGMLとは、Standard Generalized Markup Language

(スタンダード ジェネラライズド マークアップ ランゲージ)の略で、

マニュアルなどの文書のためのマークアップ言語である。

SGMLをもとにして、XMLが開発された。

SGMLを基にした応用技術の一つが、HTML である。

SGMLはこれら2つのマークアップ言語の源流であり、

現在のインターネット利用者は皆SGMLの恩恵に浴しているのである。

 

GMLとは

Generalized Markup Language(ジェネラライズド マークアップ ランゲージ)の略で、

IBMにより開発されたマークアップ言語の一つである。

後のSGMLのベースともなった。

GMLは、マクロのセットであり、

IBMのテキスト整形ツールであるSCRIPT/VSのタグ構造を持ったマークアップ言語として開発された。

SCRIPT/VSは、1980年代にIBMによって開発された

テキスト・フォーマッティング言語(文書整形言語)である。

 

まとめ

HTMLもXTHMLも元をたどれば、IBMにより開発されたマークアップ言語である、GMLが

ベースとなっていることが分かる。

GML→SGML→HTMLやXML

 

過去問

Q1.HTML とは何の略称か。適切なものを以下より 1 つ選択しなさい。

1. HTTP technologies Markup Language

2. Hyperlink telecommunications Markup Language

3. HyperText Markup Language

4. Homepage Tags Markup Language

 

Q2.各設問において、正しいものは1を、間違っているものは 2 を、該当設問の解答欄に記せ。

HTML5 では、br タグ内にスラッシュを入れて <br /> と書くと文法エラーとなる。

 

Q1の正解は3。Q2の正解は2。

 

ウェブデザイン技能検定3級学科には、HTMLでの文法などの出題傾向が高い。

GMLやSGMLについては過去に出題されたこともないので予備知識として覚えておけばいい。

とりあえず今回確実に覚えておいて欲しいのは、

HTMLとは、HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ)

の略で、要素は必ず開始タグと終了タグを備えていなければならないということである。

 


 

 

 

このエントリーをはてなブックマークに追加

マーケティング・経営ランキング

にほんブログ村 経営ブログへ
にほんブログ村

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です