Webサイト制作において必須の言語としてHTMLがあります。
HTMLとは“Hyper Text Markup Language”というマークアップ言語のことで、英名の頭文字をとってHTMLと呼ばれています。
「ハイパーテキスト」を「マークアップ」するための「言語」で、要は文章にHTMLタグを加えて(=マークアップ)、文章に意味を持たせる仕組みのことです。
今回は、そんなHTMLのお話です。まさにWebサイト制作のいろはの「い」なので、基本を押さえてまずは簡単なところから学んでみましょう！
HTMLの歴史
HTMLは1993年に誕生した言語です。当初HTML1から始まり、2014年にはHTML5が勧告されています。
誕生から15年(2018年現在)の間に色々な改良が加えられてきました。
それぞれのHTMLバージョンによって、使用できるタグやそのタグの使い方の違いなどありますが、今から覚えるならばHTML5での仕様を覚えるのがいいと思います！
最新バージョンの「HTML5」
現在の最新バージョンはHTML5です。正確にはHTML 5.2で、.〇のように数年ごとにマイナーアップデートが行われています。
このマイナーアップデートでもタグの使用・不使用や意味の変化などが行われます。
HTML5ではheaderタグやfooterタグ、articleタグなどが追加され、それ以前と比べてよりセマンティックな構造を重視しているのでWebページ内のタグの使い方などを今まで以上にしっかりと把握してマークアップを行う必要があります。
一聞すると、難易度が高くなっているように聞こえますが、しっかりとタグの意味を捉えて使うことでサイトの質の向上やSEO対策としても有効です。また、タグの使いどころがより明確になったため曖昧な記述を減らせるというメリットもあると思います。
HTML構造の基本
HTMLでは原則、単語や文章をタグというもので囲みます。タグとは「<」と「>」で囲まれた文字、または文字列のことで100種類を超える様々な種類があり、それぞれが意味を持ちます。
以下がタグの使用例です。開始タグ（< >）と終了タグ（</ >）でテキストなどのコンテンツを囲みます。
<p>テキスト</p>
<h1>テキスト</h1>
<a>テキスト</a>「<」と「>」の中の文字が”p”、”h1″、”a”という様にそれぞれ異なっていますよね。例えば「p」は段落を表現するときに使います。
段落には段落用のタグ、見出しには見出し用のタグ、表には表用のタグという風に使用していきます。
現在主流のHTML5ではタグの種類は100種を超えますが、普段よく使うタグは数十種類程度ですので、まずはよく使うタグを覚えておけば問題ないです！
ここで紹介した、p、h1タグに関しては以下の記事でまとめてあります。
マークアップ
以下のようなテキストドキュメントがあった場合、パッと見で「今日の出来事」が見出し（タイトル）で、「今日は朝からうどん・・・」が本文だと理解できますよね。
しかし、コンピュータは全部同じ”文字の羅列”としか捉えることが出来ません。
なので、以下のようにそれぞれに適したタグ付けを行います。
<h1>今日の出来事</h1> <p>今日は朝から青空でした。<br> 公園で日光浴をしてきました。<br> 気持ちよかったです！</p> <p>気分もリフレッシュして、明日から<br> また頑張ります。おやすみなさい。</p>
※ここでは分かりやすいようにタグが見えるようにしてあります。実際にタグは画面上に表示されません。
このように、コンテンツ内の部分ごとにコンピュータでも分かるように意味を持たせるため、それぞれのタグを適した場所に記述していく作業をマークアップすると言います。
まとめ
- Webサイト制作にはまずHTMLが必要
- HTMLの基本はコンテンツを対応したタグで囲むこと(マークアップ)