文章の作成

1.段落と改行

HTML文書の中で段落を表すにはp要素を使います。段落を分けるのではなく単に改行を行いたい場合にはbr要素を使います。

<p>コンテンツ</p>

<p>    
長い休みを利用して旅行を計画しました。目的地としては色々な場所が頭を
よぎりましたが、日数的にもそれほど余裕が無いこともあって国内旅行を前
提で考え、最終的に函館で決定しました。
</p>
<p>
出発当日幸いにも快晴の中を早朝から出発しました。短い旅行ですので荷物
は最小限のものだけです。<br>空港に着いてみると平日ということもあり
比較的空いています。出発まで少し予定がありましたので中々のんびりと見て回
ったことのなかったお土産やさんなどを見物してまわりました。
</p>

ブラウザで開く

2.空白や改行をそのまま表示

pre要素はコンテンツとして記述された内容に対して空白文字などに関する変換を行わず入力された通りに表示します。

<pre>コンテンツ</pre>

<pre>
int main(void){
    printf("Hello World!¥n");
    return 0;
}
</pre>

ブラウザで開く

<pre>
非常に長い文章を記述しても自動で改行は行われませんので注意して下さい。なおpre要素内
であっても<a href="../index.html">リンク</a><em>強調表示</em>を表す要素を記述することもできます。
</pre>

ブラウザで開く

3.他の文章を引用

ある程度の長さの文章を引用する場合にはblockquote要素を使います。

<blockquote> <p> 引用文 </p> </blockquote>

<p>    
地球以外の星に生物がいるかどうかは誰にも分かりませんが火星に生物がいる
かどうにかについて下記のような記述もあります。
</p>
<blockquote>
<p>
火星の表面を撮影した写真を詳細に分析した結果、生物が移動した跡らし
きものを発見した。
</p>
<p>
引用:火星に生物?,2009年1月12日11時30分,火星ニュース
<p>
</blockquote>
<p>
もしも火星に生物がいるのであれば他の星にもいる可能性が高いですね。
</p>

ブラウザで開く

引用する言葉が短く文章の途中で記述したい場合にはq要素を使います。

<q>t引用</q>

<p>
地球以外の星に生物がいるかどうかについては、<q>地球以外に生物いる
可能性は99%</q>という研究発表もあり近い将来発見されるのではないか
と期待されています。
</p>

ブラウザで開く

4.強調表示

文章の中で重要な単語など一部を強調したい場合に使われる要素がem要素とstrong要素です。

<em>テキスト</em>
<strong>テキスト</strong>

<p>
  この施設は世界で始めて導入された<strong>超立体投
  影法</strong>を利用しています。なおこの施設に入
  場するには<em>年齢制限</em>があります。
  <p>

ブラウザで開く

スタイルシートを使って任意のものに変更することができます。

  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" >
    <title<強調表示</title>

   <style type="text/css">
    em{
      color:#ff8c00;
      font-style:normal;
    }

    strong{
      font-size:1.5em;
    }
    </style>
     </head>
  <body>    

   <p>
  この施設は世界で始めて導入された<strong>超立体投
  影法</strong>を利用しています。なおこの施設に入
  場するには<em>年齢制限</em>があります。
  <p>

ブラウザで開く

5.上付き文字と下付き文字

上付き文字を使う場合にはsup要素を使います。

<sup>テキスト</sup>

下付き文字を使う場合にはsub要素を使います。

<sub>テキスト</sub>

  <p>
  因数分解の例:
  </p>

  <p>
  x<sup>2</sup> + 2xy + y<sup>2</sup> = (x + y)<sup>2</sup><br>
  x<sup>2</sup> - y<sup>2</sup> = (x + y)(x - y)
  </p>

  <p>
  分子式の例:
  </p>

  <p>
  水 H<sub>2</sub>O<br>
  アンモニア NH<sub>3</sub>
  </p>

ブラウザで開く

6.略語の表示

略語が何の略なのかを表すためにabbr要素が用意されています。abbr要素で対象となる略語をマックアップした上でtitle属性に略語の元の言葉を記述します。ブラウザによっても少し異なりますが、abbr要素でマークアップされた略語にマウスを合わせると略語の元の言葉がツールチップとして表示されます。
同じような使い方をする要素としてacronym要素は HTML5では廃止されました。

<abbr title="元の言葉">略語</abbr>

  <p>
  <abbr title="Extensible Markup Language">XML</abbr><abbr title="Standard Generalized Markup Language">SGL</abbr>を
  ベースに作成された言語です。
  </p>

ブラウザで開く

7.追加と削除の修正履歴

追加されたことを表すにはins要素を使います。

<ins>追加されたデータ</ins>

削除されたことを表すにはdel要素を使います。

<del>追加されたデータ</del>

 <p>
  この文書は2008年10月12日に作成されました。<ins>現在は日時は正確で
  は無いという意見もあります。</ins>
  </p>

  <p>
  作者はアメリカ人<del>ではないかと考えられています</del>です。
  </p>

ブラウザで開く