More than 5 years have passed since last update.

【HTML】全体像

Posted at 2019-12-24

HTMLおおまかな全体像.html

<!DOCTYPE html>
<html>
  <head>
    Webに表示されない
  </head>
  <body>
    h1要素とかp要素とかWebに表示したいものをここに記入
  </body>
</html>

おおまかに説明するとまず

が一番最初に記入されている。

そして親要素の html 要素のなかに
子要素の head 要素と body 要素がある。
head 要素と body 要素の簡単な違いは

head・・・Webに表示されない
body・・・Webに表示される

この body のなかに h1 要素や p 要素を記入していく。
では他にはいったい何を記入していくのか？
それを下記にて説明。

!DOCTYPE HTML

HTMLのバージョンを宣言する（はHTML5の宣言方法）
HTMLを記入するときに一番最初に必ず記入する。
　記入しないと、レイアウトが崩れたり表示されない場合がある。

この文書はHTMLで作成されていますよーという宣言
HTMLを記入するときに必ず記入する

Webページの設定に関する情報を記入
文字コード、ページタイトル、読み込み先のCSSファイル名　の３つを必ず記入する
Webには表示されない

例.css

  <head>
    <meta charset="utf-8">
    <title>タイトルだよーん</title>
    <link rel="stylesheet" href="CSSのファイル名.css">
  </head>

文字コードを指定する
文字コードを指定することで文字化けを防ぐことができる
UTF-8は、HTML5で推奨されている文字コード

ブラウザのタブの部分に表示される。

どのCSSファイルを読み込むかを指定する