HTMLの基本

HTML(HyperText Markup Language)は、ブラウザが読み込むための言語です。HTMLファイルの中にタグを記述することで要素を作成し、何について記述しているのかわかるようになっています。

本ページでは、ブラウザがHTMLを読み込む動作や、HTMLの書き方の基本について説明します。

ホームページはメモ帳で作成できます

ホームページは、メモ帳で作成できます。

【簡単なHTML例】
「キャンプ入門サイト」

1.キャンプで用意するもの
 テント
 寝袋

2.着いてすぐに行う事
 テント設営
 バーベキューの用意

3.後片付け
 バーベキューの片づけ
 テント収容

上記を保存する時に「ファイルの種類」で「すべてのファイル」を選択し、ファイル名をindex.htmlと入力します。

保存したindex.thmlをダブルクリックすると、ブラウザが起動して以下のように表示されます。

メモ帳で作成したHTMLをブラウザで表示しています。改行がされずに横に並んで表示されています。

これは、ブラウザがテキストを読み込み、そのまま表示しているためです。HTML形式で保存すると、ブラウザはHTMLと認識して表示してくれます。

レンタルサーバーを借りてファイルをアップロードした場合でも、サーバーからパソコンにHTMLファイルを送り、ブラウザはその内容を表示します。

なお、簡単なホームページでもメモ帳だけで作成するのは難しいと思います。「ホームページビルダー」などの有料ソフトウェアを最初から使ってもいいと思いますが、最初は「HTML Project2」などのフリーソフトを使ってみて、より本格的に運用するようになってから有料ソフトウェアを検討するのでもいいと思います。

タグ

上記のブラウザで表示した際に、改行されていないことに気づくと思います。ブラウザで表示するときに改行する場合は、以下のように記述します。

【改行例】
「キャンプ入門サイト」<br>
</br>
1.キャンプで用意するもの<br>
 テント<br>
 寝袋<br>
<br>
2.着いてすぐに行う事<br>
 テント設営<br>
 バーベキューの用意<br>
<br>
3.後片付け<br>
 バーベキューの片づけ<br>
 テント収容<br>

行の最後にすべて<br>が付いていますが、これをタグと言います。タグの<br>は、ブラウザでは改行と解釈します。このため、以下のように表示されます。

メモ帳で作成したHTMLをブラウザで表示しています。タグを使ったため改行されて表示されています。

このように、ブラウザで解釈できるタグを利用することで改行したり、線を引いたりもできます。線を引くには、タグの<hr>を使います。

なお、ブラウザは半角スペースを連続で記述しても、1つ分しか表示されません。このため、全角スペースで入力しないと上記でテント、寝袋の前の空白が半角スペース1文字分で表示されてしまいます。

要素

タグを使って要素が作成できます。

【要素】
<p>キャンプについて記述します。</p>
<p>文章を書く所です。</p>

<p>を開始タグ、</p>を終了タグと言います。終了タグは、開始タグに/が付いています。開始タグと終了タグで囲むと、要素が作成されるという訳です。要素の範囲には、開始タグと終了タグも含みます。

上記では、<p>の開始タグと</p>の終了タグで囲んだp要素が2つあることになります。p要素は段落を示し、本文を記述する所です。

タグの種類によって作成できる要素が異なり、何を示すかが決まります。例えば、<h1>を開始タグ、</h1>を終了タグとした場合、h1要素が作られます。h1要素は、見出しを示します。

要素によって、文字を大きくしたり自動で改行するなど、ブラウザでの表示も変わります。h1要素であれば、文字が大きく表示されます。

マークアップ言語

文書の中に、マークを使って意味を持たせる言語をマークアップ言語と言います。HTMLは、タグをマークにして要素を作成しており、マークアップ言語の1つと言われています。

最初は、どのようなタグがあるかわからずにホームページ作成を始めると思いますが、「HTML Project2」では主要なタグを選択するだけで使えるためお奨めです。

また、本サイトでも「ホームページ作成」で順を追って説明していきます。

サイト内で関連ページをチェック

ホームページ作成「CSS/スタイルシートの基本