编写此HTML/CSS的更好方法？

我有一个浮动左边的图像，它的右边有一个标题和一个小文本。我的问题是，是否有更好的写作方法。我做了一个jsFiddle为这个在

这是没有css的代码

<div style="float: left;">
<div id="image">
<img src="http://b.dryicons.com/images/icon_sets/shine_icon_set/png/48x48/light_bulb.png">
</div>
<p class="title">Here goes a title</p>
<div id="text">here goes two or more lines for content
</div>
</div>

这里有一个标题
这里有两行或多行内容

谢谢

这个怎么样：

html:

---

还请记住，将ID用作css选择器实际上不是一个好主意。

更具语义的东西：

<article>

  <img src="http://b.dryicons.com/images/icon_sets/shine_icon_set/png/48x48/light_bulb.png" alt="">

  <h1>Here goes a title</h1>
  <p>here goes two or more lines for content</p>

</article>

---

…但您可能需要调整它以满足更多需要。
如果您希望标记更具语义，您可以删除一些div，因为它们不是真正需要的，并使用标题标记而不是p标记作为标题

<div style="float: left;">
   <img src="http://b.dryicons.com/images/icon_sets/shine_icon_set/png/48x48/light_bulb.png">
   <h2>Here goes a title</h2>
   <p>here goes two or more lines for content</p>
</div>

也许是这样的


这里有一个标题
这里有两行或多行内容

.side内容{float:left}
.side内容img{float:left}
.side内容h2{color:#2D101F；字体系列：georgia}
.side content p{填充底部：20px；字体大小：11px；行高：13px}
您可能会得到一些不同的答案。你所拥有的并不可怕，但我试着清理一下。其中一些可以归结为个人偏好

HTML

<div class="imageholder">
<img src="http://b.dryicons.com/images/icon_sets/shine_icon_set/png/48x48/light_bulb.png">
<h3>Here goes a title</h3>
<p>here goes two or more lines for content</p>
</div>

变化：


将标题转换为h3以提供一些上下文。如果某件事是一个标题，就这样对待它
给它上了一节课，去掉了额外的课。用继承处理其余部分
取出内联样式
去掉了图像包装器div，并用CSS处理了它

如果浮点数是一个又一个的倍数，可能会有一些问题，但这很难说
 谢谢！事实上，我不明白他们为什么不使用背景，但他们不使用背景图像，因为他们认为，内容可能会在服务器端动态生成，可以使用其他图像而不是当前图像，并且他们不想使用脚本更改框（或每个框）上的css属性
<div style="float: left;">
   <img src="http://b.dryicons.com/images/icon_sets/shine_icon_set/png/48x48/light_bulb.png">
   <h2>Here goes a title</h2>
   <p>here goes two or more lines for content</p>
</div>

div img {float:left;width:50px;}

div h2 {
    color:#2D101F;
    font-family: georgia;

}

div p {
    font-size: 11px;
    line-height: 13px;
}

<div class="side-content">
    <img src="http://b.dryicons.com/images/icon_sets/shine_icon_set/png/48x48/light_bulb.png" />
    <h2>Here goes a title</h2>
    <p>here goes two or more lines for content</p>
</div>

.side-content{float:left}
.side-content img{float:left}
.side-content h2{color:#2D101F;font-family:georgia}
.side-content p{padding-bottom:20px;font-size:11px;line-height:13px}

<div class="imageholder">
<img src="http://b.dryicons.com/images/icon_sets/shine_icon_set/png/48x48/light_bulb.png">
<h3>Here goes a title</h3>
<p>here goes two or more lines for content</p>
</div>

.imageholder {float:left;}
.imageholder img { float: left; width: 50px; }
.imageholder h3 {color:#2D101F;font-family: georgia;}
.imageholder p { font-size: 11px; line-height: 13px;}