【初心者向け】HTMLの基本

スポンサーリンク
スポンサーリンク
スポンサーリンク
スポンサーリンク
スポンサーリンク
スポンサーリンク

本日はウェブページの土台を作るための言語であるHTML5の基本を簡単に説明していきます。

HTMLの構成

必ず使う要素

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ホームページのタイトル</title>
</head>
<body>
<h1>ホームページの見出し</h1>
</body>
</html>
  • !DOCTYPE htmlはHTML5を宣言。
  • 全体を<html></html>で囲む。
  • <head></head>はページ上に表示させない情報。
  • <title>ホームページのタイトル</title>でウェブページタイトルを設定。
  • <meta charset=”UTF-8″>は文字コードの指定。
  • <body></body>の中にページの中身になる情報を記述。

タグの種類

よく使うHTMLタグをまとめてみました。

<h1>〜<h6>

<h1>見出し</h1>
<h6>見出し</h6>
  • 文字列の見出しに使う。
  • h1が最上位の見出しになり、数字が下がるにつれ小見出しになる。

<p>段落</p>

<p>段落</p>
  • 段落の指定。
  • paragraph(パラグラフ)」の略。

<div>

<div>
    <p>説明</p>
    <p>説明</p>
    <p>説明</p>
</div>
  • ブロックの作成、ブロックレベル要素として指定したい範囲を<div>で囲む。

span

<span style="color:#FF0000; background-color:#99cc00;;">スタイル指定</span><br/>
  • その箇所のスタイルを設定したいときに使う。
  • <span>で囲まれた部分が一つの括りになる。

img

<img src="/img/example.jpg" alt="猫">
  • 画像の挿入
  • src属性で画像ファイルを指定。
  • alt属性で代用テキスト指定。
  • 特にない場合は「alt=””」と記述するのが基本。

a

<a href="https://leaclaw-media.com">サイトを見る</a>
  • リンクを指定する際に使用。
  • hrefタグに挟まれているURLに移動。

table

<table border="1">
<tr><td>お肉</td><td>800円</td></tr>
<tr><td>お魚</td><td>300円</td></tr>
</table>
  • 表の作成。
  • boder=”1″は枠の太さを表す。
  • <tr>は表の行、<td>はマス。


header

<header>
        <h1>サイト名</h1>
        <h2>サイトのキャッチコピー</h2>
        <nav>
            <ul>
                <li><a href="home">ホーム</a></li>
                <li><a href="blog">ブログ</a></li>
                <li><a href="contact">お問い合わせ</a></li>
            </ul>
        </nav>
    </header>
  • ヘッダー部分を囲う、セクションの先頭となるグループを表す。
  • <body>直下や<article>直後によく使う。

footer

<footer>
    <ul>
        <li><a href="info.html">お知らせ</a></li>
        <li><a href="contact.html">お問い合わせ</a></li>
        <li><a href="about.html">このサイトについて</a></li>
    </ul>
</footer>
  • メインコンテンツが書かれたセクションの最後に使う。

まとめ

タグの紹介は以上になります。HTMLの主要タグを理解することで、自身のメディアやブログへの流入の増加が期待できます。