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:
Click here to view code image
1. <section id="shay-howe">
3. <div class="col-2-3">
5. <h2>Shay Howe</h2>
6. <h5>Less Is More: How Constraints Cultivate Growth</h5>
8. <p>By setting constraints, we force ourselves...</p>
10. <h5>About Shay</h5>
12. <p>As a designer and front-end developer, Shay...</p>
14. </div><!--
16. --><aside class="col-1-3">
17. ...
18. </aside>
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