Preview
Video Player
00:00
00:00
Introducing the Practice
1:29This video introduces the challenge relating to "Semantic HTML" that you'll be working to complete.
[MUSIC]
0:00
Hey everyone, Guil here.
0:08
It's time for some practice, to help
make the skills you've learned stick and
0:09
help you become a faster and
better developer.
0:13
In this workshop, you are going to
practice writing semantic markup.
0:15
Semantics in HTML is the idea that markup
should describe the meaning of your
0:19
content, rather than define its
presentation, or how it looks.
0:23
And having a solid semantic content
structure also makes your website more
0:26
accessible to users of
assistive technology.
0:30
To get started,
launch the workspace with this video.
0:32
The workspace contains a file named
index.html which contains content about
0:35
hedgehogs, because what's
not to like about hedgehogs?
0:38
There is also an img folder that
holds an image of a hedgehog,
0:42
which you can see once you preview
index.html on the browser.
0:46
Now, the content looks mostly readable and
0:49
the page is not too difficult to scan,
but when you view the markup
0:51
you might notice that it's not
all written in a semantic way.
0:56
Now, I won't point out which parts yet,
0:59
because that's what you will be looking
for and fixing in this practice session.
1:01
You will need to rewrite most of
index.html using semantic markup
1:05
that better communicates
the meaning of the content.
1:10
The HTML comments specify the sections
of content that you'll need to fix.
1:13
The goal is to get your
page from looking like this
1:18
to more like this when you're done.
1:21
So good luck, have fun, and in the next
video I'll walk you through one solution.
1:24