HTML and CSS Reference
In-Depth Information
Later, when we create the schedule for our conference, these ID attributes will
serve as anchors, allowing us to link from the schedule to a speaker's profile.
Additionally, the closing tag of the
<div>
element is followed by the opening of
an HTML comment, and the opening tag of the
<aside>
element is preceded by
the closing of an HTML comment. Because the column-based classes will display
these elements as
inline-block
elements, we are removing the blank space
that will appear between them.
5.
Inside the two-thirds column, marked up with the
<div>
element, we'll use a few
headings and paragraphs to show the speaker's name, the title and abstract of the
talk, and a short biography.
Including this content, a speaker section will look like this:
1.
<section id="shay-howe">
2.
3.
<div class="col-2-3">
4.
5.
<h2>Shay Howe</h2>
6.
<h5>Less Is More: How Constraints Cultivate Growth</h5>
7.
8.
<p>By setting constraints, we force ourselves...</p>
9.
10.
<h5>About Shay</h5>
11.
12.
<p>As a designer and front-end developer, Shay...</p>
13.
14.
</div><!--
15.
16.
--><aside class="col-1-3">
17.
...
18.
</aside>
19.
20.
</section>
6.
Within the one-third column, marked up with an
<aside>
element, we're going
to add a
<div>
element with a class attribute value of
speaker-info
. We'll
use a
<div>
element because we'll be adding styles to this element soon.
Before getting into any styles, though, let's add an unordered list within the
<di-
v>
element that includes as list items some relevant links for the speaker.
Now our HTML for a speaker will look like this:
Search WWH ::
Custom Search