マッハデザインのサイトへようこそ!
Webテクノロジー、アプリ、スマホ、起業などのメモブログ。

Web制作入門講座 HTML編 Lesson5 おまじない!

Web制作入門講座 HTML編 Lesson5 おまじない! 2020.09.02 WED

さて、カテゴリーとコンテナーについてなんとなく理解ができたら、次はワードなどの文章を例に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と、ルーズなtransitionalstrictできれいに組んだら「おお!やるやん!」となったものでした(笑)
いま主流の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に記載しましょう。

さて、それでは実践へ!。。。
次回にしましょうか(笑)

コピペ...コピペ...コピペ...

...うん、もう大丈夫そうですよー