HTML の書式

HTML の基本的な書式は、開始タグと終了タグで囲まれた構造(要素)の集まりになります。要素は、例えば見出しを例にとると

<h1>見出し1</h1>

のように記載されます。「<h1>」が開始タグ、「h1」 が要素名、「見出し1」が要素内容、「</h1>」が終了タグと呼ばれます。終了タグは、要素名の前に「/(スラッシュ)」をつけます。HTLM 要素や属性のタグの中の記載は、大文字でも小文字でもかまいませんが、XHTLM では小文字に限定されていますので、小文字で記載する癖をつけたほうが良いと思います。
コンピュータには、文書の内容がわかりませんので、HTLM の書式は、文書の要素を定義しコンピュータに理解させると考えればよいかもしれません。インターネットエクスプローラ IE などの Web ブラウザも、要素をもとに、ホームページを表示しています。
HTLM の書式は、要素に従った適切な使い方が望まれます。スタイルシート CSS などを利用する場合も、要素が適切に使われている場合、ホームページのデザインなど容易に定義することが出来ます。
書式を多少間違えても、Web ブラウザが、HP をそれなりに表示してくれることもありまが、意図せぬ表示になってしまうこともありますので、書式に沿った記述を心掛けましょう。
次のサイトでは、HTLMの書式チェックをしてくれますので、利用してください。3通りのチェック方法があり、URL を指定・ファイルをアップロード・直接 HTLM を書き込む、を選ぶことが出来ます。
The W3C Markup Validation Service

最低限覚えたい HTML の要素

最低限、覚えておきたい HTLM の要素は、それほど多くありません。要素には、ブロックレベル要素とインラインレベル要素があります。ブロックレベル要素は文書のまとまりで Web ブラウザで表示されるとき前後に改行が入ります、インラインレベル要素は文字と同じレベルで扱われます。インラインレベル要素の中には、ブロックレベル要素を入れることは禁じられています。とりあえず、こういうものがあると頭の隅にいれて置いてください。
次に、実際に、最低限覚えたい HTLM 要素を使った例を示してみます。

最低限覚えたい HTLM 要素を使った例

最低限覚えたい HTML 要素を使ったソースコードサンプルを下記に示します。<h1> 見出し、<p> 段落、<br> 改行、<a> リンク、<ol> <li> 箇条書き、<!-- --> コメントなどの例が書いてあります。

<html>
<head>
<title>Web ブラウザのタイトルバーに表示されるタイトル</title>
</head>
<body>
<h1>h1 は見出し1の要素 </h1>
<h2>見出し2</h2>
<p>
HTML の文書は、&lt;html&gt;~&lt;/html&gt; &lt;head&gt;~&lt;/head&gt; &lt;body&gt;~&lt;/body&gt; で、構成されます。&lt;html&gt;~&lt;/html&gt; は、HTML 文書の宣言ですので、文書全体の最初と最後に書きます。&lt;head&gt; は、文書のタイトルなど文書の情報を記載し、&lt;body&gt; 部分が、実際に Web ブラウザに表示される文書部分になります。
<br>
&lt;h1&gt; ~ &lt;h6&gt; は、ブロックレベル要素で、見出しをあらわします。<br>
&lt;p&gt; は、段落をあらわすブロックレベル要素です。例えば、「<a href="#">&lt;a&gt; は、リンクを指定するインラインレベル要素</a>」のようにインラインレベル要素を含めることが出来ます。<br>
&lt;br&gt; は、改行を示すインラインレベル要素です。
次の、&lt;!-- --&gt;の間は、コメントになります。Web ブラウザには表示されません。<br>
&amp;lt; や &amp;gt; は、特殊文字です。それぞれ、タグの鍵括弧の左右を表します。特殊文字を使用することで、タグをブラウザに表示することが出来ます。
<br>

</p>
<!-- ここはコメントです。Web ブラウザには表示されません。-->
<ol>
<li>&lt;ol&gt; は、番号つき箇条書きリストを定義しています。箇条書きは、要素 &lt;li&gt; に次のように記載します。<br>
&lt;ol&gt;<br>
&lt;li&gt;箇条書き1&lt;/li&gt;<br>
&lt;li&gt;箇条書き2&lt;/li&gt;<br>
&lt;/ol&gt;
</li>
<li>&lt;ol&gt; の代わりに &lt;ul&gt; を使えば、数字の代わりに記号付きリストを表示することが出来ます。</li>
</ol>
</body>
</html>

上記サンプルは、次のリンクをクリックすれば、Web ブラウザでどのように表示されるか確認できます。覚えたい要素の説明も書いてあります。Web ブラウザの初期設定のまま、ホームページが表示されます。表示された内容と、ソースコードを見比べれば、要素がどういう風に表示されるか、理解しやすいと思います。
サンプル: 最低限覚えたい HTML のサンプル

PR amazon

author

サイト管理人:パワーデジット
管理人への連絡フォーム

ロリポップ! レンタルサーバーは、高機能なのに236円/月~
月額125円からの「さくらのレンタルサーバ
レンタルサーバー

スポンサード リンク

このページは 

トップページ > HTML > HTML 書式