Creating HTML and CSS Markup - Realtime Web Apps: With HTML5 WebSocket, PHP, and jQuery - page 126

The content of this view is separated into three sections:
The header, with the room name and presenter information •

• The “ask a question” form

•
The first two markup elements aren't anything wild, so let's get those out of the way first. Add the two additional
elements in the <section> :

The list of questions

<section>

<header>
<h2>Realtime Web Apps &amp; the Mobile Internet</h2>
<p>
Presented by Jason Lengstorf
(<a href="mailto:[e-mail]">email</a>)
</p>
</header>
<form id="ask-a-question">
<label>
If you have a question and you don't see it below, ask it here.
<input type="text" name="new-question" tabindex="1" />
</label>
<input type="submit" value="Ask" tabindex="2" />
</form><!--/#ask-a-question-->

</section>

Using HTML5's data Attribute
The questions are going to be presented in an unordered list, but there's a twist: instead of creating an extra element
for the vote count, you're going to use the HTML5 data- attribute.
This serves two purposes:

• jQuery has built-in support for accessing this attribute

• CSS can use this attribute to generate content that is unimportant to the document

■ “unimportant” in the context of the previous statement means that the vote count is not vital to the information
being displayed. For that reason, it's being left out of the markup and displayed by CSS instead, thereby keeping the
markup clean and semantic.

Note