Preview
Video Player
00:00
00:00
One Solution
5:00This video covers one solution to the "Structuring and Grouping Content" challenge.
Hopefully, you were able to write most or
all of the HTML elements for
0:00
this practice session.
0:03
If not, that's okay you can watch my
solution, compare it to what you wrote,
0:05
and then try to recreate it yourself.
0:08
The goal was to divide the HTML document
into logical sections using elements that
0:10
help describe sections or
groups of content,
0:15
as well as elements that describe
headings, paragraphs, lists, and links.
0:18
Now, I'll show you my solution,
0:23
you can also reference my code when
you download the project files.
0:25
First, I added a title inside the head
of the page using the title element and
0:28
I set the title text to Front End DevConf.
0:35
Next, inside the body to begin
dividing the content into logical
0:38
sections I first included
the header tag to
0:43
group the introductory content
at the top of the page.
0:46
I placed the main heading inside h1 tags,
0:49
which describes the most
important heading on the page,
0:52
and I wrap the site description within
p tags, which creates a paragraph.
0:56
For the navigation I first
used the nav element,
1:00
which describes a navigation or
a set of related links.
1:04
Inside the nav element I used
an unordered list to display each link.
1:08
Each list item contains an anchor
element that wraps the link text,
1:14
and I'm using the pound symbol as
a place holder href value for now.
1:19
Up next, below the header I
added the main element to
1:25
group the main content of the page.
1:29
Notice how the main tags wrap everything
except the header and footer content.
1:32
In HTML, the section element groups
together related sections of content.
1:42
So inside the main element
I first group the About and
1:48
Topics content into a section
of content using section tags.
1:52
The About heading should be a level 2
heading so I wrapped it within h2 tags.
1:58
I placed the text below
the h2 inside paragraph tags.
2:04
Now, in this case, the Topics heading
isn't as important as the About heading so
2:09
I placed the text inside an h3,
or level 3 heading, element.
2:16
Next, I displayed the list of topics as
an unordered list using the ul element.
2:21
Right below,
2:29
I once again grouped together the
Speakers' content using a section element.
2:30
I placed the Speakers
heading inside an h2 element,
2:36
and I made each speaker name an h3,
2:40
then placed each of their bios
inside a paragraph element.
2:43
Next, task six asked that you place
the testimonials inside an element that's
2:53
used for content that is related to,
but separate from surrounding content.
2:59
So for this I used an aside element,
which is for
3:04
sectioning content that is
a deviation from the main content or
3:07
content that could oftentimes
be displayed as a sidebar.
3:11
I displayed the aside heading as an h3 and
I grouped each quote and
3:15
quotee, or originator of the quote,
inside a blockquote element.
3:21
I also placed each name in
a citation element using cite tags.
3:27
Now, in HTML, the footer tag
also lets us add separate
3:32
information about a quote
in a semantic way,
3:36
so I included a footer element
inside each blockquote to contain
3:39
the citation elements.
3:44
Right below the aside I placed the
schedule content inside a section element,
3:46
where the section heading,
once again, is an h2,
3:52
and I displayed the schedule as
an ordered list using the ol element.
3:57
Now, to make sure that the name of
a talk as well as a speaker name and
4:03
time are displayed on separate lines
in each list item, I displayed the talk
4:07
name as an h3, the speaker name as a
paragraph, and the time as a span element.
4:13
You could've used a different approach for
this and that's okay.
4:18
Finally, at the bottom of the file I
place the footer content inside a footer
4:21
element and I display the footer text
as a paragraph, which wasn't required.
4:26
Then I wrap the word Treehouse with an a,
or anchor tags, to create my link,
4:32
which has a href value that
points to the Treehouse website.
4:38
All right, so
4:43
I hope that you were able to complete
this HTML practice session successfully.
4:44
If not, why not start over and
4:48
try to write it again without
looking at my version.
4:49
You're also going to learn a whole lot
more about writing HTML here at Treehouse.
4:52
Thanks everyone and happy learning.
4:57