文書マークアップの基本。

ここでは、実際に簡単な文書をマークアップして見る事とします。

HTMLの要素は多岐に亘り、どれから覚えていけば良いか分からない方もいるかも知れませんが、まずはここで紹介されている要素を覚えると良いでしょう。

文書マークアップの基本・目次。

実際にマークアップしてみるテキスト。

HTMLは通常の文書を電子化するための言語です。

ですから、当然元となる文書が必要になります。

ここでは、以下の文書をマークアップする事としましょう。

◎HTMLについて。
●HTMLとは。
HTMLはウェブで公開する電子文書を作る為の言語です。
HTMLはW3C(ワールドワイドウェブコンソーシアム)に依って標準規格化されております。

●HTMLの特徴。
HTMLの特徴は画像を埋め込めるとか、文字の色など表示方法を指定出来るとかではありません。
確かに画像を埋め込んだりする事も可能ですが、表示方法は寧ろ指定しない事こそ本来のHTMLの在り方です。
HTMLの最大の特徴は「ハイパーリンクが使える」「どんな環境でも読めるようになっている」この二点に尽きます。

文書マークアップの基本の流れ。

まず題名を付けましょう。

どんな文書にだって必ず題名があります。

題名が無い文書などあり得ません。

HTMLでも、題名は唯一必要不可欠な要素として定義されております。

まだ題名を決めていないのなら、マークアップの際に真っ先に決めておく必要があります。

<title>要素…文書の題名。

HTMLでは題名は<title>要素としてマークアップする事となっております。

<title>要素の場合、以下のようにマークアップします。

<title>題名</title>

この「<」と「>」で挟まれたものがタグと呼ばれるものです。

HTMLでは

  1. 要素の先頭に開始タグを
  2. 要素の末尾に終了タグを

それぞれ与える事で、人間語が分からないコンピュータでもその間にある内容が要素であると認識出来るようにします。

実際に題名を与えてみましょう。

例文について、「HTMLとは何か」と言う題名を与えるのであれば、以下のようにマークアップします。

尚、<title>要素は、全ての本文の前に書く事となっております。

<title>HTMLとは何か</title>
◎HTMLについて。
●HTMLとは。
HTMLはウェブで公開する電子文書を作る為の言語です。

(以下略)

見出しを付けていきましょう。

例文には

それぞれ与えられております。

しかし、今回◎なり●の目印を付けておりますが、コンピュータにも正しく見出しと認識出来るようにする必要があります。

<h○>要素…見出し。

HTMLでは見出しは<h○>要素としてマークアップする事となっております。

最も大きな見出しは第一等級の見出しすなわち<h1>要素としてマークアップし、以後見出しの等級に応じて第二等級見出し(<h2>要素), 第三等級見出し(<h3>要素)と言うように最大六段階の見出しとしてマークアップして行きます。

実際に見出しをマークアップしましょう。

例文について、先ず初めの大見出しと見出しをマークアップしましょう。

すると以下のようになる筈です。

<title>HTMLとは何か</title>
<h1>HTMLについて。</h1>
<h2>HTMLとは。</h2>
HTMLはウェブで公開する電子文書を作る為の言語です。

(以下略)

段落を付けましょう。

通常の文書では見出しと共に段落が必ずといって良いほど用いられます。

例文では段落を改行で区切りましたが、実際にはこれもマークアップする必要があります。

<p>要素…段落。

HTMLでは段落は<p>要素としてマークアップする事となっております。

実際に段落をマークアップしましょう。

例文について、ここまでの知識の範囲で最後までマークアップして行くと、以下のようになるでしょう。

<title>HTMLとは何か</title>
<h1>HTMLについて。</h1>
<h2>HTMLとは。</h2>
<p>HTMLはウェブで公開する電子文書を作る為の言語です。</p>
<p>HTMLはW3C(ワールドワイドウェブコンソーシアム)に依って標準規格化されております。</p>

<h2>HTMLの特徴。</h2>
<p>HTMLの特徴は画像を埋め込めるとか、文字の色など表示方法を指定出来るとかではありません。</p>
<p>確かに画像を埋め込んだりする事も可能ですが、表示方法は寧ろ指定しない事こそ本来のHTMLの在り方です。</p>
<p>HTMLの最大の特徴は「ハイパーリンクが使える」「どんな環境でも読めるようになっている」この二点に尽きます。</p>

