【よく使うタグ編】初心者向け!WEBサイト制作に最低限必要なこと!

フロントエンドエンジニアの所長です!

5記事目にして、やっとWEBサイト上の見える部分の説明に入ってきました!
今回はbodyタグの中でよく使うタグについて説明していきます!

見本

下のソースを使って説明していきます!

<h○>・・・</h○>

これは見出しを表します。
数字小→見出し大 数字大→見出し小 となります。
数字は1~6までありますが、そこまで使っているサイトはあまり見かけません。
とはいえ、文書の構造的に見出しが6段階である必要があるときは、もちろん使って下さい!

<p>・・・</p>

これは段落を表します。
いわゆる、日本語の縦書きでは行頭が下がる、あの塊です。

<ul><li>・・・</li></ul>

これは順序としての意味を持たないリストを表します。
いわゆる、箇条書きです。
<li>・・・</li>のタグはリストの数だけいくつでも書いてOKです。

<ol><li>・・・</li></ol>

これは順序としての意味を持つリストを表します。
<ul></ul>と違って、順序としての意味を持っているので間違わないように使用しましょう!
同じく<li>・・・</li>のタグはリストの数だけいくつでも書いてOKです。

<a href=”・・・”>・・・</a>

これはリンクを表します。
クリックすれば別のページに飛ぶあれです。
タグ中にテキストを入れればテキストリンク、画像を入れれば画像リンクになります。
href属性の中には、リンクの飛び先のURLを記入します。
ちなみに見本のソースに入っている【target=”_blank”】という属性は
別のタブでページを開いてくれる記述です。

<img src=”・・・”>

これは画像を表します。
src属性の中には、画像の保存先のURLを記入します。

他にもたくさんのタグがありますが
構造的に意味を持つ】タグでよく使うものとしてこれくらいは覚えておきましょう!
構造的に意味を持つ】とわざわざ強調したのは、【構造的に意味を持たない】タグも存在するからです。
実はこの【構造的に意味を持たない】タグもよく使われます。
そのあたりはまた追々説明していきたいと思います。