HTMLとは?head要素やbody要素、属性について解説

この記事は2分で読めます

自分用メモ

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要素」に分かれる

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

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

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

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

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

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

コンテンツの中にはリストが含まれる事もある
リストにはul, ol, dlと、前者2つに付く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属性は設定できる

  • このエントリーをはてなブックマークに追加
  • LINEで送る

関連記事

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。