HTMLの基本をしっかりと押さえていきましょう。

本講座を進めることでいま何を書いているのかが分かるようになります。

はじめに、テキストエディタのTeraPadを起動しておきましょう。

タグと要素

1つHTMLの例を見てみましょう。

<title>はじめてのHTML</title>

<文字列1>文字列2</文字列1>という形になっていますね。

「文字列1」のように<></>で囲まれた文字列のことをタグと呼びます。
例の場合は「title」という文字列が使われているためtitleタグと呼びます。

「文字列2」は例のように単なる文字列の場合もあれば、別のタグが入る場合もあります。

タグで囲まれた1つのまとまりとして見たとき、それを要素と呼びます。
例の場合はtitleタグと「はじめてのHTML」という文字列をまとめてtitle要素と呼びます。

開始タグと終了タグ

タグは多くが開始タグ終了タグを持ちます。

例の場合、始めの<title>を開始タグ、終わりの</title>を終了タグと呼びます。

終了タグを書かないタグ

例では「はじめてのHTML」という"内容"をtitleタグを使って設定していますが、改行を表すbrタグのように、タグ自身で完結して"内容"を持たないものが一部存在し、これらのタグには終了タグを書きません。

終了タグを書かないタグはそこまで多くないので、出てきたときに例外として覚え、基本的には開始タグと終了タグを書く、と思っておくと良いでしょう。

要素による意味付け

<title>はじめてのHTML</title>

このように要素を構成することで「タイトルに"はじめてのHTML"という内容を設定するよ」という意味付けがされ、コンピュータに伝えることができます。

html要素

HTMLを設定していくため、テキスト全体をhtmlタグで囲んでhtml要素を作ります。

まずはここから書いていきましょう。
(一行目に別の記述をしますが、今はこれは1行目に書かなければいけないルールとして覚えておいてください。)

<!doctype html>
<html>
</html>

これでHTMLを設定していく準備ができました。

head要素

head要素は、ページの情報を設定する場所です。
head要素内に記述した内容はブラウザのコンテンツエリア(※1)には表示されません。

それでは、html要素の中にhead要素を作りましょう。

<head>
</head>

続いて、ページのタイトルを設定していきます。

<head>
<title>はじめてのHTML</title>
</head>

これでページ情報を設定することができました。


※1 タブやツールバーを除いた、ブラウザの主となる部分を「コンテンツエリア」と呼んでいます

body要素

body要素は、ページの主となる内容を設定する場所です。
body要素内に記述した内容がブラウザのコンテンツエリアに表示されます。

それでは、head要素の後にbody要素を作りましょう。

<body>
</body>

続いて見出しを設定していきます。

<body>
<h1>はじめてのHTML</h1>
</body>

確認

ここまでで、記述したHTMLは以下のようになっています。

<!doctype html>
<html>
<head>
<title>はじめてのHTML</title>
</head>
<body>
<h1>はじめてのHTML</h1>
</body>
</html>

このように、HTMLは必ずhtml要素の中にheadbodyの順で要素を記述します。
html要素の直下に他の要素が入ることはありません。

それでは、gieerディレクトリにindex.htmlという名前で保存し、ファイルをダブルクリックしてブラウザで表示を確認してみましょう。
(既にindex.htmlが存在する場合は上書き保存してください。)

はじめてのHTML

このように表示されれば正しく記述できています。

まとめ

本講座では

  • タグと要素について
  • 要素の作り方

を学びました。

HTMLを書く上で欠かせない基本知識となりますので、不安な個所は読み返してみてください。

本講座の最終コード

  • index.html
<!doctype html>
<html>
<head>
<title>はじめてのHTML</title>
</head>
<body>
<h1>はじめてのHTML</h1>
</body>
</html>

次の記事

これまでの記事

隠します!
Loading...