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文書にスタイルを適用する方法などをまとめます。