HTML 基本のソースを表示新しいページはコチラ

[[HTML5#リファレンス|HTML5リファレンス]]に戻る
== '''概要''' ==
　おおまかな仕組みについての記事です。


　HTMLはブラウザで美しい書体や体裁の文書を表現するための技術で一般にはマークアップ言語とよばれている技術です。


　websiteの表示は大まかに分けるとヘッダーと呼ばれるページを構築するための情報を記述する部分とボディと呼ばれる部分から構成されていてタイトルはヘッダ、本文はボディの部分で記述します。


　タグと呼ばれる機能的なキーワードを使って記述するのですが、まずはタグとは何かを知るべく以下の様な簡単なHTMLを示します。

<syntaxhighlight2 lang="html">
<HTML>
<head>
   <title>タイトル名</title>
</head>
<body>
本文です。
</body>
</HTML>
</syntaxhighlight2>

<HTML>…</HTML>、<head>…</head>、<title>…</title>、<body>…</body>のようなものをタグと呼んでいます。ここでは4種類を使いました。


　タグで囲われた内容をタグの種類によって意味づけたりすることができ、囲われている内容の扱い方を指定する様な意味を持ちます。


　従ってタグ毎に役割があるため数百程あるタグの意味を理解する事がHTMLで文書を書く技術を習得する事になります。


　ここで示した例の様なモノは理解し易いですが、次第に理解が難しくなってくるのがHTMLです。


　やれる事が多いのが起因していると思います。


　ここで登場した4つのタグについて詳細を示しておきます


*HTML
:タグに囲われた部分がhtml文書全体になります。必ず使われるタグと言っても過言ではないです。タグ名は大文字、小文字の区別が無いです。省略しても良い記法も有ります。少しでもタグ情報を減らした方が通信量は減りますがHTML5に対応していないブラウザでは動作が不安定になります。省略記法を採用しているサイトは実験的なサイトくらいでしか見かけません。


*body
:タグに囲われた部分は文書の本文になります。


*head
:タグに囲われた部分は半分では無い文書に関する情報を記載する範囲になります。ここではtitleタグを使いました。


*title
:囲われた部分の内容がhtml文書のタイトルとして設定されます。タイトルはブラウザのタイトルバーに表示されたり、ブラウザのお気に入りに登録する時の既定の名称になったりします。


　タグは入れ子、ネスト、マトリョーシカ🪆のような構造である必要があります。互い違いになってはいけません。例えば以下の様な構造はダメです。


<syntaxhighlight2 lang="html">
<span><b>駄目なタグの例</span></b>
</syntaxhighlight2>


　ちゃんと入れ子になる様に最後に開いたタグから閉じていく必要が有ります。


　因みに&lt;HTML&gt;のような最初に来るタグを開始タグ、英語だとStart Tagと呼び、他方の&lt;/HTML&gt;のような後に来るタグを終了タグ、英語だとEnd Tagと呼んでいます。


　改行を明示的に行う指示として&lt;br&gt;がありますが、終了タグは不要です。正確には記述しておくべきですが改行タグの開始タグと終了タグの間にテキストを書く必要がないため省略することができる事になっています。XMLとしては誤った記述です。タグの間で値を持たないパターンを簡潔に表記する方法として&lt;br /&gt;のような表記が推奨されています。


　<span style="color: darkred; font-weight:bold;">&lt;br&gt;</span><span style="color: darkblue; font-weight:bold;">&lt;/br&gt;</span>の開始タグが<span style="color: darkred; font-weight:bold;">&lt;br /</span>に対応していて終了タグは<span style="color: darkblue; font-weight:bold;">&gt;</span>に対応しています。


   

[[HTML5#リファレンス|HTML5リファレンス]]に戻る