More than 5 years have passed since last update.

HTMLの基本的なタグ

Last updated at 2020-08-08Posted at 2020-08-08

見出しをつける

見出しは<h1>~<h6>タグを使ってつけます。
hはheading（見出し）の略です。
<h1>が一番大きな見出し、<h6>が一番小さい見出しになります。

index.html

<h1>見出し</h1>

段落は<p>タグで表します。
pはparagraph（段落）の略です。
<h2>や<p>で囲んだテキストは改行されます。

index.html

<p>ホゲホゲ</p>

で囲んだテキストはコメント扱いになり、ブラウザには表示されません。

index.html

<!-- コメント -->

リンクを作成する時は<a>タグを使用します。
リンク先の指定には、href属性を使用します。

index.html

<a href="{リンク先URL}">リンク</a>

画像の表示には<img>タグを使用します。
src属性に画像のリンクを指定することで画像が表示されます。
<img>タグはテキストを囲むことがないので、終了タグが不要です。

index.html

<img src="{画像のリンク}"> <!-- 終了タグ不要 -->

リストを作成するには<li>タグを使用します。
箇条書きしたいテキストをそれぞれ<li>タグで囲むことで、リストを作成することができます。

また、<li>タグは囲む要素によって種類が変わります。
<ul>タグで囲むと、黒点が先頭につき、
<ol>タグで囲むと、数字がつきます。
このように要素を要素で囲むことを入れ子と言います。
囲む方の要素を親要素、囲まれる要素を子要素と呼びます。

index.html

<ul>
  <li>アイテム1</li>
  <li>アイテム2</li>
  <li>アイテム3</li>
</ul>

リストの先頭マーカーはlist-styleプロパティで消すことができます。

style.css

li {
  list-style: none;
}

<div>タグによって要素をグループ化します。
「div」は「division」の略です。

index.html

<div>
  <img src="{画像のリンク}">
  <p>画像</p>
</div>