どーもプログラミング超初心者です。
昨日に続いて3日目が終わりました。
（数日のタイムラグあり。ごめんなさい。。）
今日は、
- head要素内の記述
- body要素内の記述
- id属性とclass属性の設定
でした。
というわけで、
下記の目次に沿って、おさらいしていきたいと思います。
興味がある方は読んでいってください。
（超初心者の内容ですので、プロの方は笑って見守ってくださいませ）
目次
1.head要素内の記述
1-1.meta要素
1-2.title要素
1-3.link要素
2.body要素内の記述
2-1.webページのコンテンツを記述するための要素
2-2.webページのアウトラインを整えるための要素
3.id属性とclass属性の設定
3-1.属性とは
1.head要素内の記述
1-1.meta要素
meta要素は文書のメタ情報を記述するということです。
メタ情報は付加的な情報を指すモノで、head要素内でのみ使われるモノ。
<meta charset="UTF-8">をhead内の最初に書いておくことを忘れないようにしておくこと！が大切なようです。
文字化けの原因を防ぐため。
1-2.title要素
title要素にはwebページのタイトルを記述します。
webページ上のタイトルとは、検索エンジンの結果ページに一覧表示されるSEO上重要な要素となります。
SEO上重要と聞くと、耳が大きくなりますねw
1-3.link要素
link要素とはスタイルシート（CSS）などの外部ファイルを参照する際に使うらしい。
コードを書いてないから実感がまだないので、実感がわく状態に早くなりたい。
2.body要素内の記述
2-1.webページのコンテンツを記述するための要素
・段落（文章）
文章を記述するときはp要素を使って、p要素で区切る。
pはパラグラフのp。
・文章中の改行
任意の場所でbr要素を使います。
brはbreakのbr。
・画像
画像の表示にはimg要素を使う。
imgはimageのimg。
img要素を使うときはsrc属性に画像のURLを指定して、画像を表示する。
あと、alt属性も覚える。
alt属性は画像に対する説明を書くところ。
altに書かれたテキストは、通常は表示されないけれど、画像が正常に表示されないときに表示される。
・ページリンク
ページリンクを記述するときは、a要素を使う。
<a>...</a>で囲まれた要素がクリックできるようになり、クリックするとリンク先に飛ぶようになる。
aはアンカーと呼ぶ。
href属性にURLを記述することでリンク先を指定する。
画像にリンクを設定したい場合は、<img>タグを<a>...</a>で囲めばOK。
・リスト
順序無しリストと順序有りリストがある。
順序無しリストはul要素を使う。ul要素の内部にli要素を並べてリストを作る。
ulはunordered listでliはlist itemの略。
順序有りリストはol要素を使う。ol要素の内部にli要素を並べてリストを作る。
olはordered listで順序無しリストを意味する。
・表
表にはtable要素を使う。
書き方の構造をしっかり把握することがコツだそう。
・フォーム
フォームを表示するときはform要素を使う。
form要素にはlabel要素、input要素やselect要素、textarea要素など色々と種類がある。
注意としては、
ただフォームボタンを作っても動作しないので、
サーバサイドプログラミング言語（PHP、Rubyなど）の助けが必要となってくる。
2-2.webページのアウトラインを整えるための要素
・見出し
アウトラインに沿って見出しを書くには、h1、h2、h3、h4、h5、h6を利用する。
hの数が小さい方が大きな見出しとなる。
h1は基本的にはwebの一つのページに一つのみ。
・セクション
見出しくらい強い意味を持たずにセクションわけをしたい場合はsection要素を使う
もう少し「何でもあり」の分割要素がdiv要素。
違いがイマイチわからないのですが、
正解は無いみたいなので、div要素で囲むと決めてしまっても良いみたい。
・webページの構造を分ける
header要素→デザイン上のヘッダー部分を記述する
article要素→本文を書く
aside要素→本文では無い補足情報を書く。サイドバーを書く。
footer要素→フッター部分を記述する
div要素→文章の内容を示す特別な意味合いはない。ひとかたまりの範囲を定義するときに使う。
3.id属性とclass属性の設定
3-1.属性とは
開始タグの中に書かれた付加情報。
id属性とclass属性はHTMLのタグの中に名前をつける目的で使う。
id属性には制限があって、HTMLの中（<HTML>から</HTNL>の間）で、
同じ属性値のid属性を2つ以上書くことができない。
class属性は同じ属性値のものをいくつ書いても大丈夫。
実際にid属性とclass属性が役に立つのは、
CSSでデザインを適用させる要素を決定するとき（セレクタ）。
つまりid属性とclass属性は、HTMLとCSSをつなぐ架け橋の役割ということらしい。
今のところ、全くイメージできないという。。
読み進めているだけだとイメージできないので、
早いところ手を動かせるようにしていかないと。。
ではー。
