【超基礎】web制作で必須のHTMLタグを覚えよう!

web制作
スポンサーリンク

はじめまして。はるです。

今回はweb制作を始めたい、または始めたばかりの方に向けてHTMLのタグについて解説していこうと思います。
HTMLはタグというものを使って、文章や画像を配置していきます。
そのタグにもそれぞれの用途が存在するので、今回の記事を利用して使い分けられるようになりましょう!

  • h1,h2,h3…h6
  • p
  • div
  • ul,li
  • a
  • img

それぞれ解説していきます。

<h1>,<h2>,<h3>…<h6>

これらは見出しを作るためのタグになります。
h1は大見出し、h2は小見出しなどのように、数字が大きくなるほど小さな見出しを表現します。

<h1>これが見出しです</h1>
<h2>これが小見出しです</h2>

<p>

pタグはテキストを書くことができます。
見出しなどではなく、普通の文章は基本的にこれで書きます。

<p>これがテキストです</p>

<div>

divタグは複数のコンテンツをグループ化することができます。
まとまりを作ることでCSSで装飾をする際に役立ちます。

<div>
  <h1>これがタイトルです。</h1>
  <p>これがテキストです。これがテキストです。</p>
</div>

<ul>,<li>

ulは unordered list の略で順番のないリストを作るときに利用します。
liは list item の略でリストの項目を意味します。

つまり、ulは順序のないリスト全体を定義し、liはそのリストの各項目を表します。

<ul>
  <li>アイテムA</li>
  <li>アイテムB</li>
  <li>アイテムC</li>
</ul>

<a>

aタグはページのリンクを張るときに利用されます。
別ページに飛んだりするときに便利です。
href属性で飛ぶ先のリンクを指定します。

<a href="ここにリンクを張ります">押すとリンクに飛ぶよ</a>

<img>

imgタグは画像を張るときに利用します。
src属性で画像のURLを指定します。

<img src="image.jpg">

今回は本当に代表的なタグのみを紹介しました。
他にもタグはいくつもあるので、作業しながら少しづつ覚えてもらえればと大丈夫かと思います。

このブログではほかにもweb制作に関する記事を載せています。
ぜひ参考にしてください!

コメント