webサイト制作のツボ

【『HTML』基本のツボ】Lesson1：最初に書くのはこれ！全てに共通する基本的な構造を知ろう！

「プログラミング学習のツボ」へようこそ！
管理人のKENです。

本サイトでは、
文系・初心者の私が、
プログラミング学習を進める中でつまづいたこと、
最初から知ってれば良かった、
ということをまとめていきます。

これからプログラミング学習を始める方の一助になれば幸いです。

今回は『HTML（エイチティーエムエル）』を学習したい方向けに、
基本的なポイントをまとめてみました！
（HTML5に準拠）

そもそも『HTML（エイチティーエムエル）』って何？
という方は、以下の別記事もご参照下さい！

【プログラミング初心者必見！】『HTML（エイチティーエムエル）』学習のツボ

「プログラミング学習のツボ」へようこそ！ 管理人のKENです。 本サイトでは、文系・初心者の私が、プログラミング学習を進める中でつまづいたこと、 最初から知ってれば良かったということをまとめていきます ...

続きを見る

また、今回の記事は、
以下、別記事でご紹介した知識前提で書いています。

【基礎から学ぼう！】『HTML（エイチティーエムエル）』学習、超基本のツボ

「プログラミング学習のツボ」へようこそ！ 管理人のKENです。 本サイトでは、 文系・初心者の私が、 プログラミング学習を進める中でつまづいたこと、 最初から知ってれば良かった、 ということをまとめて ...

続きを見る

『テキストエディタ』・『タグ』。
これらの単語を聞いてピンと来ない方は、
ぜひ上記の記事を先にご参考下さい。

[toc]

全てに共通！『HTML』は『文書型宣言』から書き始めよう

『HTML』で何かを作る場合、
必ず最初に以下を記述します。

<!DOCTYPE html>

 

『DOCTYPE』は大文字、 『html』は小文字、
『DOCTYPE』と『html』の間には半角スペースを打ちます。

これを『文書型宣言』と言います。
（『DOCTYPE宣言』やシンプルに『宣言文』とも言います。）

『DOCTYPE』は、
『ドックタイプ』と読みます。

なんでこう書くか難しく考えず、
これはこういうもんだと丸ごと覚えてしまいましょう！

この宣言文を最初に書くことで、
データが読み込まれる時に、
「ああ、これは『HTML』のデータなんだな」と、
コンピュータ側が理解することが出来ます。

また、実は宣言文は厳密にいうとタグではありません。
終了タグで最後をとじないのもポイントです。

次に書くのは<html>タグ

宣言文を書いたら、
次は<html>タグを書きましょう。

<!DOCTYPE html>
<html>
</html>

 

2行目、3行目記述の通りです。
<html>タグで囲むことで、
この範囲がHTML文書ですよと指定しています。

<html>タグの中に、<head>タグ・<body>タグを入れ込もう

宣言文でこれからHTMLを書くぞと宣言し、
<html>タグでHTML文書の範囲を指定したら、

今度は、
<head>タグ・<body>タグで、
HTML文書の中身を指定していきます。

以下のように、
<html>タグで挟むように、
<head>タグ・<body>タグを記述します。

<!DOCTYPE html>
<html>
 <head>
 </head>

 <body>
 </body>
</html>

 

<head>タグ内は、
タイトルや文字コード等、
HTMLそのものの情報を記述していく箱です。

一部を除いて、ここに記述した内容は、
基本的にはブラウザ上では表示されません。
こういった情報のことを、
メタ情報（メタデータ）と言ったりします。

学習を進め、実際にWebサイト作成等に関わると、
出てくる単語ですので、
覚えておくと良いと思います。

<body>タグ内は、
実際にブラウザに表示されるコンテンツを書き込む箱です。

皆さんが普段ネット検索して見ている文章は、
この<body>タグに書かれている内容をベースとしています。

普段何気なく見ているものが、
実はこんな仕組みだったんだと分かると、
少しワクワクしますね！

ここまで、以下を学習してきました。

  • <!DOCTYPE html>（文書型宣言文）
  • <html>タグ
  • <head>タグ
  • <body>タグ

書き方の順番もおさえておきましょう。
一番大きな括り、外側になる情報から順番に書いていきましょう。

①<!DOCTYPE html>（文書型宣言文）
↓
②<html>タグ
↓
③<head>タグ・<body>タグ

この順番です。
思いつくままに記述するのではなく、
全体の箱を作ってしまってから、
それぞれの中身を書き込んでいくようにしましょう。

そうすることで、
タグのとじ忘れ防止や、
全体の構成をしっかりと把握しながら
作業することに繋がります。

これから色々な『HTML』の書き方を学んでいくと思いますが、
今回学習したこの基本の箱に、
それらを書き入れていくことで、
Webサイトが出来上がっていきます。

ここまでの学習で、
皆さんは『HTML』の基本となる、
一番外側、基本の箱の作り方を身につけたことになります。

まとめ

  • 一番最初に書くのは、<!DOCTYPE html>　（文書型宣言文）
  • 次に、<html>タグでHTML文書の範囲を指定しよう
  • <head>タグは、タイトルや文字コード等、
    HTMLそのものの情報を記述していく箱
  • <body>タグは、実際にブラウザに表示されるコンテンツを書き込む箱
  • 『HTML』を書く時は、箱をイメージしよう。
    全体を入れる箱を作って、その中に種類別の箱を書き入れていくイメージ

いかがでしたでしょうか？
今回は、『HTML』学習初心者の方向けに、
最初に書く内容と、
全体の基本的な構造について解説をさせて頂きました。

覚えることは沢山ありますが、
焦らず、一つ一つツボをおさえていきましょう！

今後も随時、学習のツボをUPしていけたらと思っていますので、
宜しければご参考下さい。

今回の記事が、
少しでも皆さんのお役に立てたら幸いです！

-webサイト制作のツボ
-