あなたは記述の意味がよく理解できていないかも知れません。HTMLは構造記述のための文法なので、意味は明白です。HTMLの基本的なところを少しと、基礎htmlの各部位の説明をします。基礎htmlはメモ帳などのテキストエディタもしくはHTMLエディタでひらいて編集することが出来ます。考え方もしかしたら、今まであなたはHTMLを描く段階で既に「センタリングしたい」とか「ここの文字を太字にしたい」とか「ここの文字色を変えたい」と考えて、その方法を探して、一番最初に見つけたやり方をまる写しして、HTMLにペーストして、ブラウザで表示してそう見えれば成功、次の行を書く......というやり方をしてきたかもしれません。HTMLは、「意味」を伝えるための文法なので、「中央寄せ」とか「太文字」とか「赤い色」という物理的で視覚に依存した考え方はそぐいません。マークアップをしていく際は見栄えの実現については忘れてください。「他の部分と見栄えを変えたいのは何故か?」という目的の部分がHTMLにとっては重要です。センタリングしたいのはそれが「見出しだから」であったり、文字を太字にしたいのはその部分を「強調したい」からだったり、文字色を変えたいのはそれが「他の人の言葉(引用文)だから」だったりするはずです。デザイン性は後の問題で、HTMLを作成するの段階ではブラウザでいちいち表示する必要さえありません。テキストを書いてるのだ、と思ってください。コメント<!--内容--><!--から-->までの内容はコメントです。ソースを参照しないと内容は見えません。<!や>と--の間にスペースや改行があったり、内容にハイフンが二つ並んだりすると、環境によってはコメントが正しく認識されず、コメントが見えてしまったり、後続の内容が見えなくなったりすることがあります。書き換えたり書き足す際は注意してください。開始タグと終了タグ<と>でくくったものをタグといいます。上記の例で開始タグの<em>と終了タグの</em>で囲われている内容という文字は強調された内容であると示されています。4.01では、要素の存在と要素の内容の範囲(はじまりや終わり)が自明である場合に限って、タグを省略可能です(ブラウザが補ってくれます)。省略できないはずのタグが書かれていないと、構造がちぐはぐになって、レイアウトが崩れることもあります。省略可能であっても、ブラウザによっては処理が異なる場合があります。覚えていないうちは、全てのタグを省略せず必ずつけるようにしたほうが、間違いがなく簡単で安全ですし、構造を考える癖をつける練習になるかと思います。多くの要素は複数の要素を入れ子にして使うことができます。<p>文章の中で<em>強調する中で<strong>更に強調</strong></em></p>ですが、なんでもかんでもいいというわけではなく、いくつか決まりがあります。<li>リスト</li><br></ul><dl>文章</dl>IDとclass基礎HTML中に、id="××"やclass="××"という部分が複数出てきますが、××の部分が要素を識別するための名前です。それによってそれぞれをデザインをしますので、不用意に書き換えないでください。classは要素の種類や分類を現せます。同一文書内(一ページ内)で複数登場できます。(ex.一ページ内にあるグローバルナビゲーションとサブメニューとパンくずリストにnavigationというclassをつける)IDは一意的な識別子で、同一文書内(一ページ内)で一度しか登場できません。一度しか登場しないようがないものにIDをつけます。(ex.一ページ内に複数あるナビゲーションの内、唯一のグローバルナビゲーションにGLOBAL_NAVIGATIONというIDをつける)基礎HTMLで使われているclass何回でも使えますが、CDPの基礎HTMLと関係ない部分で使うとデザインが克ちあう場合があり、注意が必要ですtextmodori基礎HTMLで使われているID一切新たに登場してはいけませんPAGETOPHEADERPANMENUMENU01~KIZIFOOTERFOOTER01~まとめ決まりごとや覚えることが多くて大変そうに感じるかもしれません。上で「間違いです」と指摘しているような、またはそれ以外でHTMLの不正があったとしても、ブラウザはミスを補ったり無視をして内容を表示してくれることが多いです。ブラウザがどう補ったり無視するかの統一した決まりはありません。不正に対しエラーを返すブラウザがないとも限りませんし、CSSと組み合わせることで結果として表示がされなかったりレイアウトが崩れるなど閲覧に支障が出る可能性もあります。日本語でも、誤字脱字があったり文法に間違いがあれば、なんとなく文脈を読みとれたとしても、読みづらいし、もしかしたら意図したこととは違う意味で伝わってしまうかもしれません。HTMLでもそれは同じです。全て覚えるのは大変ですが、リファレンスを確認したり、できたHTMLをチェッカーで構文チェックしたりして、確認してください。"http://www.w3.org/TR/html4/loose.dtd">このhtmlがどのような決まりにしたがって記述されているかを示しています。Transitionalの規則に従ってHTMLを作成します。基本的にはこの文に手を加えないでください。HTML4.01では冒頭で必ず書かなければなりません。lang="ja">html開始。<html>から</html>までの内容がHTML文書だというマークアップです。lang="ja"で、内容が日本語(ja)で書かれてあるあることを意味します。日本語以外をメインに使う場合は、一文中のjaを該当する言語コードに変更してください。<head>head開始。<head>から</head>までの内容が、ページのタイトルや特徴など、ヘッダ情報であるというマークアップです。charset=Shift_JIS">文字コードの指定。ある文字コードのなかのShift_JISを使用するという宣言です。違う文字コードを利用する場合は、一文中のShift_JISを該当する文字コードに変更してください。content="text/css">スタイルシート言語指定。そのページ内でstyle要素かstyle属性を使わないなら削除しても構いません。content="width=device-width">表示領域の幅をデヴァイスの幅に合わせる指定。スマートフォンなどPCより表示領域が狭い環境への対応のために用いられますが、現状配布されているCDP用のCSSの多くがそれに対応していないため、最初はコメントアウトされています。スマートフォンに対応したCSSを利用する等、モバイルフレンドリーなサイトにしたい場合はコメントアウトを削除して有効にしてください。content="IE=edge">IEを最新の標準モードでレンダリングさせる指定。古いIEにのみ対応しているCSSを使う場合は、よりバージョンが上のIEで崩れる可能性があり、IE=edgeを変更することで対応できる場合もありますが、そのCSSの使用自体をお勧めしません。追加)<title>サイトの名前</title>サイトの題名。あなたのサイトの名前やページの題名に書き換えてください。HTML4.01では省略不可で必ず書かなければなりません。ブラウザの上部やタブに表示されたり、ブックマーク(お気に入り)に登録する際の名前などにも用いられます。分かりやすく簡潔な指定が好ましく思われるでしょう。href="csstemplate/style.css">該当のhtmlファイルから見て、同じ階層にあるcsstemplateフォルダに入っているstyle.cssを呼び出す指定です。あなたが新しくフォルダを作成したなど階層によっては変更する必要があります。他の<link>や<meta>など必要に応じて、<link>(RSSやFaviconの導入など)や<meta>(概要やキーワードの指定や検索ロボットのクロール制限など)を追記したり、JavaScriptの読み込みなど行ってください。</head>head終了。<body>body開始。<body>から</body>までの内容は、実際に表示される部分です。id="INDEX">にします。id="PAGETOP">サイト内容全体に関する唯一のグループを開始します。ちなみにTOPへの戻りリンク先はここを指しています。<div>から</div>までの内容はグループ化されます。同名のIDを持ったグループは一つの文書内(一ページ内)に複数登場できません。id="HEADER">ヘッダー情報に関する唯一のグループを開始します。title</h1>サイトの題名。<h1>から</h1>までの文言はHTML文章中で最も重要で大きな見出しであることを意味します。あなたのサイトの名前に書き換えてください。alt="サイト名"></h1>logo.gifには画像パス(URL)、サイト名には貴サイトのサイト名を代入してください。alt属性の値は画像が表示されないときや非グラフィカルブラウザでの閲覧時に参照され、HTML4.01では必須属性のため、省略不可です。id="PAN">パンくずリスト。今サイト内のどこにいるかをツリー構造で示します。<li>index</li>あなたのサイトの最初のページ(index)から編集中のページ(htmlファイル)までに辿るページを羅列してリンクしていきます。パンくずリストはページごとに異なります。あなたのサイトにあわせて変更する必要があります。</ul>パンくずリスト終了</div>ヘッダー情報のグループ終了<hr><hr>は、罫線(水平線)を引きます。HTML4.01では特に論理的に区切りであるというような意味を持ちませんが、人間の視覚的に一区切りつけられます。id="MENU">サイトメニューに関する唯一のグループを開始します。<h2>menu</h2>MENUの題名。<h2>から</h2>までの文言はHTML文章中で<h1>に次いで2番目に重要な見出しであることを意味します。<ul>menuリスト開始。href="index.html">index</a></li>メニューにはひとつひとつ名前(ID)が付けられ、順にMENU01、MENU02、MENU03......となります。項目を増やす場合は、MENU05、MENU06...と続きます。編集中のページ(htmlファイル)のメニューには、class="menu-on"を記述します。メニューはサイトにより異なりますので、あなたのサイトにあわせて内容を変更したり項目を増減する必要があります。alt="インデックス"></a></li>index.gifには画像パス(URL)、インデックスにはメニュー名を代入してください。alt属性の値は画像が表示されないときや非グラフィカルブラウザでの閲覧時に参照され、HTML4.01では必須属性です。href="tuika2.html">追加2</a></li>メニュー項目を減らす場合は<li>から</li>までの一行ずつを削除します。id="KIZI">各ページのメイン内容(記事)全体に関する唯一のグループを開始します。<h2>このテンプレートについて</h2>メイン内容の個々の記事のタイトル。class="text">メイン内容の個々の記事のグループです。このdivはh2要素の直下から開始し、次のh2要素まで続きます。記事の文章(内容)を書きます。class="modori">ページの一番上へ戻るリンクのリスト(modori)開始。この部分はdiv.textの末尾に位置し、ワンセットで記述してください。href="#PAGETOP">TOP</a></li>ページの一番上へ戻るためのリンク。</ul>modori終了</div>個々の記事のグループの終了。<hr>罫線<h2>~<hr>記事が複数ある場合は<h2>から<hr>までをリピートします。</div>メイン内容(記事)全体のグループ終了。忘れないようにしてください。id="FOOTER">フッター情報に関する唯一のグループを開始します。<h2>連絡先</h2>FOOTER見出し。<ul>FOOTERリスト開始。href="#PAGETOP">TOP</a></li>ページの一番上へ戻るためリンク。フッターにはひとつひとつ名前(ID)が付けられ、順にFOOTER01、FOOTER02、FOOTER03......となります。項目を増やす場合は、FOOTER04、FOOTER05...と続きます。id="FOOTER05">追加2</li>フッター項目を減らす場合は<li>から</li>までの一行ずつを削除します。href="mailto:mail@address.com">mail</a></address></li><address>はそのHTML文書の内容に対する連絡先を表します。ページの責任者への連絡先の存在はそのページの有用性の一つの証明になりますし、閲覧者とサイト作成者が連絡をとりあうことでサイトをよりよいものにできるかもしれません。『mail@address.com』の部分をあなたのメールアドレスに書き換えるか(ただしこの方法はスパムの被害にあう可能性を高める場合があります)、スパム等の心配がある場合はメールアドレスが記述してあるページやメールフォームが存在するページまたは掲示板などへのリンクをはってください。Designplate</a></address></li>この企画へのリンク。</ul>FOOTERリスト終了。</div>フッター情報のグループ終了。文末</div>サイト内容全体のグループ終了。忘れないようにしてください。</body>body終了。</html>html終了。必要なのは、見出しとその内容です。CDPを使うにあたってとりあえずそこを意識してください。id="KIZI">以降から、記事ブロック終了の</div>のあいだにある記述を消します。以下のコードを書き込みます。href="#PAGETOP">TOP</a></li></ul></div><hr>どんな記事を書くか、見出しを考えてください。思いついたら書き込みます。記事内容を書いてから考えても構いません、次の項目を見てください。class="text">の直後から書きます。class="text">▲月■日に友達と、先日放映開始した「○×」を見に行きました。ネタバレしてるので、内容を知りたくない人は気をつけてください。私はAがBだったことにびっくりしました。帰り道で読んだ「雑誌名」には『AがBなのはCの演出において失敗だった』って書いてあったけど、私は面白いと思います。href="#PAGETOP">TOP</a></li></ul></div><hr>文章の構造を考え、その文字列が文中においてどんな要素であるか考えます。</話題>」を見に行きました。内容を知りたくない人は気をつけてください。私はAがBだったことにびっくりしました。</引用>』って書いてあったけど、私はいいと思います。href="#PAGETOP">TOP</a></li></ul></div><hr>マークアップします。見出しはh3からです。class="text"><p>▲月■日に友達と、先日放映開始した「<dfn>○×</dfn>」を見に行きました。</p><p><em>ネタバレしてる</em>ので、内容を知りたくない人は気をつけてください。<li>BがCじゃなかった</li></ul><h3>感想</h3><p>私はAがBだったことにびっくりしました。</p><p>帰り道で読んだ<cite>雑誌名</cite>には『<q>AがBなのはCの演出において失敗だった</q>』って書いてあったけど、私は面白いと思います。href="#PAGETOP">TOP</a></li></ul></div><hr>もう一つ記事を書く場合は、2項目目からリピートします。挿入箇所は<hr>の直後です。書いてあったけど、私はいいと思います。し終わったら、HTMLチェッカー等タイプミスや入れ子に間違いがないか一度確認してみてください。『100点満点でなければならない』という意味ではなく単純なケアレスミスの防止ですので、細かい点数はさほど気にしなくて大丈夫です。HTML-lint一度に多くのことを覚えるのは難しいです。わかっているつもりでも、案外勘違いで覚えて間違ったままになってしまっていることもあります。無理に多くのことを覚える(或いは覚えたつもりになる)必要はありません。一つ一つ、確認してください。不明点があれば、検索サイトで検索するか、FAQやサポートを確認してください。Designplate。