html はウェブサイト制作においてもウェブアプリ開発においても確実に必要なベースの部分となります。
前回紹介した atom コーディングエディタを使って html ファイルを作成していきましょう。
html の始め方
まず最初に atom を起動して新規ファイル作成し、ファイルを index.html として保存します。
作成した index.html ファイルに、下記のように記述します。
<!DOCTYPE html> ... (a)
<html> ... (b1)
<head>
</head>
<body>
</body>
</html> ... (b2)まず (a) で、「この文書は html フォーマットだ」と明記します。
そして、(b1) で「ここから html を書いていく」ということを明示し、 (b2) の </html> で「html はここまで」 とします。
html では、このように大カッコで囲んだもの <>をタグと呼びます。タグの書き方は2通りあり、使用するタグによって書き方が分かれます。
<head>...</head>のように終わりと始まりを示す書き方<img />のようにそれ一つだけで完結する書き方
html タグの中には head タグと body タグが必ず登場します。head タグと body タグについては後ほど記述するとして、先に html タグを少し改良します。
html タグに属性を追加
まずは html タグに記述を追加していきましょう。
<html lang="ja">
...
</html>html タグにはどの言語で書かれたかを明記できます。日本語の場合は lang="ja" と書きましょう。また英語の場合は lang="en" と書きます。
lang に指定できる言語は他にもあります。ISO 639-1 に準拠して定められているので、そちらのリストを参考にしてください。
w3schools.com – html language code reference
html タグに追加で記述した情報を属性と言います。ここで明記した言語情報は lang 属性と言います。
指定できる属性は他にもありますが、一旦おいて次に行きます。
head タグにメタタグを追加
現時点でコードは下記のようになっています。
<!DOCTYPE html>
<head lang="ja">
<head>
</head>
<body>
</body>
</head>ここからは head タグの中身を書いていきます。
head はこのhtml 文書のメタ情報を記載します。つまり、「この html 文書がどういう意味を持っているのか」という情報を明記する場所となります。
<meta> タグにはたくさん種類がありますが、下記のものを書いておけばいいでしょう。ここで詳しいことを書いてしまうと長くなってしまうので省きます。
<meta charset="utf-8"> ... (a)
<meta name="viewport" content="width=device-widthm initial-scale=1"> ... (b)
<title>#フルスタックへの道 html 基本のキ | YETI NAVI</title> ... (c)
<meta name="robots" content="index follow"> ... (d1)
<meta name="keywords" content="フルスタック html 書き方"> ... (d2)
<meta name="description" content ="htmlの書き方を基本から紹介..."> ... (d3)(a) 文字コードを指定
utf-8 という文字コードで文書が書かれていることを示しています。
(b) viewport を指定
この html 文書は「デバイスのサイズに合わせて表示する」ということを示しています。スマホやパソコンなど、どのデバイスでもきれいに表示できるようにこのように表記します。
(c) この文書のタイトルを指定
<title></title>タグで挟まれた部分がこの文書のタイトルとなります。
(d1 – d3) SEO 対策の指定
(d1) では、ボットに対する挙動を決めています。例えば google は自動でウェブサイトを見にきて、訪れたウェブサイトのページを google のデータベースに登録していきます。このとき content="index follow" としておくことで、「データベースに登録してね、さらにこのページからリンクされている他のページも見にきてね」と伝えます。
(d2) では、このページのキーワードを決めています。 キーワードはあまり多く指定しないことに注意しましょう。 最大 5つぐらいがちょうどいいかと思います。
(d3) では、このページの要約を決めています。google で検索すると、下記のように表示されますが、タイトルの下に表示されている部分が discription です。
次回は head に書くべき内容をもっと拡張していきます。 twitter や facebook でリンクをシェアするときにページの要約をきれいに表示する方法や、 html文書にスタイルを適用する方法などをまとめます。
