Semantic HTML Tags | HTML5 Semantic Elements Tutorial

Summary

In 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

00:00

📚 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.

05:00

🛠️ 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.

10:01

📝 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.

15:02

🚫 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.

20:03

🔍 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.

Keywords

💡Semantic HTML

Semantic HTML refers to the use of HTML tags that provide meaning to the content they enclose. In the video, semantic elements like `<nav>`, `<header>`, `<footer>`, `<section>`, `<article>`, and `<aside>` are used to structure the webpage in a way that is easily understood by both humans and machines, such as screen readers. This enhances accessibility and SEO.

💡Heading Hierarchy

Heading hierarchy is the organization of headings (H1, H2, H3, etc.) in a document to represent the structure of the content. H1 is the main heading, and subsequent headings (H2, H3, etc.) represent subtopics or sections. Proper heading hierarchy is crucial for accessibility and SEO, as it helps users and search engines understand the document's structure.

💡Live Server Extension

The Live Server Extension is a plugin for Visual Studio Code that allows developers to view their web pages in real-time as they make changes. It automatically refreshes the browser window whenever a file is saved, providing a live preview of the webpage.

💡Visual Studio Code

Visual Studio Code, often abbreviated as VS Code, is a free, open-source code editor developed by Microsoft. It supports a wide range of programming languages and offers various features such as debugging, version control, and extensions, making it a popular choice among developers.

💡HTML5 Outliner

HTML5 Outliner is a Chrome extension that generates an outline of a webpage based on its semantic structure. It helps developers visualize the document's hierarchy and ensure that the heading levels are used correctly, which is essential for accessibility and search engine optimization.

💡Accessibility

Accessibility in web development refers to making web content usable by people with a wide range of abilities. This includes using semantic HTML to make content understandable for screen readers and ensuring that the website can be navigated and interacted with by users with disabilities.

💡W3C Validator

The W3C Validator is an online service provided by the World Wide Web Consortium (W3C) that checks HTML and XHTML documents for errors and warnings. It ensures that the markup is well-formed and adheres to web standards, which is important for cross-browser compatibility and maintaining web standards.

💡CSS

CSS (Cascading Style Sheets) is a style sheet language used for describing the presentation of a document written in HTML. It separates the presentation (layout, colors, fonts) from the content (text, images, data), allowing for more maintainable and flexible web design.

💡ARIA Labels

ARIA (Accessible Rich Internet Applications) labels are attributes that can be added to HTML elements to provide additional information about the role or function of the element to assistive technologies like screen readers. They enhance the accessibility of a webpage by making it easier for users with disabilities to understand the content.

💡HTML Elements

HTML elements are the building blocks of web content, consisting of tags that define the structure and content of a webpage. Each element has a specific purpose and meaning, and they are used to create headings, paragraphs, lists, links, images, and more.

💡Web Accessibility

Web accessibility is the practice of making websites usable by people with disabilities. This includes providing text alternatives for images, ensuring that websites can be navigated using keyboard commands, and making content perceivable and operable. Accessible websites are more inclusive and comply with standards like the Web Content Accessibility Guidelines (WCAG).

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