【ゼロから学ぶHTML/CSS】HTMLの作り方と基本要素【タグ/head/body/#4】

HTML/CSS
HTML/CSS

HTMLはタグでマークアップして作る

HTMLは「ファイル名.html」のように拡張子がhtmlのファイルで作成します。

HTMLはタグと呼ばれるものを使って記載します。

タグについて

タグとは、「<要素名>」のように、<>で要素名を囲ったものです。

このタグを使って「<要素名>文書内容</要素名>」のように文書をタグで囲むようにしてHTMLを記載していきます。

タグで囲むことで、文書に意味を持たせることができます。これをマークアップと言います。マークアップすることで、ただの文書からHTML文書を作成していきます。

タグについてもっと詳しく

単に<>で要素名を囲んだ「<要素名>」を開始タグと言います。

開始タグの要素名の前に「/」(バックスラッシュ)を入れた「</要素名>」を終了タグと言います。

開始タグから終了タグまで、で囲んだ文書が要素名や属性名に基づいて意味づけされます

また、要素名によっては、終了タグを省略できる場合があります。省略するときは「<要素名 />」のように、「>」の直前に「/」を記載します。

要素について

要素によって、文書に持たせられる意味が変わります

例えば、

<h2>文書</h2>のように、h2要素で囲めば見出しの意味になります。<a>文書</a>のように、a要素で囲めばリンクの意味になります。

ちなみに、要素名は大文字でも小文字でも、どちらでも良いです。

タグに、要素名以外にも属性属性値を記載して、要素に詳細な意味付け新たな機能を付けることができます。
要素によって、使用できる属性は異なります。
「<要素名 属性=”属性値” 属性=”属性値”>」のように、半角スペースで区切って、属性を追加できます。追加した属性の後に半角スペースでさらに区切って、複数の属性を追加できます

タグはさらにタグで囲むこともでき、入れ子構造で記載することができます。囲んだタグは子要素として、囲むタグと両方機能します。

HTMLの基本要素について

様々なタグでマークアップしてHTML文書を作る(構造化していく)のですが、HTML文書の基本的な構造は次の4つ要素からできています。

  • 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>文書1</li><li>文書2</li></ul></div>」というHTMLを記載したとします。

このときdivはulの親要素と言います。反対にulはdivの子要素と言います。さらにulの中にはliがあります。このときliはulの子要素であり、liはdivの孫要素にもなります。

さらに、liは2つとも同じ階層に並んでいます。li同士は兄弟要素と言います。(同じliである必要はありません。liとdivが並んでいても兄弟要素になります。)

このような階層構造や要素同士の関係性はCSSで重要になってくるので、覚えておいた方が良いです。

コメント

タイトルとURLをコピーしました