Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Practice Structuring and Grouping Content!
You have completed Practice Structuring and Grouping Content!
Preview
This video covers one solution to the "Structuring and Grouping Content" challenge.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up