HTMLはタグでマークアップして作る
HTMLは「ファイル名.html」のように拡張子がhtmlのファイルで作成します。
HTMLはタグと呼ばれるものを使って記載します。
タグについて
タグとは、「<要素名>」のように、<>で要素名を囲ったものです。
このタグを使って「<要素名>文書内容</要素名>」のように文書をタグで囲むようにしてHTMLを記載していきます。
タグで囲むことで、文書に意味を持たせることができます。これをマークアップと言います。マークアップすることで、ただの文書からHTML文書を作成していきます。
タグについてもっと詳しく
単に<>で要素名を囲んだ「<要素名>」を開始タグと言います。
開始タグの要素名の前に「/」（バックスラッシュ）を入れた「</要素名>」を終了タグと言います。
開始タグから終了タグまで、で囲んだ文書が要素名や属性名に基づいて意味づけされます。
また、要素名によっては、終了タグを省略できる場合があります。省略するときは「<要素名 />」のように、「>」の直前に「/」を記載します。
要素について
要素によって、文書に持たせられる意味が変わります。
例えば、
<h2>文書</h2>のように、h2要素で囲めば見出しの意味になります。<a>文書</a>のように、a要素で囲めばリンクの意味になります。
ちなみに、要素名は大文字でも小文字でも、どちらでも良いです。
タグに、要素名以外にも属性と属性値を記載して、要素に詳細な意味付けや新たな機能を付けることができます。
要素によって、使用できる属性は異なります。
「<要素名 属性=”属性値” 属性=”属性値”>」のように、半角スペースで区切って、属性を追加できます。追加した属性の後に半角スペースでさらに区切って、複数の属性を追加できます。
タグはさらにタグで囲むこともでき、入れ子構造で記載することができます。囲んだタグは子要素として、囲むタグと両方機能します。
HTMLの基本要素について
様々なタグでマークアップしてHTML文書を作る（構造化していく）のですが、HTML文書の基本的な構造は次の４つ要素からできています。
- DOCTYPE宣言
- html要素
- head要素
- body要素
HTML文書は、まず1行目に「HTMLのバージョンは〇〇（HTML5なのかHTML4.01なのか等）で記載します」というのを宣言します。
基本的にHTML5で記載すると思うので、<!DOCTYPE html>と記載すればOKです。
この記載をDOCTYPE宣言（ドキュメントタイプ宣言）と言います。
DOCTYPE宣言の後、HTML文書を書き始めます。
html要素とhead要素とbody要素
HTML文書は、「html要素」を入れ子構造の一番外にして全ての文書を囲みます。つまり、htmlファイルは<html>で始まり、</html>で終わります。
そのhtml要素の中に、「head要素」と「body要素」を記載します。
「head要素」は、HTML文書自体に関する情報を記載します。つまり、文書のタイトルや、この文書ページはどういうページという説明、文字コードの種類などです。基本的にコンピューターが読み取る情報になります。
「body要素」は、文書本体の内容を記載します。つまり、テキストや画像など、実際にブラウザに表示される情報を記載します。body要素の中で、複数の要素を使ってマークアップしていき、Webページを作っていくことになります。
階層構造（入れ子構造）について
HTML文書では、タグの中にタグを、つまり要素の中に要素を記載することができます。
基本的には、要素の中に要素、さらに中に要素を記載・・・、というように階層構造になります。
例えば、「<div><ul><li>文書１</li><li>文書２</li></ul></div>」というHTMLを記載したとします。
このときdivはulの親要素と言います。反対にulはdivの子要素と言います。さらにulの中にはliがあります。このときliはulの子要素であり、liはdivの孫要素にもなります。
さらに、liは２つとも同じ階層に並んでいます。li同士は兄弟要素と言います。（同じliである必要はありません。liとdivが並んでいても兄弟要素になります。）
このような階層構造や要素同士の関係性はCSSで重要になってくるので、覚えておいた方が良いです。
コメント