HTML5是目前最流行的前端開發語言之一，許多開發者都對其有著深入的了解。在HTML5中，左圖右字布局是非常常見的一種布局方式。下面我們將介紹一下HTML5如何使用左圖右字的代碼實現這種布局方式。

<div>
<img src="example.jpg" alt="example" style="float:left">
<p>這里是左圖右字的示例文本。</p>
</div>

以上代碼中，我們使用了<div>標簽來包裹左側的圖片和右側的文字。在圖片的<img>標簽中，我們使用了float:left屬性來使其左浮動。在右側的文字<p>標簽中，我們沒有添加任何特殊的樣式，只需要將它放在圖片的右側即可。

使用以上代碼可以輕松實現左圖右字的效果。但是需要注意的是，在實際開發中，我們可能需要將圖片和文字分別放在不同的地方，而不是在同一個<div>標簽中。此時，我們可以通過樣式表來實現左圖右字布局。

.left-img{
float:left;
margin-right: 20px;
}
.right-text{
margin-left: 20px;
}

在以上樣式表中，我們使用了.left-img類添加了圖片的左浮動，并設置了一個右邊距。同時，我們還使用了.right-text類添加了文字的左邊距，使得文本與圖片相隔一定距離。

總之，HTML5使用左圖右字的代碼實現非常簡單，無論是使用標簽還是樣式表，我們都可以輕松實現這一布局方式。如果你還不熟悉HTML5的其他開發方法，那么現在就是學習的好時機了！