HTMLファイルの基本構造
HTMLファイルの基本構造
1.HTMLの一番はじめに書く「文書宣言」
HTMLを書く際は「HTMLの記述ルールに則って書いている」ということを、HTMLファイルの中で最初に宣言します。これはHTMLの要素ではなく、「文書宣言（DOCTYPE宣言）」と呼ばれる特別な書き方です。この記述でブラウザは、記述内容をどのように処理すればよいかを解釈出来ます。
HTML5であれば
<!DOCTYPE html>
のように記述します。
2.HTMLファイルの構造とｈｔｍｌ要素
文書宣言を行ったあとに書くのが「html要素です。文書宣言のあと、ｈｔｍｌ要素の開始タグ<html>と終了タグ</html>を書き、この挟まれた部分に、HTMLの色々な要素を記述していくことになります。
htmlの要素にはlang属性を記述することが出来ます。どの国の言語が使われているかを指定するもので、翻訳ツールなどのプログラムが言語を判別するのに役立ちます。
<!DOCTYPE html>
<html lang=”ja”>
</html>
3.head要素とbody要素
HTMLでは、ｈｔｍｌ要素の開始タグ<html>と終了タグ</html>の間に様々な要素を記述していきますが、「メタデータ」と「コンテンツ」に区切られます。
メタデータとは、そのHTMLファイルそのものに紐づく情報のことです。メタデータはブラウザ上には表示されません。一方、コンテンツは、実際にブラウザに表示される情報のことを指します。メタデータとコンテンツの二種類の情報を区切るための要素がhead要素とbody要素です。
head要素に必ず入れる要素がホームページのタイトルを示す「title」要素です。
<title>html css web初心者の学び舎</title>
のように記述します。
<!DOCTYPE html>
<html lang=”ja”>
<head>
<title>はてなブログ</title>
</head>
<body>
</body>
</html>
4.meta要素で「文字コード」指定
文字コードとは、文字列や記号をコンピューターが解釈するための規則です。文字コードにはいくつか種類がありますが、現在は｛UTF-8｝がほとんどです。他には、Shift-JISやEUCなどがあります。
HTMLでは、どの文字コードで記述しているかをmeta要素のcharest属性を使って指定します。日本語の文字列が登場するより前に書かなければいけないため、通常、title要素より前に書きます。
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8>
<title>はてなブログ</title>
</head>
<body>
</body>
</html>
HTMLの属性値
HTMLの属性値
HTMLの要素の中には属性を持つものがあります。属性に対して設定された値を属性値と言います。設定できる属性値は個々の要素によって異なり、属性を持たない要素や複製に属性が設定できるものもあります。
具体的には、別のページへのリンクを設定するときに使われるa要素（sはanchor錨の意味）は、href属性を使ってリンク先のURLを指定し、target属性でウェブブラウザのウインドウの開き方を指定します。
<a href=http://hatena.co.jp/> target=” blank”>hatena</a>
a： 要素名
href： 属性
target：属性
blank＊属性値
属性と属性値の書き方のルール ・ 属性値は”（ダブルクオテーションマーク）で囲む ・ 要素名と属性の間に半角スペースを入れる ・ 属性の名前と属性値の間を半角の=で結ぶ ・ 複数の属性を設定する場合は、属性と属性の間にスペースを入れる
HTMLの要素とタグ
HTMLの要素とタグ
HTMLのタグで囲まれた部分を要素と言います。要素の始まりと終わりを示す目印がタグです。始まりを開始タグ、終わりを終了タグといいます。タグで始まりと終わりを囲むことで要素を作ることにります。
ウェブページの情報はすべて何らかの要素で囲まれている必要があります。
<p>段落を表す要素の例</p>
<title> タイトルの要素の例</title>
タグの記述のルール
・開始タグと終了タグを必ずセットで書く
・終了タグには開始タグと同じ要素名に「/」を追加する
・タグは半角英数字で書く
- タグは<と>で囲まれる
- 基本的には小文字で記述する
開始タグと終了タグで囲まれた部分が、その要素が適用される範囲となります。
HTMLの要素名には段落（paragraph）を意味するｐ要素など、英単語をベースにして頭文字だけをとっているものが多くあります。タグの元となる英単語を理解していると、タグの意味がわかりやすくなります。
同じ内容のHTML,CSSであってもブラウザによって解釈は異なる
同じ内容のHTML,CSSであってもブラウザによって解釈は異なる
読み込むブラウザによって、同じ内容のHTML,CSSであってもブラウザによって解釈は異なることがあります。これは同じ言葉でも、受け取る人によって独自に解釈して、内容が異なる場合があるのと同じようなものです。具体的にはGoogle Chromeで表示させた場合とSafariで同じHTMLで書かれたものを読み込ませても見え方が異なります。しかし、そこまで大きな違いではありません。
