初めてのHTMLvol.2 記事を書いてみよう！

前回の内容

・DOCTYPE,meta,titleの記述

・始まりの呪文が短くなった

これだけ頭に書けばとりあえず動くというところまで解説しました。
今回はその補足としてmetaタグを少し書き足していきます。

文字のエンコーディングにUTF-8を使用して解説をしましたが、何故日本ではUTF-8が主流になっているのか補足です。

今日では、多言語 URL が規格化され、例えば日本語の漢字・仮名文字を URL に使う事も出来るようになっております。
多言語 URL では、文字のエンコーディングに UTF-8 を使用します。
HTML 文書が UTF-8 以外の文字エンコーディングで書かれている場合、日本語URLは、正しくサーヴァに伝わらない恐れがあります。

他にもmetaタグで指定して欲しいのがdescriptionとkeywordsです。

descriptionタグで囲んだワードは検索エンジンで表示される紹介文の箇所に表示されます。
ディスクリプションは何も記述していない場合、本文から自動的に抽出して紹介文を生成してくれるので、必ず必要というわけではないのですが、文章が省略されたりつぎはぎのように表示されますので意味不明な場合もあります。
サイトの閲覧者にしっかりしているサイトだとアピールすることで、記事が上位に上がりやすくなり、より多くの閲覧者を獲得できるようになるかもしれません。

keywordsタグは名前のとおり、どのキーワードで検索したらこのサイトが出てくるか指定してあげるタグです。
前回自分が指定したキーワードに”初めてのHTML”と”DOCTYPE”を指定したのですが、Googleで”初めてのHTML　DOCTYPE”と検索してあげると上位に出てきます。（2016年3月29日の時点では）

よく検索されるキーワードだと他の記事に埋もれてしまいますし、逆にあまり検索されないキーワードを設定すると上位に表示されることがありますが、その分検索される数も少なくなるので加減が難しいところです。

DOCTYPE,head,meta,titleができたら次はbodyについて書いていきます。

body内に書きたい記事を書いていくのですが、よく使われている一般的なタグを全部書くと長くなるのでとりあえず５個だけ紹介します。

<p>

pタグはひとつの段落であることを表します。

<br>

brタグを入れると入れたところで改行をすることができます。初めてHTMLを学んだ時、文と文の間やデザイン上どうしても空白を入れたい時にbrタグを続けて入れて空白を作っていましたが、マークアップ的に間違いなのでやめましょう。いずれおそらく解説します。

<h1> ～ <h6>

h1～h6は見出しを意味します。数字が小さくなるにつれて下位の見出し（小見出し）となります。

<img src="画像">

imgタグはimageの略で画像を表示させるためのタグです。srcでどこの画像を読み込むか指定してあげます。

<a href="URL">

aタグはリンクの出発点と到達点を指定するタグです。hrefでリンク先のURLを指定してあげます。

上のタグを使って簡単に書いてみました。

まだまだサイトが完成するまでの道のりが遠いように感じますが、htmlの記述を変えずにcssを使ってレイアウトをいじると下のようになります。

これも後々別の記事で説明していきたいと思いますので少々お待ちください。
個人的な勝手なイメージですが、htmlでは使用するパーツを上から並べていき、後からcssを使ってレイアウトしていくといった感じです。

次回はbody部分の続きでdivタグとかspanタグとかid,classとかその流れでcssとか書こうかと思ったりしてます！
次回もよろしくお願いします！