HTMLの基本・改＿よく使うタグ一覧
タグは大事です。。。
タグでウェブページはできてます。
今回は私の覚書としてよく使うなーと思うタグを紹介！
説明も入れてるから結構長いですね……
- HTML：HTML文書
HTML5では<html>タグで使用する言語を指定します。しなくても書かれている言語で大抵表示するんですけど、検索サイトさんが分類するときに分かりやすいというやさしさです。
検索サイトさんに優しくすると検索しやすくなって見てほしい人に見てもらいやすくなります。検索サイトに優しくするというか、サイトがどんなサイトでどういう人向けなのかを明確にするって感じですね。
<html lang="ja">：日本語のサイトです。
lang：言語を指定。
ja：日本語
en：英語
zh：中国語
ko：韓国語
es：スペイン語
it：イタリア語
ru：ロシア語
de：ドイツ語
fr：フランス語
これらは言語コードです。国コードというものとは表記が違ったりするのでここにない国の言葉を指定するときは言語コードで調べるといいと思います。
- HEAD：ヘッダー。HTML自体の情報を記述
色々情報を記述していく場所です。タイトルとかメタデータとか。検索サイトに情報を伝えるために必要な場所として覚えておいてください。
- BODY：ボディ、本文。ここはそのままです。
- TITLE：タイトル：検索サイトの検索結果に表示されるのでわかりやすさを心掛けましょう。
- A：ハイパーリンクのアンカー
これを使わないウェブサイトはないと思います。
ページ間を移動するだけじゃなくてページ内の移動にも使います。すごく大事。
<a href=""></a>：基本形です。
このタグの間に文字や画像やボタンを入れてリンクボタンにします。閉じるのは</a>だけで簡単ですね。
上半身の方の<a href～のaの後ろは半角スペースです。タグに全角スペースは基本的に使わないので気を付けてください。
せっかく作ったのに反応しない場合、ここが全角になっている場合もあります。私は昔結構やらかしました……。
hrefはリンク先のURLを指定しますねっていう属性と呼ばれるタグの付属品です。これがないとリンクできないくらい大切です。
<a href="URL">
<a href="#ID">
おっと？
上の方は普通にURLでリンクしていると思ってください。
問題は下ですね、＃記号は属性と呼ばれるものの中にある「id属性」にリンクを張るために使います。
つまり、このidをページ内のどこかのタグに着けておくとこのリンクボタンを押せばその場所に飛ぶことができます。よく「pagetop」とか「上に戻る」っていうボタンがありますよね、あれです。
この二つは合体もできます。URLのページのidのところに飛ばせます。
- DIV：分割テキスト、エリア分け
HTML5になってからむちゃくちゃつかうようになりました！
これは意味を持たないタグってやつです。要素をグループ化してそのdiv内すべてにCSSで色々装飾するときにとても便利です。
でも使い過ぎると見にくいので他に使えるタグがあったらそれにIDやCLASSを指定してCSSで使った方が綺麗にまとまりますよね、見にくい！って怒られないように他の者も使ってみた方がいいかも。
でもすごーく便利です！
- META：文章情報
metaはHEAD内に記述します。
文字コードをここでしていできます。HTML5は文字コード「UTF-8」を指定するのでここに書きます。保存するときにテキストの文字コードもこれに合わせておくようにしないと文字化けするので気を付けてください。
<meta charset="utf-8">：これは閉じる足を持ちません。最後のマトリョーシカ（別れない奴）と思ってください。
<meta name="description" "content="情報記入">
上記はページの概要を記しておくものです。情報記入とある場所にページの概要を記入します。70～80文字程度が好ましいです。これ使ったことないんですけど使った方がいいんですかね？
- LI：リスト項目
今も使ってますが「・」とか数字で箇条書きするときに使います。
<ul>
<li>箇条書きする内容</li>
</ul>
こんな感じで使います。
ulは順序が重要でないもの、「・」が頭につきます。
olは数字が頭につきので順序立てられたリストに使用します。手順なんかはこっちですね。
箇条書きの内容は<li></li>で囲みます。
<li>ひとつめ</li>
<li>ふたつめ</li>
というように一つ一つ囲みますが、</li>がなくても反応はしてくれます。
olで数字を途中から始めたい場合はstart="始めたい数字"という属性を入れます。
逆の数字順（最後が1）にしたいときはreversed属性を使います。
<ol reversed="vreversed" staer="5">
上記のように書けば5から1まで数字が一つずつ減っていきます。
- P：段落
昔は<p>で段落変えてたんですけど、<p></p>で一つの段落とするようになりましたねえ。年がばれそう。
所謂意味のある改行というやつです。ですので<p>と<p>の間には1行分のスペースができます。
CSSでスペースの調整もできるのでこれで長い文章の1文は区切るようにしましょうって教科書にあったんですけど、なんだろうすごく違和感……。それは同じ段落の話では？ってなっちゃうんですけど誰か詳しいこと教えてほしい。
- BR：改行
小説書いたり説明文を書くときに本当に利用します。ありがとう改行タグ！
強制改行させるタグなので<p></p>で囲まれてる場合は</p>で段落変わるのでそこにはなくても大丈夫です。
Pのところに書いたように、あまり使うなって言われてますね、タグを増やし過ぎるなってことかなあ。
行間が空かないので見出しにサブタイトルつけるときなどに便利みたいです。
- LINK：定義
とても簡単に言えば別のファイルで作ったCSSにリンクを張る時に使います。
<link rel="stylesheet" href="URL">
ちなみにHTML5ではこう書きますが、それ以前はhref=""の後にtype="text/css"を必ずつけてました。HTML5でもつけてもいいんですけどなくてもいいので書かないんじゃないかな。
余談ですがCSSはHTMLに直接各方法もあります。1ページにしか反映しなくて少ない量ならそれで済ませることもあるってことかな。
- IMG：画像表示
画像を表示したい場所に画像を張ります。
<img src="URL">：このタグの位置にURLの画像が貼れます。
画像タグには属性がたくさんあります。このタグで大きさなども変えられるってことです。
width、height：その名の通り幅と高さを変えます。
alt：画像が表示できない場合に表示されるテキストです。ネットワークが遮断されたり、URLをうっかり間違えてしまって画像が表示されない、そんな場合にここに書いたテキストがでるので画像の説明を書きましょう。
なお、幅と高さはCSSでも変更できるので最近はこっちでデザインは全部やってくれって感じなんでしょうね。
- TABLE：表組み
昔はよく使ったなあ……（現実逃避）
そのまま表を作成するタグです。
<table>
<tr>
<th></th>
<td></td>
</tr>
</table>
これで1行2列の表ができます。
thは文字等を入れ、tdにはデータを入れると聞いたんですが、教科書によっては文字列もtdに入れてますね。どちらも文字でも数字でも表示できます。画像でも大丈夫です。
trは1行を表すので行を増やすときは此方を増やしてください。
1行の中の列数はすべてそろえる必要があります。
colspanという属性を使って列を結合させたりするときは結合した列数と横の列数を数えてください。
行を結合する場合はrowspanを使います。
※番外？
<!-- -->
注釈として使います。「<!-- 」と「 -->」の間にコメントを書いておけば外からは見えません。でもソースを表示させたら見えちゃうので一緒に開発してる人に分かりやすくするためとか、書いているものを場所に分けてる時の始まりの指定とか、そんな感じで使うのかな？
