4.htmlソースの構成


HTMLソースにもバージョンのようなものがあります。長らくHTML4.01が主流でしたが、最近ではHTML5がよく使われるようになりました。使えるタグや属性などが変わっているので、ここでは最初からHTML5、CSS3で作るものとして説明していきます。

2021.08.10
HTML5が今年1月29日に廃止されていました。W3CがApple、Mozilla、Operaの開発者らが設立したWHATWG(読みはワットダブルジーとします)という団体のHTML-HTML Living Standard-を標準仕様とすると発表。

HTML Living Standardを省略してHTML LSとします。HTML5と大きな違いはないようなので、気が付いたときに修正を加えていきます。今後はHTML LS、CSS3で作るということになります。
ページの中では≪HTML LS≫で表示していきます。


<html>~</html>
<head>~</head> <meta charset="utf-8">
<title>~</title>
<meta name="description" content="">
<link href="*****.css" rel="stylesheet">
<body>~</body> <p>HTMLソースにもバージョンのようなものがあります。長らくHTML4.01が主流でしたが、最近ではHTML5がよく使われるようになりました。使えるタグや属性などが変わっているので、ここでは最初からHTML5、CSS3で作るものとして説明していきます。</p>
<p><img src="image/st10.gif" alt=""></p>
・・・・
・・・・
・・・・
・・・・

大きくまとめると上のようになります。例外はありません。
<head>~</head>にはほとんど決まったことを書いています。作らないといけないのは<title>、name="description"のcontent、link href="*****.css"だけです。
linkを除いて他は重要です。<title>は検索エンジンに出てくるので最重要。しっかり考えて決めてください。name="description"も重要。検索したときタイトルが表示されその下に要約が表示されます。

joywave便利箱

私のページの検索結果は上記のとおり。で、このページのソースは、
<head>
<meta charset="utf-8">
<title>ホームページを自作しよう≪JoyWave便利箱≫</title>
<meta content="初心者+αが作った『初心者+α』向けのホームページ(HP)自作・制作便利サイトです。" name="description">
<link rel="shortcut icon" href="favicon.ico">
<link href="style5.css" type="text/css" rel="stylesheet">
</head>

つまり、タイトルも要約も私がソースに記載したとおりに表示されているということです。

<body>~</body>は何も決まっていません。
これから見ていくタグや属性を使って全部自作します。タグだけでは足りない場合はスタイルシートの助けも必要になります。

作り方はhtmlを作ってからcssにという具合にはならず、同時進行になります。
「ここは赤色にしたいなあ」「じゃあhtmlにはclass="aka"と書いておいて、スタイルシートに.aka{color:red;}と書けばいいね」・・・・とこんな感じです。