記事の内容
HTMLのhead要素とbody要素の役割
HTML要素の中には「head」と「body」という要素があります、これらがどのような役割があるのか説明して行きます。
head要素の役割
head要素の中に記述するのは、ほとんどがコンピューターに教えるための情報になります。
どんなものを記述するのか
- Webサイトを表示するために必要な文字コードを指定します。
- ページの内容を要約した記述、検索エンジン向け。
- ブラウザやタイトルバーに表示されるタイトル。
- CSSのファイルを参照する記述
- ファビコンを指定するためのリンク
このようなものを記述します。
文字コードとは
<meta charset="utf-8">で記述している部分で、webのページで扱われるテキストは必ず何らかの文字コードが指定されます、日本語の場合は主に「utf-8」「Shift_JIS」「EUC-JP」などですが現在では特別な理由が無い場合は「utf-8」を指定します。
注意しなければいけないのが、昔はShift_JISが主流でしたので古いサイトを編集する時には文字コードに気を付けないと文字化けを起こすことが考えられます。
ページの概要を表す情報
<meta name="description" content="ページ内容の概要を記述"> 「このページにはこのような内容がかかれています」といた情報を記述します。
無理に指定しなくてもよく、補足的なものと考えて下さい。
外部のCSSファイルを利用する時
<link rel="stylesheet" href="css/style2.css"> CSSのフォルダーのstyle2.cssのファイルを参照してねとなります。
<style>要素でCSSを直接指定する場合
<style></style>の中にCSSを記述します、link要素で外部のCSSを参照すれば、他のページにも使えますが<style>要素を使うとそのページのみとなります。
タイトルとファビコン
<title>head要素の中に記述</title>
<link rel="icon" href="favicon.ico">
head要素の中に記述した情報は基本ブラウザには表示されないものですが、例外として「title(タイトル) 」とタイトルの横の小さな画像(ファビコン)は視覚化されます。
head要素の中に「title」要素を使って指定します、webブラウザやタイトルバーに表示され検索結果にも表示される部分ですので人が見てもコンピューターが見ても分かり易い簡潔な表記で指定しましょう。
body要素の役割
ページに表示される場所
body要素の中に記述する情報はWebブラウザに表示され人の目に見えるようになります、記事の内容はbody要素の中に記述していきます。
ページに表示された記事の中で、誰もが目にする代表的な要素には
見出しを表す「ｈ1~h6要素」
段落を表す「p要素」
リストを表す「ul番号なしリスト、ol番号ありリスト、dl定義リスト」などの要素があります。
文書構造を表す主要な要素
その他にも大きく範囲を設定してページ全体の構造を表すような要素もあります。
- header要素:ページ上部に配置、サイト内のページに共通化する部分
- footer要素：ページ下部に配置、サイト内のページに共通化する部分
- main要素：body内にそのページのコンテンツ部分に対して一つだけ
- nav要素：ヘッダーやフッターに配置、グローバルナビゲーションに利用
- section要素：ひとまとまりであることをします要素
- aside要素：主な記事とは切り離して考えられるもの
これらの要素はbody要素の中に記述しなければなりません。
body要素の中に記述される要素のほとんどがCSSで装飾を施すことができます。
レイアウトや装飾に利用できるタグ
div要素
div要素はそれ自体では特に意味を持ちませんが、見出しや段落などの各要素をひとまとめにする際に使用します。
<div></div>要素の箱の中に「見出し」「段落」「リスト」などを入れることによって、その中の要素を並べ替えたりdivという箱の色を変えることができます。
<div>でまとめた要素を<div>ごと並列に並べるなどのレイアウトが自由になります。
span要素
span要素はインライン要素で特に意味を持たないタグです、HTMLタグにはそれぞれに意味があり、情報に適したものを使用しますが情報と合わない時はspan要素を使用します。
span要素は、見出しや段落などの内容の一部に対して使用します、ブラウザでの表示にには変化がなく無意味な要素ですがCSSで装飾やレイアウトを行うために利用します。
要素は入れ子で記述できます
開始タグと終了タグで構成される要素は入れ子で記述していきます。
自分を一つの要素に置き換えてその要素から見て、自身が内包される要素を「祖先要素」自身が内包する要素を「子孫要素」といいます。
要素の直下にある要素を「子要素」
子要素から見た時は「親要素」といいます。
同じ親要素の中にある要素は「兄弟要素」となります。
上の画像で説明すれば<html>要素はすべての要素を内包しますので「祖先要素」と呼ばれます。
<head>要素は「親要素」
<head>要素内の<meta><title><link>などはheadから見ると「子要素」になります。
htmlから見るとmeta要素などは「子孫要素」になります。
このようにHTML文書の中は要素が何重にも入れ子の状態になっています。
HTMLのhead要素とbody要素の役割
文書をコンピューター向けに記述しているのがhead要素
文章をユーザー向けに記述しているのがbody要素
簡単にはこのようになります。
次はbody内記述する物を記事にしていきます。
