HTMLの基本的なタグ


見出しをつける

見出しは<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>