Semantic HTML Tags | HTML5 Semantic Elements Tutorial
Summary
TLDRIn this beginner's HTML tutorial, Dave guides viewers through enhancing their web pages with semantic HTML. He emphasizes the importance of a clear heading hierarchy, utilizing header, main, and footer elements, as well as semantic tags like article, section, nav, and aside. Dave also covers accessibility, using ARIA labels for navigation and introducing interactive elements like details and summary. The lesson concludes with validating and outlining the HTML structure for improved web page organization and assistive technology compatibility.
Takeaways
- 🌟 Use semantic HTML to improve code organization and accessibility for screen readers and other assistive technologies.
- 📚 Start with a clear hierarchy of headers: one main h1 per page, with h2 for subtopics, and h3 for subtopic subsections if needed.
- 🔗 Add a nav element for grouping links that help navigate the page, and label it with aria-label for clarity.
- 📝 Include a header element to wrap the page's main heading and navigation, maintaining the heading hierarchy.
- 📊 Wrap main content in a main element, which should be unique per page to denote the primary content area.
- 🔖 Use article elements for sections with a clear, standalone topic, instead of sections which are more generic.
- 📌 Employ sections within articles for nested content, and use h3 for subheadings to maintain the heading hierarchy.
- 📄 Utilize aside elements for complementary content that is less important than the main article content.
- 🔍 Enhance content with details and summary elements for interactive content, like quizzes or additional information that can be expanded or collapsed.
- 🎨 Use mark and time elements to add semantic meaning to highlighted text and durations, respectively.
- ⚠️ Avoid using div and span elements in favor of semantic elements unless no semantic alternative is available.
Q & A
What are the main tools used in this HTML tutorial?
-The main tools used in this tutorial are the Chrome web browser, Visual Studio Code editor, and the Live Server extension for Visual Studio Code.
How does the hierarchy of headers work in HTML?
-In HTML, the hierarchy of headers starts with one H1 per page as the main title, followed by multiple H2 headers for subtopics, and then H3 headers for subtopics of subtopics. It's recommended not to go beyond three levels of headings.
What is the purpose of the 'nav' element in semantic HTML?
-The 'nav' element in semantic HTML represents a section of the page that groups together links, typically for navigation to other pages or sections within the same site.
Why is using semantic HTML important for web accessibility?
-Semantic HTML is important for web accessibility because it provides additional meaning to the content, making it easier for screen readers and other assistive technologies to interpret and navigate the webpage.
What does the 'header' element in HTML represent?
-The 'header' element in HTML represents the introductory content for a section of the page, which typically includes the page's main heading and navigational links.
What is the 'main' element used for in an HTML document?
-The 'main' element is used to wrap the primary content of the page, indicating that it contains the central topic or focus of the webpage.
How can you label navigation elements for assistive technology?
-You can label navigation elements for assistive technology using the 'aria-label' attribute, which provides a descriptive name for the navigation area.
What is the difference between 'article' and 'section' elements in HTML?
-The 'article' element represents a self-contained composition with a clear topic, while the 'section' element is used to group content that forms a section of a document, such as chapters, headers, or any other sectioning content.
How do you use the 'details' and 'summary' elements together?
-The 'details' element is used to create an interactive widget that contains a 'summary' element. The 'summary' element represents the visible heading for the 'details' element, and clicking on it reveals or hides the additional content within the 'details' element.
What is the purpose of the 'time' element with a 'datetime' attribute?
-The 'time' element with a 'datetime' attribute represents a specific period or date, and the 'datetime' attribute provides a machine-readable format of the date or time, enhancing the semantic meaning of the content for technologies that read the webpage.
Why should 'div' and 'span' elements be avoided when learning HTML?
-Both 'div' and 'span' elements should be avoided when learning HTML because they do not convey semantic meaning by themselves. 'Div' is a block-level element equivalent to a section without semantic meaning, and 'span' is an inline element used for styling without adding value to the content. It's recommended to focus on using semantic elements when starting with HTML.
Outlines
📚 Introduction to Semantic HTML
The video begins with an introduction to a beginner's HTML tutorial series. The presenter, Dave, outlines the tools he will be using, including the Chrome web browser, Visual Studio Code editor, and the Live Server extension. He emphasizes the importance of document organization and semantic HTML, explaining how it improves code readability and navigation. Dave also discusses the hierarchy of headers, from H1 to H6, and their role in structuring content like an essay outline. The main focus of this segment is on adding semantics to the index.html page to enhance its structure and accessibility.
🛠️ Enhancing HTML with Semantic Elements
In this paragraph, Dave continues to improve the HTML code by adding semantic elements such as the 'nav' element for navigation links and 'hr' for horizontal rules, which signify topic changes. He also discusses the importance of the 'header' and 'footer' elements in defining the top and bottom sections of a page. Dave demonstrates how to use these elements to create a more structured and accessible webpage, including the use of ARIA labels for assistive technology. The summary highlights the process of enhancing the webpage's semantic structure and the role of various HTML5 elements in improving both user experience and accessibility.
📝 Refining Content with Appropriate Tags
This section focuses on refining the content of the webpage by using appropriate HTML tags. Dave explains the difference between 'article' and 'section' tags, emphasizing that 'article' represents a standalone topic, while 'section' is more generic. He demonstrates how to use 'article' tags for the HTML and vacation topics and introduces 'section' tags within these articles for subtopics. The paragraph also covers the use of 'aside' for complementary content and 'details' with 'summary' for additional information. The summary captures the essence of semantic tagging and the significance of maintaining a clear hierarchy in webpage content.
🚫 Avoiding Non-Semantic Elements
Dave discusses the importance of avoiding non-semantic elements like 'div' and 'span' in favor of semantic elements. He explains that 'div' stands for 'divider' and lacks semantic meaning, requiring additional effort to convey meaning to assistive technologies. Similarly, 'span' is an inline element with no inherent meaning. The paragraph emphasizes the benefits of using semantic elements for better code structure and accessibility. Dave also briefly touches on the use of HTML5 Outliner, a Chrome extension that helps visualize the structure of a webpage. The summary stresses the importance of semantic HTML for creating well-structured and accessible web content.
🔍 Validating and Outlining the Webpage
The final paragraph covers the process of validating and outlining the webpage. Dave uses the W3C Markup Validation Service to ensure there are no errors or warnings in the HTML code. He also introduces the HTML5 Outliner extension to visualize the webpage's structure, highlighting the importance of maintaining a proper heading hierarchy. The summary emphasizes the importance of validation and outlines the steps taken to review the webpage's structure, ensuring that the semantic elements are correctly used and that the page is accessible and well-organized.
Mindmap
Keywords
💡Semantic HTML
💡Heading Hierarchy
💡Live Server Extension
💡Visual Studio Code
💡HTML5 Outliner
💡Accessibility
💡W3C Validator
💡CSS
💡ARIA Labels
💡HTML Elements
💡Web Accessibility
Highlights
Introduction to using the Chrome web browser, Visual Studio Code editor, and the Live Server extension for viewing web pages.
Explanation of the importance of document organization and the use of semantic HTML for improving code readability and accessibility.
Proper use of header hierarchy with H1, H2, and H3 tags to structure the page content effectively.
Inclusion of a navigation element (nav) for better user experience and ease of navigation within the web page.
Utilization of horizontal rules (hr) to signify topic changes and their semantic meaning in HTML.
The significance of semantic HTML in making web pages accessible to screen readers and assistive technology.
Use of section elements to define distinct sections within a page, enhancing the semantic structure.
Transition from sections to articles for content with a clear, standalone topic.
Explanation of the footer element's role in encapsulating page-end content, such as copyright information.
Introduction to the aside element as a semantic way to present complementary or sidebar content.
Use of the details and summary elements for creating interactive content, such as quizzes or FAQs.
Explanation of the mark element for highlighting text within a block of content.
Inclusion of time elements with datetime attributes to provide semantic meaning to time-related data.
Discussion on the avoidance of div and span elements in favor of semantic elements for better code structure and accessibility.
Validation of the HTML page using W3C's validator to ensure code quality and adherence to standards.
Use of the HTML5 Outliner extension to visualize the document's structure and hierarchy.
Transcripts
[Music]
hello and welcome hi i'm dave
this tutorial is part of a beginner's
html series i'll be using the chrome web
browser the visual studio code editor
and the live server extension for visual
studio code to view the web page there
are links to these tools starter code
files and all resources in the
description below documents need
organization and our html files are no
different html achieves document
organization with semantics in this
lesson we're going to improve our code
with the semantic html layout let's get
started i've got visual studio code here
on the left with our index.html open and
on the right
i have got our index html page
displaying and we're using the live
server extension for visual studio code
to display that page and you can see
it's launched down here you can click to
close or open the server you can search
for that extension over here at the
extensions icon if you do not have it
again it's the live server extension
okay so we're adding semantics to our
index html page now we've already added
some so let's highlight what we have
done already as we've built this page
out over the lessons the main thing that
we have done correctly is add a
hierarchy of headers you only want one
h1 per page
and this should be an outline much like
you would have an outline for an essay
or any type of paper topic you would
write so this is your title for the
whole page essentially
and from there you can have multiple h2
headers which is one level down in the
hierarchy
and they would define subtopics and then
beneath that you could have h3 headers
if there was a subtopic of a subtopic
and so on and that continues to h6
although you really don't want any more
than about three
levels of headings on a page so h1 h2 h3
would be the ideal way to have a page
laid out
after that we need to consider some
things about semantic html writing
semantic html helps us quickly see or
read the different sections in a web
page and navigate to those sections now
we've already added a nav element to our
page
and nav elements are semantic elements
so this says we have a grouping of links
here and we can see that on the page
with learning html and planning a
vacation we have a grouping of links
here that will help us navigate to the
rest of the page we also have an hr
which stands for horizontal rule in the
past i believe i might have said these
didn't really have a semantic meaning
but they do they're currently viewed
as semantic elements and it means that
there is a topic change so something is
changing and of course we have a couple
of topics on our page and we have
horizontal rules between those in the
future as we learn css we may want to
remove the horizontal rules we see here
that divide our navigation and our
heading for the page and replace those
with lines that we can create with css
because we're not really separating
topics here although it doesn't hurt to
have these horizontal rules in place at
this time and the main thing to convey
about semantic html is the word semantic
that means it provides meaning as the
nav element says hey this is a
navigation area or the h1 element says
hey this is a heading we can also get
that from other parts of the page we
added section elements that say this is
a new section so they provide additional
meaning rather than just
a generic
divider and we will talk about what a
generic divider is later as well now in
addition semantic html makes our pages
accessible to screen readers and other
assistive technology and that is very
important as we create pages now while
we've added some semantic html already
let's add the three big areas that most
consider for pages the first is not a
head section but a header for our page
now we have a heading which is the title
of the page but we can wrap this in a
header element and there can be more
than one header element per page however
it needs to follow the heading hierarchy
so imagine if we had
a social media site now every post
whether it would be a blog post or a
post like facebook or instagram every
post could have its own header and it
might have a subtitle in that post as
well
but this is a header now for our full
page so this would be
at the top level of our page with the
hierarchy here of h1 which is the
heading for our page notice we've also
included the navigation inside of our
header and we can go ahead and remove
this horizontal rule and i think it will
be just fine we don't need the semantic
meaning of a change topic there and i
think it's going to look okay without
the line as well so let's save this now
and we can see live server updates our
page immediately so we can see the
change and really all we see visually is
that our horizontal rule is removed
however we have added some extra meaning
to our html here now that this is the
heading or the header section for our
full page now the next element we want
to add
is the main element now there can only
be one main element per page and by
definition that would make sense you can
only have one
main area for content
per page and so we'll start here and
it's going to include our sections that
we've created so i used ctrl x to cut
the closing main element tag
and i'll scroll down to where our
second section ends before our area here
at the end and i'll paste
the closing main element and save and we
can see visual studio code reformatted
for us so now we've got the main
element wrapping
our two topic areas of vacation
and of html so we've added a header and
a main element now one other thing we
can add for our page is a footer now
just like the header there can be more
than one footer per page and that might
be a footer for a blog post or a footer
for a social media post but this is the
footer for our
entire page in this example once again
ctrl x to cut that closing tag and i'm
going to wrap everything we have here at
the end in the footer
one other thing i want to add just
because i didn't do it before we
validated our page throughout the other
lessons and it's not an error it's not a
problem but i want to include this
information here about the copyright i
want to include that in a paragraph
element so
i'm going to make sure that's lowercase
why am i getting a capital there we go
and then i'm going to once again
cut the closing tag and put it
after the content and save it gets
reformatted it really doesn't change the
look i just wanted both inside that
paragraph and that might help in the
future when we want to format this area
as well with css so now our document has
been outlined into three major sections
we have a footer a main area and a
header and then inside the header we've
already discussed we have a navigation
element that is also
semantic html our list is also semantic
html we know right away that this is
providing a list and this would be
identified by assistive technology as
well now there can be more than one nav
element per page so we might have a nav
area in the footer footers often have
links to other areas
of a website now we've only got a couple
of links in our footer and one goes back
to the top and the other does go to our
about page however it's not a grouping
of links where we would organize if we
had several other things here i might
consider a nav and if you do have more
than one nav element per page it's
important that they are labeled so
assistive technology knows which nav is
which and here we can do that with an
attribute called aria dash label
and then we can set it equal to
something that clearly says what it is
like primary
navigation and now we have labeled
rnav as the primary navigation area if
you did include a heading in the nav
element which is not required
but if you did
you could link to that so you could have
an h2 here
and then in the h2 we might put
primary
navigation
if i can spell it there we go and now
let's give this an id
and here we'll give the id
the same value primary
navigation and then here instead of aria
we would say aria
labeled by is the correct attribute here
now we're looking at
our primary navigation value
and it's saying hey it's labeled by this
value that's in the h2 so you can link
these together with an aria labeled by
pointing back to the id
of a heading however since we're not
going to have an h2 in our nav i'll go
ahead and remove that
and you can just choose the aria
label attribute and set that equal to
primary navigation which is equally
accessible to screen readers and other
technologies okay let's scroll down into
this main area previously we broke our
topics html and vacation into sections
which are semantic html tags however
there is a more appropriate tag now that
we kind of have an idea of how our page
is laid out because these are
areas that could be
on their own maybe they would each have
their own page but much like a social
media post or a blog post some type of
article you might think there is an
article element so i have highlighted
this section and i'm going to type
article instead and i believe we'll find
that vs code changes our closing tag
immediately yes and it was already
changed to article
so
instead of a section let's call this an
article because it clearly has its own
topic and now let's do the same for our
other section based on vacation so we
can highlight it
change it to article and we'll verify
that the closing tag is also article
and yes it is right here so now we have
two articles instead of sections now
there is sometimes a debate about which
should be used and it's really not
clearly defined if article or section is
the proper choice they would both pass a
validator check so really the way i look
at it is an article has a clear topic
where a section is more generic you
might use a section
just to actually create a little section
in your code whereas an article has a
clear topic that the area is about so
now inside of the article we could
create other articles but now i want to
go ahead and add a couple of sections
inside of our html article so as our
article begins we've got the heading
which is h2 and it says i'm ready to
learn html and then we have a paragraph
saying this is my first web page that's
fine let's go ahead and add the section
after that point
and now once again i'll press tab to get
both the opening and closing tags i'm
going to highlight the closing tag ctrl
x to copy it i'm going to bring it down
here to just underneath the figure and
that's where we'll end this first
section i also want to go ahead and add
a subheading here which is an h3 and
i'll just make this html5 as that's what
the section is about
and now our section has the subheading
html5 it has the html5 logo and it has
our figure that has our code sample of
html5
that all seems related now let's add
another section and this is the my daily
schedule section so
lowercase again is what i prefer
and so we'll have section and the
closing section tag i will cut that and
i'll put it here at the end of the list
before the closing article tag so now we
have two clear sections inside of our
article and they both have headings that
are h3 so we're at the third tier of the
heading with the h1 being the heading
for the overall page the h2 being the
heading for the article and then the h3s
being the headings for the nested
sections within the article so we're
keeping our hierarchy in place
underneath the list we can add another
element and just a little more content
let's call this an aside this is a
semantic element and if you think about
how a web page is laid out often times
you think of an aside as the sidebar to
the page but it could also just be
another section of complementary text
that is not
as important as what's in the main
section or article that you are putting
it inside of and that's what we'll do
here and then i want to use some other
semantic elements just to demonstrate
how they work so now i'm going to add a
detailed semantic element
and inside a details element you want to
add a summary element now the summary if
this was a product we might just put
warranty information in here as the
summary here i'm going to put something
that's more like a question and it will
display how the details and summary work
so i'm going to say
guess the number
of hours
i code
per day as our summary now underneath we
can put the answer to this question and
now i'm going to put
i start at
8am and i write
code for
let's say three hours
every morning
and we can save that
i'll scroll up so we have it up here
towards the middle of our page
and now let's scroll up here and let's
look at what we have on the page because
the rest of our semantic changes really
didn't change the appearance here
but this where we added this new content
notice we're not seeing this paragraph
at this point we just see guess the
number of hours i code per day but it
has this little arrow next to it if we
click on this
then we see the answer
so that's a nice little addition that
this html element adds and again these
are all semantic elements so the aside
has some meaning that it's complementary
text it's not as important as what's in
the rest of the article
the details and the summary work
together so
this could once again provide details
about a product say warranty information
something else a return policy whatever
but you could also use it kind of as a
quiz here where you have a question and
an answer let's go ahead and add just a
couple of more semantic elements to this
one is what we can do with a highlighter
just like you might use a highlighter on
a piece of paper there is an element
called mark so i'm going to mark what i
want to highlight here in the text
and by including it in the text you know
it's an inline element and not a block
element
so now if i save that we have
highlighted
number of hours now inside the answer
we're looking at some time here we have
8 am and we also have a duration of 3
hours we can add some meaning to that in
the text as well
and we can provide a time element then
we need a date
time attribute
and for the date time attribute value i
want to put in the actual hours it
accepts several values so this would be
0 800 on a 24 hour clock
and now let's put the closing time
element after the 8 am here
and notice if i save this right now
and show this it does not change what 8
am looks like at all but once again it
provides meaning in our html for
technologies that are reading it
especially those assistive technologies
but it could also provide some meaning
for the browser itself now also it says
as i write code for three hours we can
provide a time element for the duration
too so we have time once again with the
date time attribute
and now we'll put in a different value
because there is a value for duration
i'm going to put this closing
tag at the end of the three hours now
let's look at the value for duration we
would put in pt3h
and remember there is a link in all of
the html resources that i link to in the
description there is a link that shows
all of the html elements so you can look
up for example the time element on the
mozilla developer network that's the mdn
site and you can look at all the values
that could be accepted for the date time
attribute okay let's save this and move
down to our vacation area where we also
want to add two sections i think these
are clearly defined already where we
have subheadings for places i'd like to
visit and really we have a subheading
for places i don't want to visit i
believe so here let's go ahead and add a
section again lowercase
and i'll take that closing section tag
highlight it ctrl x to cut i'll scroll
down here
and we'll add that before the next
subheading so
there we go and save that and of course
it reformats again
now i'll add a section element
and put the closing after we finish our
places i want to avoid section
and that would be at the end of our
description list
and we can save that now we've got two
sections inside of this article as well
and really once again it doesn't change
the look but it does change how the
browser interprets and it definitely
adds a benefit for assistive technology
now before we look at our document
outline with these changes i want to
quickly discuss and i'll just do it here
by this comment where it says add more
places two different elements that you
want to avoid as you're learning html
and then later on
you can use them as we possibly get into
them with css but there is a div in an
older html code you will see divs
everywhere sometimes you still do
when those people that have been using
divs are used to still riding them and
they just continue what they've been
doing in the past however there is no
semantic meaning to a div think of a div
much like a section without the semantic
meaning it just stands for divider and
really you can put them anywhere but if
you do
you really have to do a lot of work to
get them to convey meaning you have to
add additional attributes that help
assistive technology interpret these
elements because they have no meaning as
is they are block elements so
a very similar element that is an inline
element if we just wanted to wrap a word
or two in a paragraph in an element
is span we'll definitely use some spans
as we learn css however once again they
have no meaning whatsoever by themselves
they don't change or add any value to
your code and we would use them possibly
to apply some css styling to some words
that we would highlight around span so
we really want to avoid both of these
elements as you learn html really work
on using semantic elements and then
when you understand what semantic
elements are and how to use them and
then occasionally when just no semantic
element is the correct choice
that is the time that we actually should
use divs and spans so i'm going to
delete those for now
and save our document and now i'll just
scroll our code up to the very top and
i'm going to do the same for our page
over here on the right
now what i want to bring your attention
to i'm going to maximize the browser
and we're going to go to the chrome web
store and look at an extension we can
add and that extension is html5
outliner so search for that
you'll find html5 outliner you can click
on that and i've got it installed
already so
mine says remove from chrome yours would
probably say install here and it will
look at our semantic elements and make
an outline of our page so let's check
that out okay i'm going to bring our
page back down to the size we had it
down here to the bottom now once you've
got that extension installed you may
have to restart your version of chrome
to get it to work but here we go click
on html5 outliner and look we have got
an outline of our current page so we've
got our heading hierarchy correct with
my goals for the year an untitled nav
that's okay we didn't put a heading in
there like i said we could have put an
h2 it's just saying we didn't have one
but a nav doesn't require one but
remember if you do have more than one
nav element per page then you do need to
at least appropriately label that for
assistive technology okay now we've got
another section this is our article i'm
ready to learn html and that's our h2
heading
inside the article remember we have two
sections we have the html5 and my daily
schedule and then we have an aside and
this aside was inside the second section
it's also untitled which is okay and a
side does not have to have a heading
but it just notes that as it's untitled
here if you added a heading inside of
the aside say an h4 then it would of
course appear there
now we've got our other section this our
other article actually this i am also
planning a vacation that was an h2
and then these are h3 headings so you
can see how important the headings are
the heading hierarchy if you don't get
any other semantics correct in your page
that's the one thing to really
understand is the heading hierarchy of a
page but all of these other semantic
elements definitely help outline your
page and add meaning avoiding these is
the biggest mistake you can possibly
make as you are constructing an html
page okay now that we've looked at our
outline let's once again validate our
page i'll pull this over just so we see
a little bit better i'll click file
upload we're at validator.w3.org
and i'm going to click choose file i
have to make sure i'm in the right
lesson
folder i am not so i need to go into
html course
lesson 7
index.html just make sure you upload the
index.html you were working on for this
lesson
click check and we'll see if we have any
problems if you have a problem it will
show here it should tell you what line
and what the problem is but we're good
to go document checking completed no
errors or warnings to show remember to
keep striving for progress over
perfection and a little progress every
day will go a very long way
please give this video a like if it's
helped you and thank you for watching
and subscribing you're helping my
channel grow
have a great day and let's write more
code together very soon
Посмотреть больше похожих видео
HTML Tag Text Basics | HTML5 Element Text Tutorial
Semantic Tags Explained | Frontend Bootcamp Hindi | Ep.04
Head Tag in HTML | An HTML5 Head Element Tutorial
Semantic Tags in HTML | Sigma Web Development Course - Tutorial #11
How to Insert Images in HTML | An HTML5 Image Tutorial
HTML Tutorial For Beginners | Learn HTML In 30 Minutes | Designing A Web Page Using HTML | Edureka
5.0 / 5 (0 votes)