About your HTML
Removing all the div elements that seem to be needed only for presentation, you have this markup:
<h2 class="page-header">Comments</h2>
<section class="comment-list">
<!-- First Comment -->
<figure class="thumbnail">
<img class="img-responsive" src="http://www.keita-gaming.com/assets/profile/default-avatar-c5d8ec086224cb6fc4e395f4ba3018c2.jpg" />
<figcaption class="text-center">username</figcaption>
</figure>
<header class="text-left">
<div class="comment-user"><i class="fa fa-user"></i> That Guy</div>
<time class="comment-date" datetime="16-12-2014 01:05"><i class="fa fa-clock-o"></i> Dec 16, 2014</time>
</header>
<div class="comment-post">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<p class="text-right"><a href="#" class="btn btn-default btn-sm"><i class="fa fa-reply"></i> reply</a></p>
</section>
Element for all comments
The class name comment-list suggests that the section groups all comments (which would be the appropriate element for a list of comments appropriate element for a list of comments). If that’s the case, the heading ("Comments") should be a child of this section.
<section>
<h2>Comments</h2>
<!-- all comments -->
</section>
Element for a single comment
For each comment, you should should use the article element.
<section>
<h2>Comments</h2>
<article><!-- First comment --></article>
<article><!-- Second comment --></article>
</section>
Element for CSS icons
Using the i element for CSS/font icons is not appropriate i element for CSS/font icons is not appropriate. Use span instead.
datetime format
Your time element’s datetime value is not in the correct format.
In your case it probably should be
<time datetime="2014年12月16日T01:05">Dec 16, 2014</time>
Username / avatar
I don’t understand why you seem to reference two usernames ("username" in figure, "That Guy" in header), but using figure for the avatar doesn’t seem to be the best choice to me (not saying that it would necessarily be wrong).
Is the username really the caption of the avatar image? I’d rather think that these two, the avatar and the username, stand on their own. But if you think it make sense, keep it like that.
About your HTML
Removing all the div elements that seem to be needed only for presentation, you have this markup:
<h2 class="page-header">Comments</h2>
<section class="comment-list">
<!-- First Comment -->
<figure class="thumbnail">
<img class="img-responsive" src="http://www.keita-gaming.com/assets/profile/default-avatar-c5d8ec086224cb6fc4e395f4ba3018c2.jpg" />
<figcaption class="text-center">username</figcaption>
</figure>
<header class="text-left">
<div class="comment-user"><i class="fa fa-user"></i> That Guy</div>
<time class="comment-date" datetime="16-12-2014 01:05"><i class="fa fa-clock-o"></i> Dec 16, 2014</time>
</header>
<div class="comment-post">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<p class="text-right"><a href="#" class="btn btn-default btn-sm"><i class="fa fa-reply"></i> reply</a></p>
</section>
Element for all comments
The class name comment-list suggests that the section groups all comments (which would be the appropriate element for a list of comments). If that’s the case, the heading ("Comments") should be a child of this section.
<section>
<h2>Comments</h2>
<!-- all comments -->
</section>
Element for a single comment
For each comment, you should use the article element.
<section>
<h2>Comments</h2>
<article><!-- First comment --></article>
<article><!-- Second comment --></article>
</section>
Element for CSS icons
Using the i element for CSS/font icons is not appropriate. Use span instead.
datetime format
Your time element’s datetime value is not in the correct format.
In your case it probably should be
<time datetime="2014年12月16日T01:05">Dec 16, 2014</time>
Username / avatar
I don’t understand why you seem to reference two usernames ("username" in figure, "That Guy" in header), but using figure for the avatar doesn’t seem to be the best choice to me (not saying that it would necessarily be wrong).
Is the username really the caption of the avatar image? I’d rather think that these two, the avatar and the username, stand on their own. But if you think it make sense, keep it like that.
About your HTML
Removing all the div elements that seem to be needed only for presentation, you have this markup:
<h2 class="page-header">Comments</h2>
<section class="comment-list">
<!-- First Comment -->
<figure class="thumbnail">
<img class="img-responsive" src="http://www.keita-gaming.com/assets/profile/default-avatar-c5d8ec086224cb6fc4e395f4ba3018c2.jpg" />
<figcaption class="text-center">username</figcaption>
</figure>
<header class="text-left">
<div class="comment-user"><i class="fa fa-user"></i> That Guy</div>
<time class="comment-date" datetime="16-12-2014 01:05"><i class="fa fa-clock-o"></i> Dec 16, 2014</time>
</header>
<div class="comment-post">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<p class="text-right"><a href="#" class="btn btn-default btn-sm"><i class="fa fa-reply"></i> reply</a></p>
</section>
Element for all comments
The class name comment-list suggests that the section groups all comments (which would be the appropriate element for a list of comments). If that’s the case, the heading ("Comments") should be a child of this section.
<section>
<h2>Comments</h2>
<!-- all comments -->
</section>
Element for a single comment
For each comment, you should use the article element.
<section>
<h2>Comments</h2>
<article><!-- First comment --></article>
<article><!-- Second comment --></article>
</section>
Element for CSS icons
Using the i element for CSS/font icons is not appropriate. Use span instead.
datetime format
Your time element’s datetime value is not in the correct format.
In your case it probably should be
<time datetime="2014年12月16日T01:05">Dec 16, 2014</time>
Username / avatar
I don’t understand why you seem to reference two usernames ("username" in figure, "That Guy" in header), but using figure for the avatar doesn’t seem to be the best choice to me (not saying that it would necessarily be wrong).
Is the username really the caption of the avatar image? I’d rather think that these two, the avatar and the username, stand on their own. But if you think it make sense, keep it like that.
About your HTML
Removing all the div elements that seem to be needed only for presentation, you have this markup:
<h2 class="page-header">Comments</h2>
<section class="comment-list">
<!-- First Comment -->
<figure class="thumbnail">
<img class="img-responsive" src="http://www.keita-gaming.com/assets/profile/default-avatar-c5d8ec086224cb6fc4e395f4ba3018c2.jpg" />
<figcaption class="text-center">username</figcaption>
</figure>
<header class="text-left">
<div class="comment-user"><i class="fa fa-user"></i> That Guy</div>
<time class="comment-date" datetime="16-12-2014 01:05"><i class="fa fa-clock-o"></i> Dec 16, 2014</time>
</header>
<div class="comment-post">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<p class="text-right"><a href="#" class="btn btn-default btn-sm"><i class="fa fa-reply"></i> reply</a></p>
</section>
Element for all comments
The class name comment-list suggests that the section groups all comments (which would be the appropriate element for a list of comments). If that’s the case, the heading ("Comments") should be a child of this section.
<section>
<h2>Comments</h2>
<!-- all comments -->
</section>
Element for a single comment
For each comment, you should use the article element.
<section>
<h2>Comments</h2>
<article><!-- First comment --></article>
<article><!-- Second comment --></article>
</section>
Element for CSS icons
Using the i element for CSS/font icons is not appropriate. Use span instead.
datetime format
Your time element’s datetime value is not in the correct format.
In your case it probably should be
<time datetime="2014年12月16日T01:05">Dec 16, 2014</time>
Username / avatar
I don’t understand why you seem to reference two usernames ("username" in figure, "That Guy" in header), but using figure for the avatar doesn’t seem to be the best choice to me (not saying that it would necessarily be wrong).
Is the username really the caption of the avatar image? I’d rather think that these two, the avatar and the username, stand on their own. But if you think it make sense, keep it like that.