正しく始めるHTML:知っておくべき基本タグ一覧

Abstruct

と言うわけで、今回はよく使われる重要なタグを解説します、どれも重要なタグで、本当に最低限で良いならこれで何とかなる物の一覧です

Webページ作るんだったら、他のページへリンク貼れるのが当たり前ですよね

他のページへリンクを張る方法はこんな感じに書きます


<a href="行きたいページのパス">テキスト</a>

「パスって何？」とか言われたかも知れません。これだけでは分かりませんので、実際に動く物を書いてみましょう


<a href="index.html">最初のページへ戻る</a>
<a href="http://google.com/">Googleへのリンク</a>

それぞれの実行結果はこんな感じ。あ、ちなみにAはAnchorの略です。

ここで注目するのが、hrefに続いている行きたい場所を示した文字列

最初に書いた様に、ファイル名だけを書いている物は、自分のある場所を基準としてファイルを探す相対パス、googleへリンクしたときの様にhttp://...と続く様な書き方を、絶対パスと言います

パスの指定方法は、この絶対パスと相対パスとの２つに分けられます

一応、この程度知っていれば最初は問題無いと思いますが、さらに詳しいことは最後に説明させていただきましょう

画像を読み込むには次のように書きます


<img src="画像のパス" alt="簡単な説明" />

実際に動くサンプルを作成すると


<img src="sample.jpg" alt="サンプル画像" />

ちなみにaltに続く、画像の説明は必ず書かないといけないルールになっています(ちなみにaltは代替え:alternativeの略)

alt属性にはほんの短い説明程度しか書いてはいけないことになっているので、長い説明が必要な場合には、title属性を書いて、そこに説明を書くようになっています

行を変えるのは簡単、pタグを使用します


<p>改行を行います</p>

サンプルではこんな感じ


<p>嗚呼、運命ってモノは何で存在するのだろう…</p>
<p>いいや、ただそういうことを単なる偶然、そう、偶然に出来てしまうには、私はあまりにも乙女であり過ぎただけだった</p>
<p>桜が咲き、春が来て、ついにお気に入りだった前の学校の制服も着替えてしまった頃だった</p>

ちなみにpはparagraph、段落の略です。段落と言っても、意味としては最小の段落というイメージですけどね(日本人の感覚で使う長い段落はsectionを当てるようです、良くは知りませんが)

大体感覚としては、句読点『。』を使うまでの一文くらいで捉えてもらえれば良いみたいです

タグの基本は説明する必要はないのかもしれませんが、今回は新しい仕様であるXHTML1.0を使用しています

この規格は、それまでのHTMLと規格が少し違って、口うるさい部分があるので、気を付けて使いましょう

巷の、HTML講座とは特に違う点は、次の２点

つまりは、xmlの文法に照らし合わせると

×	`<IMG src="major_tag_samp01.png" alt="実行結果">`
×	`<img src="major_tag_samp01.png" alt="実行結果">`
×	`<IMG src="major_tag_samp01.png" alt="実行結果" />`
○	`<img src="major_tag_samp01.png" alt="実行結果" />`

HTMLでは全て解析されますが、XMLでは一番最後の例しか通らないわけです

先ほど説明したimgタグが<img .../>と最後にスラッシュを付けて終わらせていたのはコレが理由になっているんですね