<と>で囲まれた部分がタグ。<要素名〜>となっているほうが開始タグ、</要素名>となっているほうが終了タグ。終了タグは省略するな。したらどつく。要素名は絶対に小文字。
口の悪い、毒入りページです。慣れてない方はご注意！
以下を何も言わずにコピー。理屈を覚える必要はない。
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS" />
<title></title>
</head>
<body>
</body>
</html>
<title>と</title>の間に、そのページのタイトルを書く。必須だから、絶対に忘れるな。大抵、タイトルバーと呼ばれるウィンドウ左上の領域に表示される。
以降に述べる内容は、<body>と</body>の間に書き込んでいく。
HTMLの基本構造は、以下。
<と>で囲まれた部分がタグ。<要素名〜>となっているほうが開始タグ、</要素名>となっているほうが終了タグ。終了タグは省略するな。したらどつく。要素名は絶対に小文字。
表示されるのは、主に「内容」部分。それに対してタグ付けしていく形式を採る。
内容が常に存在しないタイプの要素の場合、以下のように書く。
最後のスラッシュに注意。これが終了タグを省略できる秘密だ。このような要素を空要素と言う。
属性は、XHTML1.0Strictで定義されているものに限り、重複しないように幾つでも指定できる。必須の属性というのもある。従って属性はオプションとは意訳できない。
要素名は、<のすぐ後ろ。間には何も挟むな。要素と属性、属性と属性の間には、空白類を最低1つ詰めろ。空白類ってのは、半角スペースとタブと改行のことだと思え。それ以上は知らなくていい。通常は半角スペース、状況に応じて改行。
属性は、イコール（=）を挟んで属性名と属性値に分かれる。属性名は絶対に小文字。属性名を省略するな。属性値は必ず引用符（""か''）で囲え。
HTMLは、すべて入れ子（ネスト）の構造。既にテンプレートの時点で、入れ子は発生している。headとbodyはhtmlに入れ子になっているし、titleとmetaはheadに入れ子になっている。こうやって要素の中に要素を入れていくことを、入れ子（ネスト）と言う。従って、終了タグが、入れ子レベルが同じかそれ以下の要素にまたがることは無い。入れ子レベルとは、一番外側の要素から見て何重に入れ子になっているかということ。
入れ子レベルに於いて、現在のレベルよりも大きいものを「下」、小さいものを「上」、1だけ大きいものを「直下」などと呼ぶ。つまり、ある要素Aに入れ子になっている要素Bは、Aから見て「下」であり、「中」でもある。
本文部分に記述できる要素は、大半はブロック要素とインラインレベル要素に大分される。前者は前後に改行が入るもの、後者はそれがないもの。
法則は簡単だ。以下の呪文（じゅもん）を3回唱えろ。
ここで言うインラインには普通のテキスト（文字列）も含まれる。ここで説明するすべての要素には、共通でidとtitleという属性を使える。titleは補足説明用などに使用。idはいわゆる「ページ内リンク」としての役割が大きいが、説明を省く。
まずブロック要素。12種類。
以下、インライン要素。14種類。
以下の2つは、ブロックにもインラインにもなれる、特殊な要素。
以上、よく使用する要素。
font？ center？ CSS使え。
div？ span？ table？ 10年早え。
frame？ frameset？ 100年早え。
form？ 1000年早え。そもそもCGIやスクリプト言語、まともに使えんのか？
bgsound？ embed？ 他の宇宙空間へ行ってこい。そこにはステキな小技のパラダイスが待っているから。
仮に以上を守ったとしても謎文字が表示される場合、テンプレート中、1行目と5行目の「Shift_JIS」を以下の順で変更してみろ。まともに読めるようになったら、取り敢えずそれで良し。識者諸君は、突っ込まないように。なぜならこのページは、ホームページの作成を騙（かた）っているに過ぎないのだから。
単に表示順序などがヘンという場合は、Another HTML Lintでも行って来い。場所は検索しろ。
以下、状況によってディレクトリという言葉はフォルダと読み替えよ。
面倒なら、すべての関係のファイルを同じディレクトリに置け。そうすれば、ファイル名を指定するだけで、互いのファイルのURLとなる。非表示の拡張子に気を付けろ。
他人のページへリンクする時は、例えばInternetExplorerなどであれば、相手ページを表示した時に「アドレス」欄に表示されているものが、そのままURLとなる。右クリックでコピー。
そのディレクトリの中に、別のディレクトリを作り、その作ったディレクトリの中のファイルを見たいとする。そのURLは、「ディレクトリ名/ファイル名」となる。例えば、images/collect.gif。
そのディレクトリの上のディレクトリのファイルを見たい場合、上がる階層分、..を指定する。例えば1階層上がる場合は../hogehoge.html、2階層上がる場合は../../mogemoge.html。
では、問題。親の名前がkeisukeであるいとこ、satokoの持つファイルdog.jpgを見に行くには、どのようなURLにするか？
このページは口が悪く作ってありますが、それは
という2点に拠ります。
このページでは、端的に、そして極端な形で
を述べています。それなりの知識をお持ちの方ならば、実はこのページがそれなりにまじめに書かれたものであることは、お分かり頂けると思います。最近、私自身も、ここで紹介されている要素とフォーム関連、div、span、表関連、link、meta、script、styleくらいしか使用しません。
このサイトのスタイルシートは、少しの皮肉を込めて、不完全且つ色調の調和がとれていない、かつての行き過ぎ strict （自称含む）サイトのデザインに合わせています。
ひっくり返せば、その手のサイトと思われない為には、この手のデザインは避けるべきだと言うことですね。
画像、スタイルシートはすべて、私のオリジナルなので、一応著作権は私に帰属します。どこかにありそうなものばかりですけどね。まぁそれを狙って作ったわけですが。
最後に、こんなところまで読んでくれたあなたに、私からの愛をプレゼント。要らないよね（笑