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


HTMLの基本のタグを解説! ゼロから始めるHTML/CSS講座Vol05
目次
  1. ゼロから始めるHTML/CSS講座HTMLでよく使われるタグ
  2. 要素紹介
  3. h1h6要素
  4. p要素
  5. img要素
  6. a要素
  7. ul要素
  8. li要素
  9. 要素まとめ
  10. 補足.HTML5におけるbr要素
  11. 課題

ゼロから始める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>

html-tag1-639

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

基本的に見出しは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>

html-tag2-639

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>

html-tag3-639

画像を表します。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>

html-tag3-639

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>

html-tag4-639

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>

html-tag6-639

listitemの略で、箇条書きの項目を表します。

li要素はul要素又はol要素の中に入れ、どちらに囲われるかで、順番に意味を持つか持たないかが変わります。

一流デザイナーのスキルが身に付く

無料カウンセリングはこちら

要素まとめ

これまで紹介した要素をまとめると以下のようになります。

h1 - h6要素
見出しを表す。
p要素
段落を表す。
img要素
画像を表す。
a要素
ハイパーリンクを表す。
ul要素
箇条書きのリストを表す。中に入れる項目(li要素)の順番に意味を持たない。
li要素
箇条書きの項目を表す。
 

補足.HTML5におけるbr要素

HTML5はそれ以前と比べ、仕様や考え方が大きく変わっています。

HTML5以前からHTMLに触れていた人がよく間違えて使う要素の1つにbr要素があります。

br要素は意味のある改行を表します。例として俳句や住所の改行はbr要素で行います。

html-tag7-639

コンテンツの一部をなすような改行にのみbr要素を用い、Webページの見た目を整えるためにbr要素を使ってはなりません見た目はCSSで整えます。

よってHTML5においてbr要素は滅多に使用しません。

課題

自身の自己紹介ページをHTML5で作成してみましょう。自身の「名前」「イメージ画像」「住所」「趣味」などを記載してください。

まだ紹介していない要素についても色々調べて使うことを心がけてみてください。要素を調べるのは、HTML5公式の仕様書を日本語化したページを参考にしてください。

HTML5.JP URL : http://www.html5.jp/

CSSについては、利用しなくて構いません。

NEXT LESSON ☛ CSSの適用方法

PREV LESSON ☛ HTMLの特殊文字


関連記事

CodeCampus編集部
この記事を書いた人
CodeCampus編集部
まずは7日間お試し!人気プログラミング講座を無料公開中
オンライン・プログラミングレッスンNo.1のCodeCamp