HTML5 Tutorial 4 - Tags Video Lecture | HTML5 from Scratch - Software Development

hello Internet my name is Travis Nielsen
this is Deb tips for designers a YouTube
channel where we talk about all the cody
bits in the last three videos we've
talked about the history of html5 and
the philosophy behind it
then we talked about the dawn or the
document object model which is a
description of how everything on the web
page works together so if you haven't
watched those three videos yet I
recommend that you do they lay a really
good foundation for today's topic
however it's not required to understand
what we're talking about today in
today's video we're going to talk about
HTML tags the fundamental building block
of the Internet after that we're going
to go through a list of the top 10 most
often use HTML tags ok let's look at how
to build an HTML tag you can think of it
as a sandwich where the two pieces of
bread are the opening and closing bits
of the tag and the meat lettuce and
cheese and tomato and pickles
are the contents of your website stupid
let me explain it this way the first
thing we do is take the content of your
site so in this case it's a paragraph
and then you wrap the HTML tag around
the content so in this case would be a P
tag or a paragraph tag
the thing to remember is that all HTML
tags can optionally carry attributes
which are little key value pairs that
can help to further define the content
and functionality of the tag consider an
anchor tag it's a classic example
there's an attribute of an href and that
href should contain the URL of whatever
you want the hyperlink to point to keep
in mind that semantics tell us that we
should use the tag that best describes
the content of whatever we're marking up
for example a navigation item would go
in the nav tag a header or footer in
their respective tacks some tags are
ambiguous and meaning like a span or a
div and some are not like a paragraph or
an article let's run through a list of
the most commonly used HTML tags first
is not actually one tag but a group of
tags we call headings
these are h1 to h6 these elements rank
in importance according to the number in
their main the h1 element has the
highest rank where the h6 element will
have the lowest rank if two elements
have the same number they are in the
same level in the rank of importance the
P tag we've already seen this one is for
paragraphs if you have a paragraph wrap
it in the P tag easy M represents the
stress of emphasis on its contents the
stress being referred to as linguistic
if spoken this stress can change the
pronunciation of the word and can change
linguistic meaning of the work in a
sentence remember by default M also
italicized as that which you wrap it
around strong it represents a strong
importance of its content by default
this will bold the content that you wrap
it around the anchor or the a or the
link these little guys are the magic
that make the web the web you wrap an a
tag around any word that you want to
create a hyperlink atom you can then use
the attribute of a ref like we talked
about before to point that link to a
specific place on the internet the group
of tags that are the UL and the li the
UL means unordered list it represents
the entire list of items where the order
of the list is unimportant the Li means
list item it is the individual item in
the list you can often find many of
these inside of the UL an HR is a
horizontal rule it represents a
paragraph level somatic break the its
align the IMG tag represents an image it
relies heavily on its attributes the SRC
or the source of the image is the URL
that can be found on the Internet the
alt attribute is the images fallback
content if the image URL cannot be
displayed and finally the div Google div
the div element simply divides content
it has no semantic meaning at all so it
becomes very usable when creating visual
layouts you'll see these all over the
place
so this is a small taste of all the HTML
tags available to you I'm providing some
links down below that I want you to go
through and take a look at if you can
start right away begin using the tags
and get really familiar with them it's
the only way you're ever going to be
good at writing HTML
okay that's it for today please check
out the other three videos in this
series called html5 basics where we
cover the history philosophy and
physiology behind html5 and if you
haven't yet please don't forget to
subscribe subscribe to death terms it's
a wonderful place to learn development
and yet subscribed go tips