peeks-blog

自分用メモ

HTMLの基本
要素はこれ以外にも沢山あるが、
まずはheadとbodyを押さえる。

HTMLとは？

HTMLは、Webページの「文書」を担当する
HTMLで文書を書くとブラウザに意味が伝わる。

webサイトを作る元となる言語と言える。

なぜ文書をHTMLで書くのか

HTMLはブラウザのために記述される
HTMLで文章を書くと、ブラウザが正しく意味を認識してくれる
（デザインはCSSを解析して表示される）

Webページを解析するのはブラウザ、解析された結果が
普段見てるWebページのようにデザインされて表示される

HTMLファイル＝テキストファイル

HTMLの編集には「テキストエディタ」を使用する
本格的にHTMLコーディングをする際は、
入力補助機能が充実したエディタを使用する

テキストファイルは通常、拡張子が「.txt」で保存されるが、
これをHTML文書としてWebブラウザに認識させたい場合は、
拡張子を「.html」に変更する必要がある

この反対で、既存のHTMLファイルの拡張子を
「.txt」に変更した場合は、Webブラウザで開いても
ソースコードしか表示されなくなる

head要素とbody要素について

HTML文書の中身を大きく分けると
「head要素」と「body要素」に分かれる

要素とは、開始タグと終了タグで囲まれた
１つのまとまりの事

①head要素
文章に関する「メタ情報」を記述する
閲覧者に表示されない設定やページ情報
メタ情報にはページタイトル、外部スタイルシートの場所、
外部JSファイルの場所、文字エンコーディング情報、
ページ概要などがある→ブラウザで表示した時これらの情報は表示されない

②body要素
コンテンツを記述する
閲覧者に見てもらうためのWebページの文書

※参考：HTMLのhead要素とbody要素の記述について

body要素はheader、main、footerに大別される。

mainには、divやsection、article要素がある
※参考：HTMLのdiv, section, article要素についてまとめ

コンテンツの中にはリストが含まれる事もある
リストにはul, ol, dlと、前者２つに付くliをまず把握する
※参考：HTMLのリストとは？ ul, ol, dlの3種類をまとめ

HTMLの「属性」とは？

開始タグの中に書いて、要素の役割を指定すること
要素に付加情報を加える事が可能となる

要素によって付加される属性は決まっている

id属性とclass属性

この2つの属性は、属性の中で最も多く使用する属性である

Id属性とclass属性は、HTMLタグの中に名前を付ける事ができる
Id属性は同じページに1つしか設定できないが、
class属性は何度でも使う事ができる

div要素など、意味を持たない要素では、
id属性とclass属性を使うことでページ内の意味を表す働きがある

この2つの属性が使用されるのは、CSSで
デザインを適用させる要素を決定する時（セレクタ）である

id属性とclass属性は「HTMLとCSSを繋ぐ架け橋」
になる役割を担っていると言える
「id属性とclaas属性を指定したら、
それに対してデザインが適用できる」と覚えておけばOK

body要素内で使用されるHTMLタグであれば、
どんなタグにもid属性とclass属性は設定できる