文字情報の表示ページをつくる

見出し表示

表示例

ソース解説

■ HTML ファイルの作成
まず最初に、テキストエディターで以下の【リスト1】の内容をを入力します。

index.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>ここにタイトルを書く</title>
    </head>
    <body>
        <h1>h1見出し</h1>
        <h2>h2見出し</h2>
        <h3>h3見出し</h3>
        <h4>h4見出し</h4>
        <h5>h5見出し</h5>
        <h6>h6見出し</h6>
        見出しは、h1 ～ h6 までタグがあります。

        <p>ここは「pタグ」で囲まれた部分で、一つの段落として扱われる。
        </p>

        ここでは改行を入れてみます。<br />
        「brタグ」を入れることで改行されて表示します。

        <!-- コメントも書くことができます。 -->
    </body>
</html>

ファイル名「index.html」、文字コードは「UTF-8」で保存して下さい。

タグと要素の説明

<h1> ～ </h1>
見出しのタグです。
ここは「pタグ」で囲まれた部分は、見出しとして扱われます。
「h1」から「h6」まであります。


<p> ～ </p>
ここは「pタグ」で囲まれた部分で、一つの段落として扱われます。


<br>
「brタグ」を入れることで改行されて表示します。

また、「<!--」と「-->」の間にソース内のコメントを書くことができます。

 

文字装飾

次に、文字修飾のタグを追加してみます。

表示例

ソース解説

index.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>太文字・強調文字等のサンプル</title>
    </head>
    <body>
        <h1>太文字・強調文字等のサンプル</h1>

        <p>文字の装飾のタグを紹介します。</p>
        <h2>文字を強調表示や重要文字等を表現する</h2>

        <p>「em要素」を使って表示すると「<em>こんな感じ!!</em>」で、
            強調したいテキストを表します。</p>
        <p>「strong要素」を使って表示すると「<strong>こんな感じ!!</strong>」で、
            強い重要性を表します。</p>
        <p>「b要素」を使って表示すると「<b>こんな感じ!!</b>」で、
            他のテキストとの違いを表します。</p>

    </body>
</html>

タグと要素の説明

<em> ～ </em>
「emタグ」で囲まれた部分は、強調したいテキストを表します。

 

<strong> ～ </strong>
「strongタグ」で囲まれた部分は、強い重要性を表します。

 

<b> ～ </b>
「bタグ」で囲まれた部分は、他のテキストとの違いを表します。

 

これらのタグはブラウザでは太字で表示される事が多いですが、「emタグ＝太字」「strongタグ＝太字」「bタグ＝太字」という定義がされている訳ではありません。