それでは実際のソースコードを元にエレメントやアトリビュートなどの解説を行っていきましょう。次のサンプルは「ハッキングラボラトリ」のWebサイトです。html、head、meta、title、body、div、spanエレメントと共通アトリビュートはすでに解説済みなため省略します。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
<meta http-equiv="Content-Language" content="ja">
<meta name="keywords" content="ハッキング,プログラミング,hacking" lang="ja">
<meta name="description" content="ハッキング技術についての解説を行うWEBサイト">
<title>ハッキングラボラトリ - トップページ<v/title>
</head>
<body>
<h1>ハッキングラボラトリ トップページ</h1>
<hr title="ここからメニュー">
<h2>メニュー</h2>
<ul>
<li><a href="about.html">このサイトについて</a></li>
<li><a href="hack.html">ハッキング技術</a></li>
<li><a href="source.html">ソースコード</a></li>
</ul>
<hr title="ここからコンテンツ">
<h2>あいさつ</h2>
<p>
ようこそいらっしゃいました。これは私の<em>はじめての</em>WEBサイトです。
まず始めに<a herf="about.html">このサイトについて</a>をお読みください。
</p>
</body>
</html>
見出しとそのレベルを表します。h1が最も重要な見出しで数字が下がるにしたがって重要さが低い見出しになります。決して文字の大きさを表すエレメントではありません。
ブロックレベルエレメントで開始タグ、終了タグともに必須です。コンテントはインラインのみです。
水平線を配置します。水平線はどういった目的で引かれているかわかりにくいため、titleアトリビュートで補足することが勧められます。
ブロックレベルエレメントで開始タグは必須、終了タグを書くことは禁止されています。
順不同のリストを定義します。順序つきリストを定義する場合はolエレメントを使います。ulはリスト定義だけですので、項目は別に定義する必要があります。項目を定義するにはliを使います。
ブロックレベルエレメントで開始タグ、終了タグともに必須です。コンテントはひとつ以上のliエレメントだけです。最低でもひとつliエレメントが必要なため、ulエレメントだけが出現することもできません。
リスト項目を表します。単体で用いることはできず、ul、olエレメントのコンテントとしてのみ現れます。
ブロックレベルエレメントで開始タグは必須、終了タグは省略可能ですが省略するべきではないでしょう。コンテントはブロックレベルとインラインです。
ハイパーテキストの最大の特徴であるリンクを実現するエレメントで、アンカーを表します。よく利用されるアトリビュートには次のようなものがあります。
リンク先のURIを指定します。
リンク元となるアンカー名を指定します。idアトリビュートも同じように使用することができます。
リンク先の言語を明示します。
リンク先のMIMEタイプを明示します。リンクはHTML文書だけに限らず、画像や動画などにも設定できるため、MIMEタイプを明示するアトリビュートがあります。
リンク先の文字セットを明示します。
この文書から見たリンク先の文書の関係を指定します。例えばシリーズになっているなら、ひとつ前の文書などです。
リンク先の文書から見たこの文書の関係を指定します。例えば例えばシリーズになっているなら、ひとつ先の文書などです。
タブを押したときのリンクがフォーカスされる順番を指定します。1から数字が小さい順にフォーカスされます。詳細はいずれ、アクセシビリティについてで解説します。
リンクに[アクセスキー]＋[英字１文字]でリンクをクリックした時と同じようにアクセスすることができるショートカットを指定します。詳細はいずれ、アクセシビリティについてで解説します。
リンクはWWWの基本概念として勝手にどこにでもはるものなので、決して「リンクは勝手にはらないでください」などと書かないでください。WWWの考案者であるTim Berners-Leeは「Links and Law: Myths」の中で、「リンクは著作権を侵すものではなく、事前報告は必要ない」、「リンクになんらかの支払いを求めてはならない」、「リンクは他人のプライバシーを侵害することはない」と結論付けて
います。詳しくはLinks and Law: Myths（http://www.w3.org/DesignIssues/LinkMyths.html）を参照してください。
インラインエレメントで開始タグ、終了タグともに必須です。コンテントはaエレメントを除くインラインです。
段落を表します。pエレメントで囲んだコンテントがひとつの段落になります。コンテントはインラインのみなので、<p><hr></p>ような書き方は文法違反です。
ブロックレベルエレメントで開始タグは必須、終了タグは省略可能ですが省略するべきではないでしょう。コンテントは前述の通りインラインのみです。
次にabout.htmlを見て見ましょう。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
<meta http-equiv="Content-Language" content="ja">
<title>ハッキングラボラトリ - このサイトについて</title>
</head>
<body>
<h1>ハッキングラボラトリ このサイトについて</h1>
<hr title="ここからコンテンツ">
<h2>概要</h2>
<p>
このサイトはHTMLの解説用に作られたサイトです。
主にハッキング技術とゴミプログラムのソースを公開しています。
</p>
<h2>リンクとバナー</h2>
<p>
リンクは<abbr title="World Wide Web">WWW</abbr>の発案者
Tim Berners-Leeの主張に従って、どこでも<em>ご自由に</em>どうぞ。
報告も<strong>必要ありません</strong>。
バナーは次のものを用意しております。<br>
<img src="banna.jpg" alt="バナー" height=60 width=180>
</p>
</body>
</html>
コンテントが省略された文字であることを明示します。titleアトリビュートでフルスペルを記述しておきましょう。コンピュータ技術には略語が多いので、非常によく使われるエレメントです。
インラインエレメントで開始タグ、終了タグともに必須です。コンテントはインラインのみです。
強調を表します。ちょっと強めに読むような感じです。
インラインエレメントで開始タグ、終了タグともに必須です。コンテントはインラインです。
とても強い強調を表します。叫ぶような感じです。
インラインエレメントで開始タグ、終了タグともに必須です。コンテントはインラインです。
強制改行を行います。通常ブラウザは適切な位置で自動的に改行してくれますが、それ以外で改行したい場合に用います。例えば同じ段落中で改行したい場合や詩を書く場合などです。決して一行空けるためにbrを連発しないでください。
インラインエレメントで開始タグは必須、終了タグを書くことは禁止されています。
インラインの画像を埋め込みます。srcとaltは必須アトリビュートで、それぞれ画像のURIと代替テキストを指定します。代替テキストは文字ブラウザや画像取得エラーなどで画像が表示できない場合に表示されるテキストです。この2つ以外では次のようなアトリビュートが主に用いられます。
URIをバリューにとり、より詳しい説明へのリンクを指定します。
画像の高さを明示します。高さと横幅は指定するほうがよいとされています。
画像の横幅を明示します。高さと横幅は指定するほうがよいとされています。
インラインエレメントで開始タグは必須、終了タグを書くことは禁止されています。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
<meta http-equiv="Content-Language" content="ja">
<title>ハッキングラボラトリ - ソース - 挨拶プログラム</title>
</head>
<body>
<h1>ハッキングラボラトリ 挨拶プログラム</h1>
<hr title="ここからコンテンツ">
<h2>概要</h2>
<p>挨拶します。char型のstring配列に文字列を格納し
<dnf><a href="#comment01">printf関数</a></dnf>で出力しています。</p>
<h2>ソース</h2>
<pre>
<code title="挨拶プログラムのソース">
#include <stdio.h>
int main()
{
char <var>string[]</var> = 'Hello, hackers!!';
printf ("%s", <var>string</var>);
return 0;
}
</code>
</pre>
<h2>実行</h2>
<p>このプログラムは次のように実行します。</p>
<p>$ <kbd>./hello.exe</kbd></p>
<p>実行結果は次のようになります。</p>
<p><samp>Hello, hackers!!</samp></p>
<h2>注釈</h2>
<h3 id="comment01">printf関数</h3>
<blockquote cite="http://ruffnex.oc.to/defolos/"><p>
標準入出力関数のひとつ。stdio.hをインクルードしておく必要がある。
</p></blockquote>
<p>参考文献:<cite>http://ruffnex.oc.to/defolos/test.html</cite></p>
</body>
</html>
これは文字参照のうちの文字実体参照です。特殊な文字はそのままではソース中に書くことができないので、このような文字参照を利用します。文字参照はユーザーエージェントで表示されるときには文字参照が指し示す文字に置き換えられています。この例ではそれぞれ<と>に置き換えられます。文字参照には数値文字参照と呼ばれる&文字番号;のように文字番号で指定する方法と文字実体参照と呼ばれる&文字実体;のように文字実体で指定する方法の2通りあります。アルファベットの「a」を指定する場合、文字番号で指定するとåのように何を表しているか一見わかりませんが、文字実体で指定するとåのようにわかりやすくなります。
詳細はW3Cの24 Character entity references in HTML 4（http://www.w3.org/TR/html4/sgml/entities.html）を参照してください。
他の場所で定義されている用語であることを表します。注釈などに用いるものだと思っています。
インラインエレメントで開始タグ、終了タグともに必須です。コンテントはインラインのみです。
整形済みのテキストであることを表し、改行やスペースをそのまま表示します。preの中でもマークアップは有効なため、次のようにマークアップすることができます。
<pre>
クラッカーはハッカーと違い、<em>破壊活動</em>や
<strong>非生産的</strong>なことに技術を使う。
<pre>
ブロックレベルエレメントで開始タグ、終了タグともに必須です。コンテントはインラインですが、imgやsub（上付き文字）などの整形済みという概念に反するエレメントは書けません。また、コンテントにタブ文字を書くことは非推奨です。
このエレメントはハッカーの方に是非活用してほしいエレメントです。コンピュータプログラムのソースコードを表すエレメントです。
インラインエレメントで開始タグ、終了タグともに必須です。コンテントはインラインのみです。
プログラムの変数のように値が変わり得るものを表します。ソースの解説などで用います。
インラインエレメントで開始タグ、終了タグともに必須です。コンテントはインラインのみです。
キーボードからの入力を表します。ソフトの使い方解説などでユーザが入力する部分に使います。
インラインエレメントで開始タグ、終了タグともに必須です。コンテントはインラインのみです。
プログラムなどの出力サンプルを表します。コードのサンプルはcodeエレメントを用います。これもコンピュータ技術の解説などではよく用いられるエレメントです。
インラインエレメントで開始タグ、終了タグともに必須です。コンテントはインラインのみです。
他の権文献からの引用や参考などの出典を表します。文献名やURIなどがコンテントになり、論文やレポートで用いるべきものでしょう。
インラインエレメントで開始タグ、終了タグともに必須です。コンテントはインラインのみです。
引用文を表します。句の引用を表す場合はqエレメントを使います。ブラウザの中にはインデントで表示するものがありますが、インデント目的でこのエレメントを使うと環境によっては「次の文章は引用です」と表示される可能性もあります。また、コンテントはbodyエレメントと同じなので直接文章を書くことはできません。指定できるアトリビュートには次のようなものがあります。
引用の出典を記載します。文献名やURIを記述することになります。
ブロックエレメントで開始タグ、終了タグともに必須です。コンテントはブロックレベルエレメントとSCRIPTです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
<meta http-equiv="Content-Language" content="ja">
<title>ハッキングラボラトリ - ハッキング技術</title>
</head>
<body>
<h1>ハッキングラボラトリ ハッキング技術<h1>
<hr title="ここからコンテンツ">
<h2></h2>
<dl>
<dt>ポートスキャン</dt>
<dd><p>
ホストのどのポートが開いているかを調べることで、そのホストが
どういったサービスを提供しているのかを予測します。
クラッキングの予備調査としての位置付けで法律に触れる恐れもあります。
</p></dd>
<dt>スニッフィング</dt>
<dd><p>
ネットワーク上を流れるパケットを盗聴する行為です。
TELNETなど平文で通信を行うプロトコルでスニッフィングだけで
パスワードが盗まれる危険性もあります。
</p></dd>
<dt>ソーシャルエンジニアリング</dt>
<dd><p>
電話などで巧妙な身分偽証と口先のテクニックで相手をだまし、必要な情報を
入手する行為です。Glazheim Lykeionでは次のように表現しています。
<q cite="http://ruffnex.oc.to/defolos/social.html">ソーシャルエンジニアリング
とは巧妙な詐欺のようなものである</q>
さらにゴミ漁りやピッキングなどもこれに分類されます。
</p></dd>
</dl>
</body>
</html>
定義型のリストを定義します。定義型とは例のように、ある用語についての解説などのように、用語と解説が交互に出てくるようなリストのことです。
ブロックレベルエレメントで開始タグ、終了タグともに必須です。コンテントはひとつ以上のdtあるいはddです。
定義型リストの用語の部分を表します。dlのコンテントとしてのみ出現します。
開始タグは必須、終了タグは省略可能ですが省略するべきではないでしょう。コンテントはインラインのみです。
定義型リストの解説の部分を表します。dlのコンテントとしてのみ出現します。
開始タグは必須、終了タグは省略可能ですが省略するべきではないでしょう。コンテントはブロックレベルエレメントとインラインです。
引用句を表します。グラフィカルなユーザエージェントではコンテントの言語に応じた引用符で囲まれて表示されるはずです。例えば日本語の場合引用符は「」です。また、二重に引用されることもあり、その場合も正しい引用符の関係で囲まれることになります。
仮に言語が英語であった場合は次のようになります。
指定できるアトリビュートは次のようなものがあります。
引用の出典を記載します。文献名やURIを記述することになります。
インラインエレメントで開始タグ、終了タグともに必須です。コンテントはインラインです。