作成日:2017年07月08日HTMLは以下のような構造になっています。タグは、HTML文書であることを示します。文書が始まることを表します。要素がそれぞれ一つづつ必要です。属性で言語を指定することができます。・・・・・・</html>言語により以下のような値を指定します。要素の中には、以下のような要素を記述します。要素の中で必ず一度だけ指定します指定しなかったり、複数指定することは認められません(必須)ブラウザのタイトルバーに表示されるほか、音声ブラウザの読み上げ、検索サービスでの検索結果ページに表示されます具体的でわかりやすい内容にします。製作者が指定したいデータをメタ情報として定義します。要素よりも後に指定します。代表的なものには以下のようなものがあります。基本的なことについて解説しています。ページの説明を記述します。的にも設定することが望ましいです。以下のようなことを考慮すると良いと思います。最大124文字程度(60~100文字前後)が良いとされているようです。他のページとは重複しない異なる内容にします。中に2~3回、上位表示させたいキーワードを入れるというのが最適と言われています。ページ内容と関係の無いことは記載しないようにします。多く入れすぎないほうが良いようです(1~5個程度)。要素)、本文の見出しの内容なども考慮して決めるのが良いと思います。属性の値で指定した形式でページを一定間隔で再読み込み(更新)したり、異なるページにリダイレクトしたりすることができます。閲覧者の意に反した強制的な再読み込みは避ける必要があります。リダイレクトに関しては対応しない環境のために、リダイレクト先のリンクもあわせて表示するなどの配慮が必要です。href="http://xxxx.com/newpage.html">newpage.html</a>に移動します。<p>自動的に移動しない場合は、上記のリンクをクリックしてください。要素(文書間関係)そのページから見て、ほかのページやファイルがどのような役割かを定義する要素です。ファイル、目次やヘルプにあたるページ等を指定します。指定することで読み込むことができます外部ファイルは以下のようにして読み込むことができます。要素の閉じタグ(</body>)の直前で読み込む場合も多いです。本文を構成するさまざまな要素があります。ブロックレベル要素とインライン要素と言う分類は無くなりました。以下のような要素の分類があります。見出し・段落・表など、文書を構成する基本となる要素で、一つのブロック(かたまり)として認識され、次のような要素があります。pre親要素の内容幅全体に広がって配置されるため、通常フローならブロックレベル要素の横に他の要素は並べることができません。ほとんどの要素がインライン要素やテキスト要素を含むことができ、一部はさらにブロックレベル要素を含むことができます。インライン要素インライン要素は、主にブロックレベル要素の内容として用いられる要素で、行内の一部として扱われます。strong要素)などがあります。インライン要素の中には、文字データや他のインライン要素を配置することができるが、インライン要素の中に(原則として)ブロックレベル要素を配置することはできません。インライン要素やテキスト要素は、必ずブロックレベル要素に含まれる形式で記述するのが望ましい。置換(インライン)要素(インラインブロック要素)テキスト以外のものに置き換えられる要素(置換要素以外のインライン要素は、非置換インライン要素という)一般的なインライン要素とは異なり、幅と高さを持ちます。次のような要素があります。場合、要素名の後に半角スペースとスラッシュをつけて記述します。プロパティを使えば、ブロックレベル要素である要素をインラインのスタイルに変更することも、その逆も可能です。属性でタイトルを示します。<p>以下は「文字コード宣言」からの抜粋です。要素)ページのフッター部分等で、著作権表記やサイト所有者・製作者の連絡先を指定するのに利用したりします。内容に関する連絡先・問合せ先を表す要素です。要素)項目を順序を付けて定義するリストです。順序を示す必要がある項目のリスト等に使用します。要素でマークアップします。属性を指定することにより、番号以外の以下のような値を表示させることができます。属性により開始番号を指定できます。<li>電源を入れる。<li>ログインする。<li>スタートボタンをクリックする。<li>黄</li></ol>電源を入れる。要素)順序のないリストを表示する際に使用します。要素でマークアップします。黒丸(disc)、白丸(circle)、黒い四角(square)を指定することができます。項目ごとに黒丸(disc)、白丸(circle)、黒い四角(square)をつけ分けることができます。要素)定義する用語とその用語の説明を一対にしたリストです。要素でマークアップします。要素を含めることができます。「名前」などのリストに使用したりします。要素はページの基本情報を設定します。要素は具体的なコンテンツを記述します。要素はページの基本情報を設定します。要素は具体的なコンテンツを記述します。要素(HTML5)」を参照ください。header)を含めます。属性の値は、必ずアルファベットで始めなければなりません。属性の値の付け方には、一定の約束があります。)を組み合わせた名前でなければなりません。要素)を記述した例です。属性をつけて一意に識別できるようにしてあります。<p>Footer</p></div></body></html>上記を表示すると以下のようになります。サンプル2(背景色、ボーダーの指定)それぞれのブロックレベル要素がどのような表示になっているかを確認するには、それぞれの要素に背景色を指定したり、ボーダーを指定するとよくわかります。以下のようにスタイル(CSS)を追加して、背景色(background-color)、ボーダー(border)やマージン(margin)を追加してみます。20px;}</style></head><body>以下省略(前述と同じ)上記を表示すると以下のようになります。ブロックレベル要素が記述された順序で、親要素の内容幅全体に広がって配置されるているのがわかります(マージンを指定しているので、隙間がありますが)。要素に幅を指定していないので、ブラウザの幅を拡大すると、全てのブロックレベル要素はブラウザの幅いっぱいに広がります。幅(width)を指定する必要があります。要素を用意して、その要素に幅を指定するという方法があります。要素(id="wrapper")を追加してみます。幅と中央寄せのためのマージンの指定を以下のようにしてみます。(ブロックレベル要素を中央寄せするには、左右のマージンを「auto」に指定します。要素)にクリア(clear)を指定する必要があります。位置を入れ替えることができます。要素の「id="side"」を左上に配置することができます。指定によりレイアウトを変更することができることを示すサンプルで、実際のレイアウトではもう少しいろいろなことを考慮する必要があります。要素)テキストにリンクを設定するのに使用します。要素以外のインライン要素やテキストを含むことができます。要素を設定したテキストに自動的に文字色と下線を付与して他のテキストと区別できるように表示されます。指定するとページのトップに移動します。属性に、「mailto:」を指定してメールソフトを呼び出すことができます。指定すると、新しいウィンドウを開いてそこにリンク先を表示します。