今回はHTML5の書き方について説明していきます。
HTMLの記述について
タグ（tag）
HTMLは「タグ」で記述していきます。
ホームページで公開する内容は、タグでマークアップしていきます。
そのマークアップは基本構造があり、それにそってタグを設定していきます。
基本のHTMLタグは、開始タグと終了タグがあります。
タグの記述は＜（小なり記号）ではじまり、＞（大なり記号）で終わります。
すべて半角で入力します。
開始タグ 終了タグ
＜a href=”menu.html”＞メニュー＜／a＞
※終了タグを省略できるものもあります。
コンテンツ（contents）
タグで囲まれた中に表示する内容（コンテンツ）を記述します。
コンテンツをブラウザで表示されるものです。
コンテンツ
＜a href=”menu.html”＞メニュー＜／a＞
要素（Element）
開始タグと終了タグをまとめたものを「要素」といい、要素は、HTMLの基本的な単位です。
この要素を組み合わせることでHTMLを構成しコンテンツをブラウザで表示します。
要素
＜a href=”menu.html”＞メニュー＜／a＞
属性（Attribute）
要素に属性を追加すると要素を拡張できるものです。
タグに必要であればこの属性を追加していきます。属性は複数記述することができます。
例えば、リンクのタグがあります。
リンク先をこの属性で記述します。リンク先のURLを属性値といいます。
属性値は”（ダブルクォーテーション）で囲います。
記述方法：属性＝属性値
属性 属性値
＜a href=“menu.html”＞メニュー＜／a＞
基本の書き方は以上です。
HTMLの基本の構造について
HTMLは、ただ要素を並べたらよいのではなく、基本の構造にあてはめて記述していくことになります。
基本の構造はこんな感じです。
全体 (html要素)
表示されない部分（head要素）
表示される部分（body要素）
表示されない部分にはhead要素を使います。
head要素内には、文書のヘッダ情報（文書に関する情報）を記述します。
表示する部分には、body要素を使います。
body要素内には、文書の本体部分です。
このbody要素の内容がブラウザの画面上に表示されることになります。
header要素とbody要素を包囲するhtml要素を使います。
各要素を細かく説明していきます。
html要素
html要素は、html文書で記述することを表しています。
lang属性
htmlを記述する言語、表示する言語を設定します。
例：
日本語 lang=”ja”
英語 lang=”en”
head要素
head要素は、文書のヘッダ情報（HTML文書に関するメタデータ）を記述します。
実際に記述する要素の例としては、
サイトのタイトル(title要素）、cssファイルやfavicon(ファビコン）ファイル、外部ファイルなどを設定するリンク(link要素)、文字コードの設定やサイトの説明（meta要素）などがあります。
属性はありません。
body要素
body要素は、HTML 文書のコンテンツを記述します。
属性はjavascriptで使用する関数がありますが、ここでは紹介しません。
それ以外はありません。
要素のネスト
HTML要素の中には、head要素とbody要素があります。
HTMLは要素の中に要素を記述するように構成されています。
その記述の仕方を、ネストまたは入れ子といいます。
HTML要素を「親要素」、head要素とbody要素を「子要素」といい、head要素とbody要素は同じ階層にいるので「兄弟要素」といいます。
このネストをツリー状にしたものを「ドキュメントツリー」といいます。
基本構造の要素を入力
では、早速入力をしてみましょう。
基本は1つずつ要素を入力していきますが、vsCodeはemmetのプラグインが標準で入っているのでそちらを使って簡単に入力してみましょう。
＜emmet＞
[！]キーを入力 → [Enter]キーをおす
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>はい、あっという間に基本の構造が入力できました。
各要素の説明をしていきましょう。
DOCTYPE
<!DOCTYPE html>Doctype宣言（文書型宣言）です。
現在は明確な役割はないのですが、一番上に記述するものになっているので忘れずに記述しましょう。
html
<html lang="en">
</html>html文書を記述します。
lang属性値が”en”（英語）となっているので、”ja”（日本語）に変更していきます。
<html lang="ja">
</html>head
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
head要素は、文書のヘッダ情報（HTML文書に関するメタデータ）を記述します。
head要素内に、meta要素、title要素が記述されています。
meta
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
meta要素は、各情報を記述します。
属性によって、記述する情報がかわります。
charset属性
文字コードを記述します。
現在多く使われているのがUTF-8です。
この文字コードと保存するファイルの文字コードもあわせる必要があります。
vscodeでは、「manage」→「setting」を開いて、「Text Editor」→「Encoding」で設定します。
name属性
属性値によって内容がかわります。
属性値 viewport / content
モバイル端末に最適化したサイトにする設定で、content属性と一緒に使用します。
content属性の値で、”width=device-width,initial-scale=1.0″があります。
“width=device-width”は、ビューポートのサイズを制御し、device-widthは拡大率が100%で画面の幅を示す定数を設定するとの意味です。
”initial-scale=1.0″は、拡大率を制御し、1は1倍となります。
“width=device-width,initial-scale=1.0″は、モバイル端末が横でこのサイトを開いたとき、幅はモバイル端末の横幅100%、で拡大率は1倍で表示となります。
属性値 description
サイトの説明になります。
google検索されたときにサイトの説明として表示されます。
文字数は90～120文字を目安にしましょう。
今回は入力されていないので追加しましょう。
＜emmet＞
[meta[description="練習用サイトです"] ]と入力し、[Enter]キーを押します。
<meta description="練習用サイトです">title
サイトのタイトルを記述します。
ブラウザのタグや、ブックマークを登録するときにここで設定したタイトルが入ります。
サイトのタイトルを変更しましょう。
<title>練習</title>
body
<body>
</body>
body要素は、HTML 文書のコンテンツを記述します。
次回は、ほかのhtmlタグについて説明していきます。
