さて、カテゴリーとコンテナーについてなんとなく理解ができたら、次はワードなどの文章を例にHTMLを組み立ててみましょー。
とその前に、HTMLを作る上で大切なことがあります。
初めのレッスンでいきなり<h1>こんにちは</h1>
と記述してHTMLを作りましたが、ルール的に正しくありません。
実は最低限、下記の内容が必要になります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ぱーとんと学ぶHTML入門 HTML5サンプル</title>
</head>
<body>
<h1>ぱーとんと学ぶHTML入門</h1>
</body>
</html>
ややこしく見えますが、これはこのHTMLの説明のような役割をしています。 毎度入れなければならない、ルールとして覚えておきましょう。
さてはコピペやなー!どや?!ぷぷぷー
覚えたての言ってみたかったんですねー
DOCTYPE宣言
<!DOCTYPE html>
「この文書はHTML5です」と宣言する役割です。 今はHTML5がほぼほぼですが、HTML4ですと下記のように記載します。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
数年前まで、狩猟のHTML4は2種類ありました。厳密なstrict
と、ルーズなtransitional
。
strict
できれいに組んだら「おお!やるやん!」となったものでした(笑)
いま主流のHTML5はこれだけです。
htmlタグとlang属性
<html lang="ja">
htmlタグにlang属性がついています。「このHTMLは日本語ですよ」という意味です。
jaはJapanaseのjaですね!
わたくし実は...jaはJapaneseやと気付いておりましたよ!
すばらしい!いい調子ですよー
そして<head>
タグの中に色々入ってます。
文字コード
<meta charset="UTF-8">
メタタグにcharset属性にUTF-8がとあります。
「この文書の文字エンコードはUTF-8です」ということです。
文字コードって聞きなれない言葉ですよね。
たまに文字が中国語や記号なになって、読めないことがありませんか?
それは「文字化け」といい、ブラウザの文字コードと文書の文字コードが合わない場合におこります。
その為に文字コードをしっかり指定することは大切です。
もちろん保存の際にも文字コードを合わせる必要があります。
UTF-8は多言語に対応するコードですので、現在はこのコードが主流です。
文字化けってやっべー方のウイルスちゃいますの?!
やばくないウイルスって...?
表題
<title>ぱーとんと学ぶHTML入門 HTML5サンプル</title>
このHTMLの表題です。
これらの要素を記載したあとにbody要素の内容が始まります。
ブラウザはHTMLを上から順番に読んでいきます。
このHTML文書は「HTML5」で「日本語」でエンコードは「UTF-8」なんだなと解釈し、これから始まるHTMLを表示させるわけです。
これらはおまじないのように全てのHTMLに記載しましょう。
さて、それでは実践へ!。。。
次回にしましょうか(笑)
コピペ...コピペ...コピペ...
...うん、もう大丈夫そうですよー