さて、今まで文書構造に沿ったマークアップをしてきましたが、ハイパーリンクもまた重要な機能です。

例文の途中のW3C(ワールドワイドウェブコンソーシアム)について、このフレーズをW3Cの公式サイト(www.w3.org)へリンクするアンカーにしてみましょう。

アンカーとはハイパーリンクとなっているフレーズ、すなわち他のリソースと関連付けられているフレーズの事です。

HTMLでは、アンカーは<a>要素として定義されております。

具体的には以下のようにマークアップする事で、アンカーを実現する事が出来ます。

<a href="リンク先のURL">(アンカーとなるフレーズ)</a>

ここで、<a>要素の開始タグに

すなわち

が与えられている事に注目してください。

<a>要素は内容となるフレーズをhref属性で示されるURLに関連付けられたものとします。

URLはサイト外であれば「http://」などのスキーム名で始まるURLを記述する事となりますが、サイト内であれば、相対URLと呼ばれる簡単な記述方も利用出来ます。

実際にアンカーをマークアップしましょう。

それでは、実際に例文の途中のW3C(ワールドワイドウェブコンソーシアム)について、このフレーズをW3Cの公式サイト(www.w3.org)へリンクするアンカーにしてみましょう。

<title>HTMLとは何か</title>
<h1>HTMLについて。</h1>
<h2>HTMLとは。</h2>
<p>HTMLはウェブで公開する電子文書を作る為の言語です。</p>
<p>HTMLは<a href="http://www.w3.org">W3C(ワールドワイドウェブコンソーシアム)</a>に依って標準規格化されております。</p>

(以下略)

マークアップのまとめ。

以上で例文の最低限のマークアップが完了しました。

例文は以下のようにマークアップされた事でしょう。

<title>HTMLとは何か</title>
<h1>HTMLについて。</h1>
<h2>HTMLとは。</h2>
<p>HTMLはウェブで公開する電子文書を作る為の言語です。</p>
<p>HTMLは<a href="http://www.w3.org">W3C(ワールドワイドウェブコンソーシアム)</a>に依って標準規格化されております。</p>

<h2>HTMLの特徴。</h2>
<p>HTMLの特徴は画像を埋め込めるとか、文字の色など表示方法を指定出来るとかではありません。</p>
<p>確かに画像を埋め込んだりする事も可能ですが、表示方法は寧ろ指定しない事こそ本来のHTMLの在り方です。</p>
<p>HTMLの最大の特徴は「ハイパーリンクが使える」「どんな環境でも読めるようになっている」この二点に尽きます。</p>

総括しますと、HTMLでは

  1. 先ず第一に適切な題名を与え、
  2. 続いて本文の見出しと段落を順次マークアップして行き、
  3. 必要に応じてアンカーでハイパーリンクを実現する

のが基本中の基本と言えます。

HTMLに於ける注意事項。

HTMLでのマークアップに於いて、HTMLの仕様上注意すべき事を挙げておきます。

HTMLの仕様とは関係ないものの、制作する側の環境, HTML文書を配信するサーヴァの環境, 及び閲覧する側の環境を考慮した場合に注意すべき事、すなわち、

については、実際にマークアップする際の注意事項に纏めておりますので、併せてご覧ください。

<や>を記述する場合。

HTMLでは

事から、これらの記号をそのままテキストとして記述するのは拙いと言う事が分かると思います。

この他にも直接書くと拙い文字があり、これらの文字を記述するために文字参照と呼ばれる記法があります。

タグの書き方。

タグに於いては、以下のルールに従って記述してください。

基本的に半角文字を用いる

属性の値で特に値が定義されている場合も必ず半角で記述してください。

また、URLも半角文字で記述しなければなりません。

要素名と属性名は小文字で記述する
XHTMLでは大文字と小文字を区別するため、必ず小文字で書かなければなりません。
属性の値は必ず"で囲む
仕様では"または'で囲む事となっておりますが、古いブラウザに'が正しく認識出来ないものがありますので、"の方が安全でしょう。
<と要素名または/の間には空白を入れない

例えば、

< h1>

等と書くと、<h1>要素の開始タグと認識出来なくなります。

前後のページ。

しらぎくのウェブサイト作成入門サイトマップ

ページ外へのご案内。

marguerite.site@gmail.com