More than 1 year has passed since last update.

HTML 代表的なタグと属性

Last updated at 2023-05-25Posted at 2023-05-16

はじめに

HTMLのタグは100種類以上あり，全部を覚えるのは大変である．本記事では最低でも覚えるべき代表的なタグをまとめる．

１．p

    <p>文章１</p>
    <p>文章2</p>

↓結果

<p>タグはパラグラフ(paragraph)の"p"で段落を作るときに使う．</p>の後ろで必ず改行される．

２．h1~h6

    <h1>見出し1</h1>
    <h2>見出し2</h2>
    <h3>見出し3</h3>

↓結果

<h1>〜<h6>タグは見出しを作るときに使う．数字が大きくなるほど小さい見出しになる．

３．img

    <p>下は画像</p>
    <img src="画像.png">

↓結果

<img>タグは画像を貼るときに使う．<img>タグは終了タグは使わない．

４．aタグ

    <p>これはリンクではない</p>
    <a href="指定したリンク先">これはリンク</a>

↓結果

<a>タグはリンクを作るときに使う．リンクをクリックすることで，属性で指定したリンク先に飛ぶ．

５．ul・ol・li

    <ul>
        <li>項目１</li>
        <li>項目２</li>
    </ul>
    <ol>
        <li>番号付き項目１</li>
        <li>番号付き項目２</li>
    </ol>

↓結果

<ul>・<ol>・<li>タグは箇条書きを作成するときに使う．項目自体は<li>，順序なしの箇条書きには<ul>，順序ありの箇条書きには<ol>を使用する．

６．br

    <p>あいうえお<br>かきくけこ<br>さしすせそ</p>

↓結果

<br>タグは意図的な改行を作るときに使う．<p>タグでも改行されるが，改行させるために使うべきではない．

７．div

<div class="group" style="color: red;">
    <p>本文１</p>
    <p>本文２</p>
</div>

↓結果

<div>タグ自体には特定の意味を持たないが，要素をグループでまとめるために使う．複数の要素をグループ化させることで，複数の要素に同じCSSを適用しやすくなる．

８．span

<span class="group" style="color: red;">
    <p>本文１</p>
    <p>本文２</p>
</span>

<div>タグと同様に<span>タグ自体には特定の意味を持たないが，要素をグループでまとめるために使う．<div>タグは前後に改行が入るのに対して，<span>タグは前後に改行を入れずにグルーピングできるという点が異なる．

９．hr

    <p>本文１</p><hr>
    <p>本文</p>

↓結果

<hr>タグは文章を区切る水平線を作る際に使う．

属性には特定の要素にのみ指定できる属性と，どのタグにも指定できるグローバル属性の2種類がある．以下はグローバル属性である．