【HTML】コードを描くためにベースとなる基礎知識
ネットサーフィンをしていて、偶然見つけたサイトがありました。正直、本でプログラミングを学ぶとなるとなかなか頭に入りません。
しかし、実際にコードを書きながら覚えれば、記憶として定着するのも速いのではないか。そう考えて始めたのが「CODEPREP」です。
そこで覚えた知識を、アウトプットとしてこのブログにつづります。
そもそもHTMLとは何か？
HTMLとは、Hyper Text Language(ハイパーテキストランゲージ)の頭文字をとったものです。
Hyper Textとは、Webページ同士を結びつける(リンクする)ための仕組みであり、
Markup とは、この次のセクションで出てくる「タグ」と呼ばれるものを利用してページ中の文字列に 「見出し」「段落」等の構造の意味づけや装飾等を行う言語のことを意味します。*1
HTMLは、ネット上に無数に存在するwebページをつなぎ合わせ、それぞれのページがどんな作りになっているかを表しているものと言えますね。
文章を飾りつけるタグ
webページに画像や動画を表示させる為には、それぞれのコードを記述して意味づけしなければいけません。それがタグです。
タグは見出し・段落など、何らかの内容が存在するものに適用される「<●●>〜</●●>」、または改行など、内容を伴わないものに適用される「<●>」という構造のルールを記述することによって表現されます。*2
使用頻度の高いタグ
- <h></h>・・・<h>タグは見出しを表すタグです。hの後ろに1～6の数字が付くことで、見出しの大きさを表現できます。数字が小さいほど見出しの重要度が高いです。hは見出しの意味を表すheadingからきています。
- <title></title>・・・<title>タグは、題名を表すタグです。記述するページに使用する題名を設定する事で、訪問者にわかりやすくする意味があります。
HTMLを意味づける構成
タグや文章を書き始めるまえに「これはHTMLで出来ている」ということを、webページに認識させる必要があります。そこで重要なのが、以下の記述です。
<html> ~ </html>: この中にHTML構文を記述する ということを明示するためのタグです。このタグはheadタグ、bodyタグの2つを含みます。
<head> ~ </head>: この中ではHTMLの設定(タイトル、書式、ページの説明 等)・JavaScriptやCSSファイルの読み込み等を行います。
<body> ~ </body>: この中では実際にパソコンの画面上に映し出される部分の構造を記述します。*3
すべてのタグは、htmlタグの中で記述するというルールがあります。これを守らないとwebページが認識せず、コードだけが表示されてしまうので注意しましょう。
DOCUTYPE宣言とは？
DOCUTYPE宣言は、これから書く文章はHTMLで書かれているぞ！という事実をwebページに認識させることです。
IT分野は非常に変化のスピードが速いです。HTMLも古くから使われているマークアップ言語ですが、どんどんルールが変わってきています。
HTMLも現在ではHTML5がリリースされており、最近のwebページの主軸となっています。ですが、いずれも共通しているのが、コードをwebページに認識させることです。htmlを書くときに、冒頭へ<!DOCUTYPE html>と記述すればOKです。
まとめ
今回はhtmlの基本の項目について説明致しました。次回はより深いレベルの内容をお届けします。
