更新日: 2017年03月23日
公開日: 2015年12月03日

HTMLの基本のタグを解説！　ゼロから始めるHTML/CSS講座Vol05

ゼロから始めるHTML/CSS講座HTMLでよく使われるタグ
要素紹介
h1h6要素
p要素
img要素
a要素
ul要素
li要素
要素まとめ
補足.HTML5におけるbr要素
課題

ゼロから始めるHTML/CSS講座HTMLでよく使われるタグ

要素紹介

108ある要素の中でも特に利用頻度の高い要素について紹介していきます。


<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>HTML5</title>
    </head>
    <body>
        文章の内容
    </body>
</html>

基本構造である上記sample.htmlのbody要素の中に、これから紹介していく要素を順番に追記していきましょう。

h1h6要素


<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>HTML5</title>
    </head>
    <body>
        <h1>HTML5でサイト作成</h1>
    </body>
</html>

見出しを表します。番号が小さいほど主要な見出しとなります。

基本的に見出しはh1要素を使い、h1要素が既にあり、それより主要でない見出しを定義する場合にh2を使います。

p要素


<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>HTML5</title>
    </head>
    <body>
        <h1>HTML5でサイト作成</h1>
        <p>p要素は「段落」を表します。</p>
        <p>段落は文章の構造としてよく使われます。</p>
    </body>
</html>

paragraphの略で、文章のひとつの段落を表します。

img要素


<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>HTML5</title>
    </head>
    <body>
        <h1>HTML5でサイト作成</h1>
        <p>p要素は「段落」を表します。</p>
        <p>段落は文章の構造としてよく使われます。</p>
        <img src="logo.png">
    </body>
</html>

画像を表します。img要素には終了タグがありません。

src属性に画像のアドレスを指定します。

下記画像をsample.htmlと同じフォルダに保存してください。

ダウンロード:ロゴ画像

a要素


<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>HTML5</title>
    </head>
    <body>
        <h1>HTML5でサイト作成</h1>
        <p>p要素は「段落」を表します。</p>
        <p>段落は文章の構造としてよく使われます。</p>
        <a href="http://codecamp.jp/" target="_blank"><img src="logo.png"></a>
    </body>
</html>

anchorの略で、ハイパーリンクを表します。文字列や画像にリンクを設定します。

href属性にリンク先のアドレスを指定します。

target属性でリンクを現在のページで開くか新しいウィンドウで開くか指定できます。

target属性の値

ul要素


<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>HTML5</title>
    </head>
    <body>
        <h1>HTML5でサイト作成</h1>
        <p>p要素は「段落」を表します。</p>
        <p>段落は文章の構造としてよく使われます。</p>
        <a href="http://codecamp.jp/" target="_blank"><img src="logo.png"></a>
        <ul>
        </ul>
    </body>
</html>

unorderedlistの略で、箇条書きのリストを表します。項目の順番に意味は持ちません。

ul要素の中には項目として次に説明するli要素が入ります。

ul要素と似たような要素としてol要素(orderedlist)があり、同じく箇条書きのリストを表しますが、こちらは順番に意味を持ち、ランキングの表示などに使います。

li要素


<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>HTML5</title>
    </head>
    <body>
        <h1>HTML5でサイト作成</h1>
        <p>p要素は「段落」を表します。</p>
        <p>段落は文章の構造としてよく使われます。</p>
        <a href="http://codecamp.jp/" target="_blank"><img src="logo.png"></a>
        <ul>
            <li>これは箇条書きです</li>
            <li>項目の順番は順不同です</li>
        </ul>
    </body>
</html>