<p><img src="/photo/yatsugatake02.jpg" alt="八ヶ岳" /><br />
  山梨県韮崎市神山町鍋山からの八ヶ岳。</p>

と，下の記述を比べてみてください。

<dl class="image">
  <dt><img src="/photo/yatsugatake02.jpg" alt="photo:八ヶ岳遠景" /></dt>
  <dd>山梨県韮崎市神山町鍋山からの八ヶ岳。</dd>
</dl>

dt要素に写真画像が入り，dd要素で「今からdtのなかみについて説明しますよ」と明示するわけです。p要素ではこうしたことは示すことができません。

CSSのほうは，次のようにしました。

#contents dl.image dt img {
  border-right: solid 1px #8C8C8C;
  border-bottom: solid 1px #8C8C8C;
  border-top: solid 1px #D9D9D9;
  border-left: solid 1px #D9D9D9;
  padding: 2px;
}

#contents dl.image dd {
  margin-left: 0.5em;
  margin-bottom: 20px;
  background: url(/img/bg-point.gif) no-repeat 2px center;
  padding-left: 14px;
}

まず，dt要素に入れられたimg要素の装飾です。4辺のborderのうち，右と下を濃いめにしてあります。ちょっと浮き出たような感じになると思います。写真とborderまでの間に2pxの余白を入れて，ちょっと縁がついたようになっています。borderの色・太さ，paddingの値を変えれば，いろいろなバリエーションができるでしょう。background-colorを入れると縁の部分に色をつけることもできます。画像をわざわざ加工しなくても，簡単なCSSでちょっと飾ることができます。

dd要素のキャプションには，頭に印がつくように背景画像が入れてあります。この背景画像とテキストの位置合わせをします。ブラウザのデフォルトの設定では，dd要素の左側に若干のマージンが入るようになっていますので，改めてmargin-left: 0.5em;と設定してあります。

山梨県韮崎市神山町鍋山からの八ヶ岳。

border，padding，backgroundで作ったバリエーションをいくつか。

縁なし。右と下に濃いborderを入れた。

dl.image dt img {
  border-right: solid 1px #000;
  border-bottom: solid 1px #000;
}

縁あり・隆起。outset。

dl.image dt img {
  border: outset 1px #999;
  padding: 5px;
}

縁あり・隆起。borderのコントラストを調整したいときは，各辺ごとに。

dl.image dt img {
  border-right: solid 1px #000;
  border-bottom: solid 1px #000;
  border-top: solid 1px #EEE;
  border-left: solid 1px #EEE;
  padding: 5px;
}

縁あり・押下。inset。

dl.image dt img {
  border: inset 1px #999;
  padding: 5px;
}

色つき縁あり・隆起。backbroundで色をつける。

dl.image dt img {
  border-right: solid 1px #333;
  border-bottom: solid 1px #333;
  border-top: solid 1px #CCC;
  border-left: solid 1px #CCC;
  padding: 5px;
  background: #DDF;
}

二重線の縁あり。

dl.image dt img {
  border: double 3px #666;
}

影つき。

dl.image dt {
  position: relative;
  margin-top: 6px;
  margin-left: 6px;
  width: 240px;
  height: 180px;
  background: #DDD;
}

dl.image dt img {
  position: absolute;
  top: -6px;
  left: -6px;
}

縁あり・影つき。

dl.image dt {
  position: relative;
  margin-top: 6px;
  margin-left: 6px;
  width: 252px;
  height: 192px;
  background: #DDD;
}

dl.image dt img {
  position: absolute;
  top: -6px;
  left: -6px;
  border: solid 1px #CCC;
  padding: 5px;
  background: #FFF;
}

値を変えて，いろいろ工夫してみてください。