2.5 見出し、リスト、段落、改行

HTMLファイルの作成時によく使う要素について学習します。見出し要素やリスト要素、段落要素などの基本的な要素の記述方法と、それらがブラウザでどのように表示されるかを見ていきましょう。

2.5.1 見出し

WEBページの見出しを作成します。見出しには<h1>~<h6>まで重要度の異なる6つのタグがあります。
まずは、<h1>タグを使ってみましょう。

1. HTMLファイルにソースコードを記述

①ソース・フォルダー :webpage/ch02
②ファイル名     :header.html

➢ header.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>HTMLの基礎</title>
    </head>
    <body>
        <h1>HTMLの基礎</h1>
    </body>
</html>

「HTMLの基礎」というテキストを、<h1>タグで囲みました。

2. ブラウザで表示を確認

ブラウザでどのように表示されるか、確認しましょう。

図 2.5.1

<h1>~</h1>で囲まれた文章が、見出しです。字が大きく太字で表示されているのがわかります。

◉見出しの種類

見出しを示す要素には、h1~h6までの6種類があります。
「h」に続く数字は、見出しのレベル(重要度)を示しており、h1がもっとも上位の見出し(大見出し)で、h6はもっとも下位の見出し(小見出し)となります。
一般的なブラウザでは、重要度の高い見出しほど大きく表示されます。

2.5.2 リスト

リストはいわゆる箇条書きのことで、よく使用されるタグのひとつです。リストを使って、ナビゲーションメニューの項目をリストアップします。

1. HTMLファイルにソースコードを記述

①ソース・フォルダー :webpage/ch02
②ファイル名     :list.html

➢ list.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>HTMLの基礎</title>
    </head>
    <body>
        <h1>HTMLの基礎</h1>
        <ul>
            <li>ホーム</li>
            <li>会社案内</li>
            <li>アクセス</li>
            <li>お問い合わせ</li>
        </ul>
    </body>
</html>

リスト形式で表示させたいテキスト全体を囲むように<ul>タグでマークアップし、リストにしたい文字列を<li>タグでマークアップします。<ul>要素、<li>要素を指定したテキストがリスト形式で表示されます。

<ul>タグは箇条書きとしてコンテンツの本文中に使用されるほか、ナビゲーションメニューの項目を列挙するときにもよく使用されます。

<ul>タグの子要素は必ず<li>タグで、テキストやほかのタグが子要素になることはありません。

2.5.3 段落

段落には、<p>タグを使用します。HTMLタグの中でも一番よく使用されるタグです。

1. HTMLファイルにソースコードを記述

①ソース・フォルダー :webpage/ch02
②ファイル名     :paragraph.html

➢ paragraph.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>HTMLの基礎</title>
    </head>
    <body>
        <h1>HTMLの基礎</h1>
        <ul>
            <li>ホーム</li>
            <li>会社案内</li>
            <li>アクセス</li>
            <li>お問い合わせ</li>
        </ul>
        <p>
            HTMLの基礎を勉強しています。
        </p>
        <p>
            HTMLの基礎を勉強しています。
        </p>
        <p>
            HTMLの基礎を勉強しています。
        </p>
    </body>
</html>

<p>~</p>で囲まれた部分がひとつの段落として表示されます。
<p>タグはparagraph(段落)の略で、それがひとつの段落であることを表します。

2.5.4 改行

テキストを強制的に改行するには<br>タグを使用します。

1. HTMLファイルにソースコードを記述

①ソース・フォルダー :webpage/ch02
②ファイル名     :break.html

➢ break.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>HTMLの基礎</title>
    </head>
    <body>
        <h1>HTMLの基礎</h1>
        <ul>
            <li>ホーム</li>
            <li>会社案内</li>
            <li>アクセス</li>
            <li>お問い合わせ</li>
        </ul>
        <p>
            HTMLの基礎を勉強しています。<br>
            HTMLの基礎を勉強しています。<br>
            HTMLの基礎を勉強しています。
        </p>
    </body>
</html>

<br>タグには開始タグ・終了タグはありませんので、改行したいポイントに記述します。
<br>は、Breakの略で、改行を意味します。