- Beginner Recipe: How to markup figures and captions using the figure and figcaption elements
- Beginner Recipe: How to markup the date and time using the <time> element
- Beginner Recipe: Make a Native Toggle Widget with the <details> element
- Beginner Recipe: How to Correctly Use the <address> Element
- Beginner Recipe: Highlight Text with the <mark> Element
- Beginner Recipe: Tracking the Completion of a Task with the <progress> Element
- Beginner Recipe: Measuring with the <meter> Element
- Beginner Recipe: How and When to Use the <s> element
- Beginner Recipe: Changes to existing elements
- Recipe: Wrapping links around elements
- Intermediate Recipe: Adding more semantic information with Microdata
- Intermediate Recipe: Using WAI-ARIA with HTML5
- Advanced Recipe: Markup an Article Page with Comments
From the Rough Cut
From the Rough Cut
From the Rough Cut
Advanced Recipe: Markup an Article Page with Comments
Listing 2.15 has the code needed to create an article page with comments (Figure 2.11). It uses several of the new techniques covered in this chapter.
)
Figure 2.11 Website article with comments
Listing 2.15
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Blog comments</title>
<style>
[role=banner] h1 {background: #333; color: #fff; padding: 5px;}
[role=main] h1 {border-bottom: 2px dotted #333; color: #333;}
b {float: left; font-family:"Palatino Linotype", Palatino, serif;
font-size: 2.5em; font-style: italic; font-weight: bold; line-height:
1; margin: 0 5px 5px 0;}
</style>
</head>
<body>
<header role="banner">
<h1>Tom's blog</h1>
</header>
<article role="main">
<header>
<h1>Title of my article</h1>
<time pubdate datetime="2010-12-12">Sunday, 12th December 2010</time>
<p><b>P</b>ellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Vestibulum tortor ...p>
</header>
<section>
<h2>Comments</h2>
<ol reversed>
<li>
<article>
<header>
<h3><time datetime="2010-12-13T11:15Z">13/12/2010 11:15</time></h3>
</header>
<footer>Comment by<address><a href="http://tomleadbetter.co.uk">
Tom Leadbetter</a></address></footer>
<p>What a splendid article!</p>
</article>
</li>
<li>
<article>
<header>
<h3><time datetime="2010-12-16T11:15Z">16/12/2010 11:15</time></h3>
</header>
<footer>Comment by anonymous</footer>
<p>That was rubbish.</p>
</article>
</li>
</ol>
</section>
</article>
</body>
</html>
In Listing 2.15 we have used some of the ARIA landmark roles, and we have used these to help us style our h1 tags. We also use the b element to style the first letter of the article, to make it a bit fancier. When styling the h1’s and the b elements, you don’t necessarily have to use the CSS above, there are other ways are targeting those elements, but it’s nice to have options isn’t it?
The new time element is used several times, once for the main article, with a pubdate, and then within each comment. In the previous chapter we read that a user comment is an article, so we have used that here, and in this instance we have used the time and date as its heading. We could have used the author of the comment but we don’t want duplicate headings in our outline, using the date and time gives it a unique identifier. This is a personal preference, there is nothing stopping you using, for example, the comment author as the heading.
Also used is an ordered list so that each comment has a number which not only gives us an order of the comments, but gives us a style option as well. The reversed attribute has been used on the ol because in this case we want the latest comment to be at the top. We could potentially then have a "order by date" toggle switch and using JavaScript add or remove the reversed attribute. Again, you don’t have to do this way, there are loads of alternatives and the design of the comments might mean you have to consider other options.