HTML and CSS Reference
In-Depth Information
Figure 4-7.
Taskbar with no styling
Now it's time to add the first card to the deck, the Movie List card. This is simple
and is done by creating an unordered list of data, as shown in the code in
Listing 4-13.
Listing 4-13.
List of Saved Movies
<ul class="list alternating medium">
<li>
<a href="path/to/movie/">
<video poster="img/video.jpg" title="Movie Title">
<source type="video/webm" src="path/to/video.webm" />
</video>
<h2>My Movie Title</h2>
<p>My Movie Description</p>
</a>
</li>
<li>
<a href="path/to/movie/">
<video poster="img/video.jpg" title="Movie Title">
<source type="video/webm" src="path/to/video.webm" />
</video>
<h2>My Movie Title</h2>
<p>My Movie Description</p>
</a>
</li>
</ul>
In HTML5, you can surround block-level elements with the
href
tag. This makes
it easier to make the entire content of a list item a link to another resource.
