文字情報の表示ページをつくる
見出し表示
表示例

ソース解説
■ 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タグ=太字」という定義がされている訳ではありません。