Transcript for:

University instructor Dave Gray gets straight to the point and he will take you from knowing nothing to understanding advanced HTML concepts. Hello and welcome to four hours of HTML tutorials and instruction. This video is made up of 10 tutorials for learning HTML that build upon each other much like the chapters of a book. Throughout the lessons in this video, I will mention links being available in the description below. I've compiled all of these links into one GitHub resource that you will find in the description. Hi, I'm Dave Gray and I'm the creator of these HTML tutorials. You can subscribe to my YouTube channel for more tutorials like this one. You can also follow me on Twitter and if you're feeling generous you can even buy me a cup of coffee. A quick thank you to Bo at FreeCodeCamp for sharing this video and to everyone at FreeCodeCamp for providing such an outstanding resource that helps people learn how to code for free. It's truly my honor to contribute this video. Let's get started learning HTML with chapter one. What is HTML? HTML is an acronym that stands for Hypertext Markup Language and Hypertext Markup Language, HTML, is the most basic building block of the web. It defines the meaning and structure of web content and hypertext refers to links that connect web pages to each other and that can be within a single website or from one website to another. Overall, HTML uses markup to annotate text images and other content for display in a web browser and you can see an example of some of these markup elements here but before we begin creating a web page and using these markup elements we need to get the necessary tools. So let's start with a web browser. If you don't have one or if you're curious what I will be using in this series I'll be using the Google Chrome browser and you can download that at google.com slash chrome. So if you don't have that and want to use that go ahead and download and install now and then come back to the tutorial. Also I will be using an extension and we go to chrome.google.com slash web store to get extensions for the chrome browser and there if you want to use the extension that I'm going to use it's called dark new tab and you can press enter to search for that and once you've completed your search you'll see dark new tab offered by Keller which is the one that I have added and you can see added here. I'll click on that and once you're inside the page for dark new tab you should have an install button here. Since I already have it installed this is now a remove button for me. What this does is when you open a new tab in the browser it uses a dark page instead of a light page and I use dark mode whenever possible so I prefer that. If you see me open a new tab in this development series you'll probably see a dark tab like this one. From there we need to get a code editor and the industry standard right now and what I prefer to use is Visual Studio Code. Again you can use other code editors to write your HTML code but if you go to code.visualstudio.com you'll be able to download Visual Studio Code for free and there you can download for Windows if you're on Windows like I am or you can click other platforms and it's also available for Linux and Mac OS. So now would be a good time to go ahead and download Visual Studio Code and install your code editor and go ahead and open that up and then come back to the video. Okay I am now assuming you have installed Visual Studio Code and have opened it up and you may see something like this or you may see a welcome screen. What you need to do is create a folder on your computer and we will put our files inside that folder. So if I go to the file menu and choose open folder you can see once this pops up what folder I am in the HTML course folder in Windows and then I've created an 01 underscore lesson folder. So if I highlight that and select the folder I am now inside that folder and ready to create my first HTML file. So if you see the file tree over here on the left and it's currently empty if you don't click this icon in the top left which is the file explorer and that will hide or show this file explorer. We're going to create the plus button or click the plus button here for new file and create a new file. Now we'll type index.html as that is always the file name that is expected to launch a website and you always want to keep your file names lowercase and with no spaces. Now Windows will not complain if you put a space or use upper or lowercase. However when we host our files on a web server a web server will differentiate many times and that can cause problems. So the naming convention is to always use lowercase no spaces you can use hyphens dashes and then end each file and dot html. Okay we have an empty index.html file. Let's create our first html element and as you might guess the first html element we'll create is html. So if we type html all lowercase and press tab in visual studio code it creates the tags and by tags that is often interchanged as a word with element. However the element consists of the starting and ending tag and everything in between but here we might just be referring to the starting also called the opening tag or the ending also called the closing tag. So we refer to html tags but every page starts and ends with the html opening and closing tags and everything else on the page goes between those tags. After creating our html element html pages have two main areas and one area contains data that is not seen on the page but is considered to be metadata about the page and that is the head area. So just type head not header but head and press tab and now we have our head element and we will put metadata about the page inside this area but the next area is the page that every or is the part of the page that everybody sees in the browser and that is held within the body element. So type body and press tab and now we have our two major sections of our page that are both inside of the html element. We have a head section and a body section. Now inside the head we'll just put one piece of metadata today and it really won't start with the word meta. We'll come back to that word in the future. We're going to create a title element and give our page a title. Let's just call this my first web page and this will stay inside of the html document. Now I just pressed control s which saved the document. You otherwise would see a dot up here by the index.html so I saved that and I am using an auto formatter. Visual Studio Code may or may not do that for you when you save your file. If you want that you can go to the extension icon over here and search for a prettier extension and I'm not sure if mine is enabled or I'm using something else right now we'll have to check. Now mine is disabled but I do recommend this one. Prettier is a code formatter that will auto format your code but Visual Studio Code may do some of that as well but if you want to use Prettier go ahead and click install and you can use that as well. So I'll close out that Prettier tab. Go back to the file explorer here so we see our index.html on the left instead of the extensions and now we can see our html is formatted in a very easy to read manner. We have our html element and then the head element and then the body element and they're separated by spaces. Very easy to read and we have a title inside of the head. Again the title will not be seen inside of the browser in the body of the page but I will show you very shortly where we do see it. Inside of the body element though let's put an h1 element which stands for a heading and it is the biggest heading we could put. You only put one h1 element per page and that should be saying what your page is about. It doesn't necessarily have to be the same text that is in the title but here we're just going to put hello world as is the tradition for creating your first file in any language you're learning and so we have hello world on the page and we have my first web page in the head section. Let's add one more element in the body of the page and this is a paragraph element that starts and ends just with the letter p but notice each of our tags of course start with this less than and then end with a greater than and then the ending tag you'll notice has a slash but all we have to do in Visual Studio Code is type p and press tab and it creates both for us. So we're going to put some text inside of our paragraph and here we'll just put this is my first web page with a period in the sentence and save. Once again I'm pressing control s on the keyboard to save. You can go to the file menu and from there you can also choose save but you'll notice the shortcut is control and the letter s. We're almost ready to view our web page but before we do remember the extensions we went to. I want to show you just a few if you want your Visual Studio Code to look like mine. One thing to draw your attention to is when I created an index.html file I have the little icon for html5 beside it. You may not have that but if we click on extensions and then we can delete prettier that I searched for before type vs code dash icons there you'll find the extension that will add that to your vs code as well so you can install. I already have it installed so mine says uninstall and that will add icons as you create files and it might add the icon up here as well in the tab and that's how you see the icon here beside my index.html in the file explorer. So visually it helps you see what type of file you're working with quickly without even reading everything. After that extension let's go ahead and click the extensions icon again and then search for github theme. I am using a specific theme which I prefer dark mode in everything that I do so I am using the github theme extension and it has light and dark themes. I believe I'm using the default dark theme this might be bright for a second but I'll click set color theme and yes it switched back to light but I choose github dark default and then yours will look much like mine. Now these previous extensions have been optional but one that I say is a must for you to install is called live server. So let's pull up live server by ritwick day. I'll click on that and you want to install live server because it's going to help us view our web pages. So go ahead and install live server and after you have it installed we'll go ahead and take a look at the web page we've created. Okay with that installed I'm going to close that tab. I'll come back to the file explorer here to show the file and now if you have live server installed you should be able to right click and open with live server and once we choose open with live server it opens our browser and we can see our web page it says hello world this is my first web page. In addition in the tab at the top it says my first web page so that is where the title goes at the very top of the browser in the tab. Now this is very bright and I have mentioned that I prefer dark mode so let's go back to visual studio code and I'm just going to paste in some quick styling that is actually CSS. Once again this is optional but it will save my eyes and possibly yours as we work through this tutorial. So once we're back in visual studio code just underneath the title in the head section I'm going to paste this in. I'll quickly describe it. I put in a style element and that allows me to put in some quick CSS and I changed the font size to make it just a little larger and then I changed the background color to a dark color and I changed the font color to an off white color called white smoke and that's all I did. We're not really learning CSS here but this will save our eyes going forward if you want to make these changes. If you prefer the white with dark text that is fine too but now that I've saved this the beauty of live server is that it automatically reloads our page for us in the browser. So let's go back to the browser and look at our update and now you can see our web page is in dark mode and we have a little bit larger text here as well. It did not change our title from the head because that just goes into the tab of the browser. Also notice the address. This is an IP address and then we have a colon and this is a port number but this is on your own computer. This is not on mine. I can't go onto the web and see your page that we just created. We haven't loaded it to the web. It is just running on your computer but this is the way to view web pages as we create them which creates your own local server. It's what's called a dev environment and that is preferred. What you don't want to do in chrome is try to open a file like you would in word or some other document browser or even visual studio code how we open files. That's not how you want to view a web page. You want to use a development server and that's what we're doing with live server in visual studio code. Now if you ever want to stop the server down here in the bottom you can see the port number 5500 and it says click to close server. So I can just click that. It says disposing and now we have a go live button which you can also use. You can also right click on your document and choose stop or open with live server. Now we would once again since we stopped that we would need to open with live server to have a live web page that responds to changes we make and notice how it opened a new tab here instead of our old tab. Our old tab the server for that page closed so we close that out and now we're using this one because this is going to show our most recent changes. Now after we've created a web page how do we know if we have errors or not? Well that's where a validation service comes into play and this is the W3C markup validation service. W3C stands for the World Wide Web Consortium that really makes the standards for the web overall. What we want to do to check our page is click file upload because remember our web page is really not on the web it's just on our computer. Your web page is on your computer and mine is on my computer. So let's click file upload and from here we're going to choose the file on the computer and we get a browse window and now I'm going to click HTML tutorials and then I have an HTML course folder and then the zero lesson one folder that we just created and there is the index.html file we've been working with so I'll click open and now that it's here we can click check and we're going to get some errors and we'll go over those. Okay now that we have checked our page we have got a warning and a couple of errors so there are things we need to fix in our HTML file. Let's address these in order with the first warning says consider adding a lang attribute to the HTML start tag to declare the language of the document so that is something we should do. Now we're going to go to the HTML tag and we can add what is called an attribute and this is the lang attribute and I'm going to set it equal to en which is the abbreviation for English in general. You can supply a dialect like this dash us or I believe the other would be gb but I don't usually do that so I'm just putting en for English. You might have another language you prefer to put there and you can find a list of those at the MDN network as well and that's the page where we were looking for the definition of HTML at the beginning of this tutorial so I will link to MDN the Mozilla developer network in the description. Now that we've added the language attribute let's go look at the other errors we had and see what else we need to fix. It says the character encoding was not declared so we also need to handle that. Let's go back to Visual Studio Code and now inside the head there is an element called meta. Earlier I said the head stores metadata let me keep it all lowercase here and here we can set what is called the character set attribute inside of a meta element and from here I'll put UTF-8 which is the standard for all web pages that I have worked on. There are other character sets but this is the typical value you would see in there so I'm going to save this and in the future we'll cover more meta tag values that we'll have inside of the head. Now let's go back and look at that last error that we got from the validation service and that said start tag seen without seeing a doc type first expected and it shows you exactly what it wants doc type HTML and that is a document type declaration that should be on the very first line of your page. So let's go back to our HTML file go to the very top and we'll press return and we'll paste in exactly what they had there. So you see once again it starts with the less than and the greater than symbol but this is not really an HTML element or tag this is just a doc type declaration that you should have in every HTML file at the very beginning. So now I'll put that in and save as well. Let's look at the validator first and let's choose the file again and now I've selected the index.html to upload with our changes and we'll click check document checking completed no errors or warnings so our document is just fine. Let's go to the tab with our page and let's reload the page and once we reloaded everything looked great so we've got hello world this is my first web page and we still have my first web page in the tab at the top for the title and we have passed all validation checks. Let's move on to what else might go inside of our head element and remember everything inside of the head element is not seen on the web page and with that said I've dragged the visual studio code window to a little smaller size on the left and chrome to a little smaller size on the right but I'm just going to expand visual studio code for now because anything we change inside of the head element will not be seen on the web page anyway so I'll click the expand button and we'll just see our code. Now I had mentioned that we could store more metadata inside of the head element and that is definitely some of what we see so let's add a couple of typical meta tags that have metadata that you would commonly see the first being for the author of the page so we'll say name the attribute name is equal to author because that's what type of meta tag this will be and then we'll have a content attribute and this is where you can put your name I'll put my name for now since I'm the author of the page and then let's add another meta tag and let's give it a name as well and here we'll put a description this will describe the web page in a little bit more detail than possibly the title would so here we can put more of a sentence and once again we need the content attribute to do that let's say this page contains all the things I am learning how if I could spell how to and it looks like I'm extending the page so in visual studio code I'm going to press alt z in windows to make sure the text continues to wrap and then I'll say all the things I am or I am learning how to create as I learn html there we go now after that of course you still need to close the meta tag and control s to save and again I got the words to wrap let's go to the view menu if you scroll all the way down you can see word wrap is alt z it may be something different if you're on mac or linux so you might want to check the view menu under word wrap if you want your words to wrap and not just extend forever to the right here now we've added more description about our page this information could be picked up in a search engine or some other service that wants to learn more about our web page however let's go ahead and put something in the head where we will notice the change when we go back to the browser and that is to add what is called a fav icon and we can do that with a link element let me use lowercase once again and inside of the link element we'll have several attributes one is the rel which stands for relate or relation how does this relate to the web page and here we're going to provide an icon after that we need an href this refers back to html that stands for hypertext this is a hypertext reference so we're referencing a resource and here we're going to reference a file that i have now put inside of our folder that is called html5.png and if i click the file explorer over here you can see i've now added an image file that's a.png file html5.png and you can download this image from the resources and you can see it's a small little icon for the html5 logo so i'll close that i'm going to click the file browser to have that disappear again so we see this then we have one more attribute to add and that is the type what type of resource is this and here we'll say image slash x dash icon and now we can save this and i'm going to go ahead and minimize the code window and now if we look at our web page in the browser notice we have an icon up here my first web page now has our little fav icon beside the title and that's what we added here in the head by adding the fav icon with a link element now we won't add any more here today but this is the same area where we would link to css files and even javascript files and other resources that we pull in from the web so the head is a very important part of the page even though we don't see the content of the head inside the body of the page and i said we wouldn't link to anything else here today but since we do have this default css to make our page a dark mode if you added this and once again this was optional if you prefer the white page with dark text you didn't need to add this and we had this style element here to hold the css in the head but that's not usually where you would find it for a page so let's go ahead and do that i'll expand visual studio code again click the file explorer and over here inside the file tree i want to create a new file i'm going to call this main dot css and i have an empty css file all we need to do now is go back to the index select the css that we put here for the html on the body not the style tags just select the css that's between the style tags i'm going to press ctrl x to cut it out of the page go to the css file and ctrl v to paste it into the css file ctrl s to save that file now back in the html i'm going to remove the style element and i'm going to add another link and here for the rel not ref but rel we have a style sheet because we're adding a css style sheet our href will now point to our css main dot css specifically and our type which isn't actually required anymore but since we have it let's go ahead and add text slash css but our browser should know what it is even if we didn't add that at this point because that's really the only type of style sheet there is is a css now that we've made these changes let's save the file and let's go ahead and click the button again to make our code shrink back down and look at our page we can reload just to make sure it has reloaded and everything looks the same that's because we are pulling in our code i'm going to go ahead and hide the file tree here we are pulling in our css code using our link tag inside of the head element now finally i'm going to create an error on purpose by deleting the greater than symbol at the end of this link tag and saving the file with control s now why would i create an error on purpose because we want to validate our file again and this will let us know that yes we've got the right file and we expect one error there you don't of course have to create an error on purpose but that's what i'm doing to make sure i'm selecting the correct file out of the correct lesson folder because i'm in lesson two now you might be working on the same file we started with there's the css file and the image file i'll select the index.html and check and i should have at least one if not more errors because of that yes i created several errors on the page just by leaving out that one closing greater than symbol for the link tag so now if i save again visual studio code formats are code correctly instead of trying to pull the closing head tag up here and i'm going to go ahead and reload or re-upload the file to check it so we choose index.html and now i'll click check and document checking completed no errors or warnings to show so just by missing one little thing in our page we could have a whole list of errors so follow the prompts from visual studio code notice how if i leave that out here in my theme this turns red or pink it doesn't look quite right visual studio code wants to format it differently if i save the file and it pulls that up here instead of putting the closing tag there's several cues to show you that you have an error in the file and so follow those prompts in visual studio code and then remember to always validate your page and we always do that at validator.w3.org i'll get rid of everything at the end of that and here you can pull it up and then we choose file upload let's look at the basics of creating text content on a web page now web pages are a lot like essays or even a newspaper where they have headings and usually paragraphs of text or at least a sentence or two of text describing something afterwards so we see our paragraph element here and our h1 heading here much of the text content on a web page will be made up of headings and paragraphs now headings have a hierarchy and that means we'll start out with only one h1 on the page and each page should only have one h1 but after that we can have sub topics so here i'm going to press shift alt and the down arrow again i'm using windows it may be different for you on macro linux but i just copied a line down so now i have two h1s but i'm going to change this by typing h2 over that h1 and notice how the ending tag immediately changed here in visual studio code as well so that's helpful now this is a sub topic for the page so imagine this being the title of your essay or the big headline in the newspaper and then we have sub topics so for h2 i'm going to type something different let's go with i'm ready to learn html and now we can have a paragraph about that and so we do at least we have a sentence this is my first web page now i'm going to highlight this subheading h2 and the paragraph and once again i'm going to press shift alt and the down arrow and it copies both lines down for me and i'll add an extra blank line here and i'm going to change this second h2 into an h3 now we i'll use lowercase there we go now we could have more than one h2 on the page but i wanted to show how you could have a sub topic under our sub topic so we have the title for our essay and then we have an area of discussion that we've added an h2 as the heading for and now under this area of discussion we could have further sub topics and this is how we now have an h3 so now instead of my first web page or i'm ready to learn html let's change this to my daily schedule so this will discuss our schedule for learning html and then we can just say something about i'm going to tell you how or let me tell you how i and i'll just put some dots there for now just we'll expand on that later if we want to but really what i'm showing is this hierarchy and it's also important not just visually let me go ahead and save this by pressing ctrl s or remember you can go to the file menu and choose save visually we see that it's naturally formatted larger on the page with the h1 than it is the h2 and then the h3 is even smaller than the h2 but we can change all of that with css in the future css will really style how our web page looks but what is important is we can quickly visually tell the headers apart right now and when a screen reader or other assistive technology looks at our code then it can navigate the code through the headers of what is important here the header hierarchy and that's why it's so important to organize your page the headers actually give semantic meaning saying this is the main topic this is a subtopic under the main topic and this is a subtopic under the higher subtopic in the hierarchy so headers do have semantic importance and that means giving meaning to our content and of course then our paragraphs can just have whatever details we want to add about those subtopics as well now even though we've created a little separation in our code when we look at our page we just see line space line space and we don't have a good visual separation I'm going to add an element that doesn't really provide any semantic meaning but visually it helps us on the page and that is a horizontal rule element and it's just added like this there is no closing tag for the horizontal rule and then I'm going to add another one after our final subtopic discussion here so we can add something else underneath that and so now let's save and look what the horizontal rule adds to the page now we have lines going across the page and those are called horizontal rules so we have our main heading and now we have our subtopic and I left the h3 in here because it's a subtopic of this topic so now we can go ahead and I'm going to highlight the h2 and the h3 ctrl c to copy come down further on the page and paste and I'll save just so we can see what happens now we have two different subtopic sections and we still have our top hello world so you could picture this more like an essay page and of course these could be paragraphs that have more text or you could picture this more like a newspaper and then we would have an article here and an article here and are heading at the top this is also a good time to discuss white space so if I just press the space bar and add all these extra spaces to the page if I save visual studio code is already going to probably reformat this but what is important to know when I save you'll see yes it changed and it just went back and only left one space is web pages or html do not honor all those spaces you might add with a space bar it's called white space collapsing and so we can space many lines but it won't really be represented on the page that is not how we add extra space in html so again recognize white space collapsing that it will not last now something we can do is what's called a line break and that can be inserted inside a paragraph element so now I'll put let me tell you how and then I'm going to return remember we don't have to have the opening and closing tags on the same line for an element we can nest other elements inside of an element so I'm going to put a break and that stands for line break and then I'll put three dots and I'll say let me tell you how I learn more about web dev and a period that looks good and now we can put another break and I'll just put three more dots and say I plan out my schedule and one more line break the three dots of course are not required it's just what I'm adding here and then I'll say I use resources from MDN which previously we discussed and when I showed the definition of html we were looking at the Mozilla developer network and that's what MDN is so now if we save this file you can see we've got line breaks and we're showing each of these details on separate lines okay let's scroll down and change some of our second topic now so instead of I'm ready to learn html let's change our second sub topic to I am let me capitalize that I am also planning a vacation and now we can put some details about that vacation in the paragraph underneath this subtopic and I'll say I've been working hard and really need a getaway period and let's see if we want to add anything underneath that yep let's add one more sentence and what I'm going to do once again is shift alt and the down arrow and visual studio code will copy that line down so now we can just change the sentence here and I'll say I live in Kansas so I want to visit a beach Kansas is nowhere near the ocean so that sounds pretty good so let's save that and now we can see our subtopic here changed and we have a couple of sentences about planning the vacation now let's change the my daily schedule subtopic at the h3 to places I'd like to visit and I guess I could capitalize that L on like there we go places I'd like to visit and now I'll highlight that paragraph and say I've heard good things about the Caribbean sounds like they have warm water and fun islands to visit okay so now we've got some extra details here and we can have more than one subtopic here so let's go ahead and do that again shift alt and the down arrow to copy that and places I want to avoid can be our next one so places I want to avoid and here we can put anywhere cold no way with an exclamation mark okay so now we've got some extra detail here in our second area and this will allow me to go ahead and show you the difference between block level elements and inline elements what we've been working with here are block level elements notice with every paragraph and every heading they start on a new line that is a block level element it creates space around it which of course can be formatted in the future with CSS but it does not allow you to put another paragraph inside of a header or a paragraph without creating that new line that space so there will be a return essentially in your content when you're using a block level element but when you use an inline element that doesn't happen so let's look at a couple of these first of all we can say I've been working really hard and I've been working hard and really need a getaway let's emphasize that really need a getaway and one inline element that we can do that with is EM and that stands for emphasis that provides some semantic meaning once again so now a screen reader or other assistive technology or are just our browser overall knows we're emphasizing this really need a getaway so let's save and notice really need a getaway is italicized now we're not using it for the italicized text again the formatting will come later with CSS but that is just the natural behavior of using the emphasis element as we wrap our text but it provides that meaning now what if we really want to emphasize that text it has a strong meaning to us like our no way here we don't want to go anywhere cold well there is a strong element we can use for that in here let me grab the ending tag and put it at the end of our no way and now I'll save and notice it got just a little bit bigger and bolder here as far as the natural formatting of the strong element but again this is an inline element it's inside the paragraph it did not create a break in the line it did not create any extra space around it so these are inline level elements and the other elements such as the header and the paragraph we've been working with are block level elements another type of content we can add to our page are HTML entities so they are things that are not really the normal text we would type out what for example if we wanted to show a less than or a greater than symbol on our page right now HTML interprets those as we're starting or ending a tag so we can't just easily put one of those on the page likewise there are some other symbols or remember when I talked about white space collapsing if we need a little bit of extra space there's an HTML entity for that so I want to indent these three lines with a little bit of space and I can use the HTML entity oh I still need the closing there here we go and ampersand is usually what starts out an HTML entity and now I'll type n b s p and a semicolon notice visual studio code recognizes that right away and if I save I have spaced this line over just a little bit now I can add more than one of those if I want so I'm going to copy that and I'm going to add two more and now save and our line is over even a little further so I will go ahead and select all three of these and I'm going to paste them right after the line break on each line and save and now we have indented with some extra space all three of these lines with these HTML entities that create space but as I mentioned there are other HTML entities as well so let's scroll down here to the bottom of our page and after this last topic let's add another HR and now we'll type and l t and a semicolon and that stands for less than so if we save now look we have a less than symbol underneath the final horizontal rule here at the bottom of the page I'm going to go ahead and copy that and paste two more and then I'm going to add ampersand copy with a semicolon and that will be the copyright symbol then I'll just put my name you can put yours and then I'm going to add ampersand gt for greater than and a semicolon and once again I'll copy that and paste two more now if we save you can see we've got our three less than symbols we've got a copyright symbol then your name or my name and then three greater than symbols and we're using HTML entities to create those I'll provide a link to a list of HTML entity codes in the resources for this tutorial you may have noticed we've got a couple of abbreviations on our page we have the abbreviation for Kansas which is ks and we also have the acronym or abbreviation for the Mozilla developer network here on our page so let's go ahead and add another inline level element and that can help us with our abbreviations and that is ABBR but it doesn't really do it by itself I'm going to go ahead and select MDN cut it and paste it here in the middle of the element and this won't really provide anything we also need to add the attribute title here I can put the full text Mozilla developer network and save and now when we look at our page it has some dots underneath MDN if we mouse over we get a tooltip that says Mozilla developer network now it's important to realize this tooltip will not really be available to screen reader and assistive technology so we don't want anything super important for the understanding of the meaning of the page to be in there so if we are using abbreviation it's a nice thing to have but it is really not accessible to all assistive technology so it's you can't have anything in there that the page really depends on because some of the people accessing the page may not be able to read or see the information that you provide here inside the title attribute of the abbreviation element let's go ahead and add that abbreviation element for Kansas as well so ABBR and then title and I'll spell the state name Kansas and then I can go ahead and double click on Kansas ctrl x to cut and I'm going to paste it with ctrl v right inside the element save and now dots are under the ks here on the page and if I mouse over we get a tooltip that says Kansas let's put another paragraph under places I'd like to visit and I'll put I can just type p and press tab as well there we go and now I'll type I've heard good things about going here with a colon and now I'm going to add an address element and we can put a location inside of this address element and it tells the browser that this is an address or a specific location so I'm just going to paste this in because you don't need to see me type all of this and I might easily have a typo here this is Margaritaville Island in Cancun it sounds like a great place for a vacation notice we've got a line break element after each line except the last line and if we save this and look at the page you can see how the browser handles this it is just three lines of text it is all italicized by default and the browser knows that this is an address and once again so would assistive technology so an address element does provide some semantic meaning as well to the content within it now before we finish this lesson about content there's one other thing we can add to our code now we won't see it on the page but it is important to us and this is an HTML comment and so now you can see Visual Studio Code colored this differently at least with the theme that I'm using and we can leave a note for ourselves inside of our code now notice this will not be on the page but I will show you how the public can see it so you don't want to put anything in here that you don't expect the public to be able to read I'll put a to do which is a common use and I'll just put add more places so it's a reminder to me to add more places to the list of places I want to avoid and we save that and it doesn't show on the page it's just a reminder in the code or a note to yourself inside of the code but I will show you how the public can see this if we right click and choose inspect that works or you can also press ctrl u either way will show your source code now notice we've got a comment in here that says add more places it's not visible on the web page itself but it is visible in the source code again you can press ctrl u to view this now notice live server also injected a comment here and it injected some javascript so when we look at the overall source code of what is live we're seeing more than we even had but this is a comment once again that is not seen on the page and live server is using a script element that we do not see on the page either and that can contain javascript for example so just to let you know if you leave a note for yourself it can be viewed by others and finally now that we've added all of this html content to our page we once again should go to the validator markup validation service from w3c to check our file to see if it is valid html or if we have any mistakes choose validate by file upload and then click choose file I'm going to have to probably go to a different folder from the one that I checked last so I'll go to html course lesson three which is the file we are working with choose my index.html and open that here with the validator now it has the index.html file uploaded and we can click check and we'll see if we have valid html so this is valid it's green document checking completed no errors or warnings to show if you have errors or warnings it should point out exactly where that error is and you can fix that in your html. Let's look at how to create lists on a web page lists are very useful and are used in many places on the web so we have three different types of lists we're going to create today ordered lists unordered lists and description lists let's start out with recapping here we've got visual studio code on the left and I've got the head element collapsed so we had meta details inside of there we can collapse that by clicking on the arrow by the line and you see between lines between four and eleven are now collapsed so we're working inside of the body element to add content to the page and this is visual studio code and I'm running the live server extension you can see down here it says port 5500 click to close server if you've installed the live server extension it may say click to launch or something like that which would actually launch your web page for you because that's how you want to view it in a development environment you don't want to just go to file and open the file in your browser you want to have that live server running that simulates a web server if you're not familiar with the live server extension you can click on the extensions logo here and instead of searching for prettier that I have in there you can search for live server and you can install that live server extension by writwick day right here okay so we've recapped all of that here's the file tree with our files I'm going to hide that by clicking the file explorer here so we can see more of our code and we will add lists to our web page today so I'll scroll down to under the subtopic of my daily schedule and notice how we had these line breaks and spaces here well we're going to replace these so I'm highlighting the first one and then I'm going to press ctrl d that highlights the next one and ctrl d again now it has highlighted all three of those and instead of this line break I'm going to type li and press tab that adds a list item but we haven't enclosed this in a list yet and we definitely don't need the closing list items here so once again ctrl d ctrl d so all three of these will be list items but they need to be inside of a list too so let's make this an ordered list by starting out with an o l and I'll press tab and we got the closing o l tag as well that stands for ordered list as you might expect and I'm going to actually put the o l down here after the paragraph tag the closing paragraph tag and I'm going to cut with ctrl x or you could retype if you want to and I pasted the closing paragraph tag right after the end of let me tell you how so this is a shortened paragraph now and the list will not be inside of the paragraph and now we have our ordered list but that also needs closing li tag so I'm going to type the less than symbol and a slash and visual studio code instantly filled in the closing the rest of what is needed there and I'll do that again for the second one and then I'll do that here for the last one and notice we do have the abbreviation still nested inside of the list item here so now I'm going to press ctrl s and save and visual studio code reformatted that just a little for me but look at our page now that we've added this list it's an ordered list and it is numbered that means it's in order numerical order one two and three notice these are not this text is not enclosed inside of a paragraph element so it's not creating that extra space that a paragraph element does they're stacked right on top of each other there's still a little bit of space but not like we have between our paragraphs so that is an ordered list we start out with the ordered list element and then the list items go inside it and each list item is starting and then ending with the li now let's scroll down and look at our vacation area says I'm also planning a vacation and we've got a places I would like to visit area so after that let's go ahead and add a ul which as you might guess stands for unordered list and we'll go ahead and cut that closing tag and I want to put it after the address here at the bottom so this will be our full list now we need to declare list items here in this instance I'm going to go ahead and keep the paragraph tags inside each list item so we created an li there and I'll use ctrl x to cut and close that first list item here for the first paragraph I'll do something similar here got an li but the closing one is going to be in a different spot because our list item can have these tags nested within it just like we nested the paragraph here I'm going to go ahead and nest the paragraph and the address inside of the list item here and so now if I save and visual studio code reformatted my code for me but notice here's the beginning of the list item and we have the end way down here after the address so let's look at what this unordered list looks like on our page and you can see instead of numbers it has dots it does have the extra space created by the paragraph tags and the address element still has the content that it had before and still formatted the same but notice our ordered list and our unordered list are both indented compared to being over here flushed to the left with everything else we had like they were before so similar in formatting from an ordered list to an unordered list and also realize that the really the only difference is the bullet point here in an unordered list versus the number in an ordered list the extra spaces were caused by the paragraph element inside of these unordered list items and we did not use a paragraph element on these ordered list items so the list itself and the list items did not create the extra space that was created by the paragraph elements now let's scroll our page we've got enough content we need to make sure we're visiting the very bottom here we want to add more under place I want to avoid and I'm going to change that to places I want to avoid and let's go ahead and remove our paragraph that says anywhere cold no way and let's add a description list here so a description list as you might get starts with dl now inside the description list there are two different types of elements instead of just an li like we had in our other lists for a list item we have a description term and this description term could be the place we want to talk about so let's say the north pole and now for the description term we need to also have description details so that's dd and here I can put I here this is now let's go ahead and put our strong emphasis back here and I'll put cold and then our exclamation mark so we have put a strong emphasis on cold and now I'll create an extra line here just to space these apart another dt I'll put the south pole and then dd for the details description details and I'll say this is also cold and let's add one more description term this will be mountain tops and dd for description details and these if I expel these these are also cold now if we save let's scroll just a little bit more so we can see all of our content here you can see our description list has a different format than the ordered list and the unordered list our description term is to the left and then the description details are indented to the right but here is our full list of the north pole south pole and mountain tops we want to avoid all of these places when we go on our vacation with these new lists now added to our file let's go ahead and create an error on purpose just to see if we have an error in our page when we check it at our validator.w3.org and here I'm going to choose file upload and I may have to switch folders let's see no I'm in the right one so I'll just choose index.3 I think we're on lesson four and I forgot to change the file but I'll do that to make sure that the github repo with all the source code is correct so let's go ahead and check this file and yes we have some errors because we created one specifically let's see if that's our only error as we have noted in the past one error can create a cascade or a lot of errors so now I've formatted this correctly let's go ahead and load our file back up so we'll choose file we'll choose that index.html file again and click check now everything is okay document checking complete no errors or warnings to show so realize if you have an error it could just be one small syntax error that creates a cascade of errors when we're checking but this is a great way to learn and of course look at the details of the code and it's always a good idea to validate your code after you write it to make sure you don't have any syntax errors let's move on to creating links on our web page hypertext is the ht in html and it's what links together everything on the web it's really what makes the web work so well think about spider-man or really any type of spider that's throwing out strands of web and linking things together that's essentially what we're doing when we create hypertext links we're linking the web together now as we say link there can be some confusion because notice here in visual studio code on the left that i've got link tags that we created in the head part of the page that's from lines 4 to 11 and these link tags are pulling in resources from other parts of the web whether it's something we have on our server with our web page like this fav icon or we could pull in something from another part of the web like a font from google fonts and things like that which we haven't done yet but it's possible with the link tag but that's not what we use to link pages to each other i'm going to collapse this head section by clicking on the arrow over here by number four so we have a little more room and now we're looking at the body area in visual studio code by the way i'm running the live server extension and have our page from our starter code that's available for download at the github link in the description and i'm running that with the live server you can see it running here it says click to close the server shows port 5500 okay in visual studio code let's scroll down a little bit and let's add what is called an anchor tag that will create a link to another page on the web so in our list where it says let me tell you how and we're talking about the different things we do to learn web development we have an abbreviation for the mozilla developer network maybe this would be a good place to go ahead and link to the mozilla developer network and we can insert a link around this mdn abbreviation inside the inline element that is the abbreviation element so i'm going to press enter here to start a new line now i'll just type a and this is well i guess because it's followed by mdn it's not doing it so i'll start out with the less than sign and then a and this is the anchor tag that i'm starting but by itself if we just put the anchor tag while you can do that by itself it will not link to anything it needs a specific attribute that tells it where to go so i'm going to press enter here and we have it surrounded by this anchor tag we need to add the href attribute and now we're going to reference an address on the web so this is where we would put that address in over here in the chrome browser i have the mozilla developer network open we can see up here at the top it's developer.mozilla.org and then there's a slash after that that gives the specific language for the site i believe it will default to the browser choice i'm going to remove that part go ahead and select the rest and now that i have copied that with ctrl c i'm going to click here inside of visual studio code and put that address right inside the href attribute now i am wrapping the code down to another line so you can see it all it doesn't go off the screen i could expand visual studio code here and now you can see the full address without that line wrapping so we're linking to the developer.mozilla.org website with this link and we can save this and now i'm going to go ahead and bring visual studio code back to the size i had it the code lines will wrap but if we look at our code or our page in chrome that should have now updated because we're using live server you can see we have a link and it turned purple it's a little hard for me to see right now but we can change that color in just a little bit but that purple means a visited link if you have not visited that site it's probably more like a royal blue or a bright blue color and that means it's not visited yet and those are the default colors for links but something about this link that we need to acknowledge this is the full address to that website and it's a specific address this is what you would call an absolute reference this has the full address for the web page to where we're going but when we link to something that's already on the same server as our page where we're hosting our website then let's go ahead and expand this head section again notice we're not giving an absolute reference we're giving what's called a relative reference right now we don't even have a slash here because we know this html5.png file is in the same folder as our index.html file and the same with this main.css file it's in the same folder we don't even need to provide a slash it's not in another folder even so but it is a relative reference and that's the difference so we have an absolute reference here to a place on the web and then we can provide a relative reference to something that's on the same server that we're on so now let's go ahead and create a relative reference to another page and i'll scroll down to do this we haven't created the page yet we'll do that next but if you have your name here here at the bottom i have my name where we have the copyright symbol and in chrome i can scroll down and we can see this at the very bottom let's go ahead and link with a relative reference so i create that anchor tag that a tag and then href and equals and let's link to about.html and notice i'm putting quotes around that file name just like i did for the full address in the absolute reference above and now i want to put my name of course between the opening and closing anchor tag and now that will link this to the about page that we haven't created yet i'll save and notice now this is that bright blue or dark blue that i was mentioning earlier a link that has not been visited this page doesn't even exist yet so we need to create this page if you don't have the file explorer open in the top left of visual studio code you can click that and you'll see the files that we have here in the file tree what i want you to do is click on the new file icon name this page about.html now this is a good place to go ahead and pause the video you can click on the file explorer tree over here the file explorer to hide the tree if you need more room but go ahead and create an about page you know everything we've already learned from the index.html page so what i want you to do is pause the video create your own about.html and then come back and i will create one with you okay i hope that went well for you i'm going to help you create an about.html page now or you can watch how i do it and compare to what you did now i've been doing this for a long time and i'm going to take a few shortcuts so you don't have to see me type everything out i'm at the index.html page i'm going to press ctrl a to select everything then ctrl c to copy everything click the about.html page again and i'm going to paste everything in with ctrl v now as you're learning how to do this i think it's important that you type everything but i don't want to take up your time and by having you watch me type everything out so i'm just going to make some changes here the doc type is the same the html elements the same and of course we have a head section the meta tag for the character sets the same the author is the same now this description meta tag right here on line seven that could be just a little different i'm also going to press alt z to get this page to wrap lines that are longer so now you can see line seven wraps down to a second line here and we see the space to the left now in this description i can change this just a little bit and i'm going to say hi i'm dave gray this page is about me so we've given an accurate description for the page now and instead of my first web page in the title i'm just going to call it about me in the title and now we still can use this same fav icon and we're going to use the same style sheet so this page will look like the other page as far as the styles and now we can change the heading for the page and here i'm just going to say hi i'm dave gray after that i'm going to eliminate most of what we see here on the page so i'm going to highlight everything from line 17 all the way down to 63 i pressed shift and i clicked on my mouse there and i've selected all of that specifically and now you can see we're left with the horizontal rules and the space in between and so now i'm just going to put a paragraph that's not really about me i'm just going to create some lorem text and i can do that with a p element try lorem times one i just want one paragraph we'll click that there we go one paragraph of information so it's still kind of formatted that strange i'm going to go ahead and enter before and after there we go and now we've got that single paragraph here anyway this is a basic about.html and we have linked to it so now let's downsize visual studio code back here with the button you see right here the square not minimized but downsized it's not maximized either and now our link to the about.html should work so i'm going to click that link and here we're on the about page and now notice my name is this dark purple again so we have gone to the about page that we just created says about me here in the top tab i'm going to click the back button to go back to the original home page here now back on the home page there is a third type of link that we can create and this is a link to an area on the same page on the page we're already on we can create shortcuts to different areas of the page so we've had our absolute references we've had our relative references and now this is what i would call an internal reference or it's an anchor link directly to a portion of the page that we want to go to in order to do this we're going to add just a little bit more to our page so i want to click on the index.html there we are going to go ahead and collapse the head again and we've got a couple of topic areas besides our big hello world at the top so we've got the part where we're ready to learn html and we've got the part that we're discussing planning a vacation so we're going to organize this into sections and there is a semantic html element called section so i'm going to type the word section press tab and then i'm going to highlight the closing tag of the section ctrl x to go ahead and cut that out i'll come down here before the horizontal rule we used as a divider and i'll paste that closing section tag in and if i save yes we've got some auto formatting there so now we have our section separated and we've got horizontal rules in between i'll go ahead and add a space between each of those i'm going to do the same thing for the vacation planning area so type section press tab go ahead and highlight the closing tag ctrl x scroll down to the bottom where we're finished discussing the vacations and go ahead and paste in that section now i'll save once again took advantage of the auto formatting and we'll leave a space of course before the section here between the horizontal rule and the section and the same at the end just so we can see it a little better after the closing section tag we have a space so now we've created semantic html sections and that's not all we need we also need to give these sections an id attribute so i'm just going to give the first id value for the i'm ready to learn html area an id of html and then in the next section i'm going to give an id attribute and that value is going to be vacation and once again control s to save or you can go to the file menu and choose save that way as well now that we've done that we still haven't created the links but we have created the destination for each of the links that we want to create so now let's create one more semantic html element and to do that after our hello world heading i'll go ahead and press enter to come down a couple of lines type hr for one more horizontal rule and now between the horizontal rules i'm going to type nav and this is a semantic html element it says we're creating a navigation area inside the nav i'm going to type ul we learned how to create unordered lists already and so now we've added an unordered list and now we can add list items and the first list item that we're going to create is a link and there it absolutely after i pressed a and tab it knew we needed the href in visual studio code so now it's waiting for me to fill in this href now to link to our html section here on the page we need to add the hashtag and then the id value so there's html and so now we can put learn html for this link and then let's go ahead and add one more lowercase press tab and now hashtag vacation and we'll put here planning a vacation as a matter of fact let's change this from learn html to learning html and now at the top instead of hello world i'm going to put my goals for the year and now we have my goals for the year at the top and we've got learning html and planning a vacation but i put them both in the same list item and that's not what we want so i'm going to go ahead and highlight planning a vacation press control x to cut that out and now let's put it in its own list item so li press tab we've got a new list item and we can paste that planning a vacation if we save that looks much better on our page even though the blue isn't looking great on the darker background we'll still change that in the future so now if we click learning html on the page it goes ahead and scrolls the page directly up to the i'm ready to learn html section we can click back and we go back to where we were and now if we click planning a vacation it doesn't take us all the way to the planning a vacation area because there's no more content there's no more space it can't scroll any higher but it's scrolled as far as it possibly could to take us to that area and once again we can press the back button to go back and that dark purple is not looking too well so we're going to need to change those colors very soon before we change any colors though let's scroll down and create one more link that's an internal link on our same page here just to another area of the page so at the very bottom underneath our name and the link to the about page let's go ahead and return and add one more line here and this will be a paragraph so we can press p and tab inside the paragraph let's start an anchor tag and there has the href attribute and let's just link to the hashtag itself now what we want to put in here for text is back to top and we can save now if we scroll down in our page here we'll see the back to top link and if i click it it loads the page and takes us back to the top it's worth noting what we have up here in the address bar of course live server gives us our ip address which is our own computer 127.0.0.1 nobody else on the web can see what you're seeing this is just on your computer and then you've got a colon and the port number 5500 where live server is serving your page and we've got our index.html file then notice you've got the hashtag after that we could actually remove the index.html and the index page will still show by default just like you see right here and now once again if we click learning html notice in the address we get the hashtag html when we click back it disappears if we click planning a vacation we get the hashtag vacation in the address bar and if we click back it disappears in previous tutorials i had mentioned switching the theme over to this dark mode that's easier on my eyes was entirely optionable so if you're still using a white background with black lettering probably the purple and blue links look just fine to you and you could just leave it that way if you have switched to the dark mode theme that i have provided with some basic css already let's go ahead and make those changes so the links look better as well so we're here in the main.css file now in the file explorer so we're just going to change the color of our anchor tag and i'll switch that color to a color named alice blue after that i also want to change what the link looks like when it's been visited right now it's that purple color so i'm going to change that color to a light gray and there's also another thing that we can change and that is when you hover over the link or when the link is active and then i'm just going to change that color to hashtag ee not three ee there we go and save that and so now it's changed the color of our links you can see this is the light gray we visited these links but when i hover over it gets a little lighter and so that looks good i think we visited every link here no we haven't visited back to the top yet so you can even see the alice blue color right here and let's go ahead and visit back to the top and now if we go back you can see it's a little darker until i hover over it so we've just changed those colors we're not really covering css yet we eventually will after we get through all of the html but just for now if you want those of course these will be downloadable as well in the source code let's go back to the index.html file and let's hide this file explorer by clicking on the icon in the top left this is a good spot to talk about some link naming conventions and things you don't want to do so for now i'm just going to use this link at the very bottom that has my name as an example and one thing you wouldn't want to do is be instead of my name just put in the file text like this or what would be worse would be a full url like www.google.com slash about.html and if i save this of course that's not to google that's just ugly and of course you don't need all of that you can pair that down to just actually a short description of what is there you don't really want the full url there so i'll put this back to my name and there we go and another thing you really don't want to do is say this links to info about because really that's redundant so if i save that and we go this links to info about and i didn't have a space there i guess but either way saying this links to is really redundant just saying this is a link a screen reader knows it's a link you already know it's a link when you see something underlined like that so you don't need to say this links to or this is a link about that's just unnecessary you also want to keep your link text as short as possible so imagine if i had that same sentence before this links to information about dave gray and you just put the whole sentence in the link that's way too long just keep it to the exact topic so if the page is about you as in our about page just put your name in there for the link you don't want a whole sentence about that and now the very worst one of all really would be to say something to learn more about me comma and then instead of having your name right here for the text you put click here we've probably all seen a link on the web that says click here that has no description whatsoever for what's on the following page that's not good for the context of what you're linking to it's not good for a screen reader as it tries to get context from what the link says so really a link that says click here and of course you can imagine there could be several links that say click here all on the same page linking to different things and that's just confusing so you always want to avoid something like that that says click here so once again i'll remove all of this and we'll just go back and we'll put our name here at this link but i hope those pointers give you some guidelines about namings just keep it short and of course say what is on the following page a very brief description not a full sentence and definitely not something generic like click here okay i'm going to save the index.html and we're going to go back to the about.html page and we'll add a few more link types so we've got a section that we're really saying this is about me let's just add one more area here so we can add another horizontal rule press tab and now let's add an unordered list and inside this unordered list we'll have list items and this first list item should be a download so we have a favicon file that we can offer for download so let's say download n and then i'll give the anchor tag so a href equals and now let's link to that favicon file that we have so that would be html5.png and now inside of this we can put our html5 favicon text but this won't allow us to download the file yet we need to add the download attribute and now this is a download link so if we save this and we go ahead go back to the top over here in chrome and well i guess not back to the top we need to go ahead and click your name or my name whatever you've got on your page and that takes us to the about page and now we have download an html5 icon and remember this icon is in our folder over here as i click the file explorer so we've got html5.png and that's what we're going to download so if we click this link we instantly get a download of that file so that is a download link now let's add another type of link so add another list item here and inside our list item now let's say contact me at and now let's go ahead and do another anchor tag with the href and we can add an email link even though these are not advised and i should say before we add this these are not advised because there are so many spiders out there that crawl the web really search spiders if you will and what they do could harvest these email addresses and so these have kind of become a thing of the past most people add a contact form which we'll talk about forms in the future instead of just putting their email address directly in the page to be harvested but to add an email link you start with mail2 and after that you would just have your email address so i'll just put random at email.com and if that's your email email address i'm sorry but it seems random to me and then i can just put my email address which would complete the sentence rather than actually typing the email address there as well so i like something like that as far as being descriptive contact me at my email address and that's what the link is the link is describing your email address okay then there's one other type of link we can have oh let me save that by the way and if you click this link that says my email address it would ask you what type of email client you want to open these types of links with is what it should do at least okay the next link type that we have in our list item will be dialing a telephone number so now i'll say oops spell it right dial and now let's put our anchor tag with the href and we start out with TEL for the telephone number and you can experiment with this many examples i've seen add the plus symbol and i've also got it to work without the plus symbol so i'll put the plus symbol here in the united states most phone numbers are 10 digits so i would have like one two three would be the first set of digits then four five six and the last set of digits seven eight nine zero something like that and that is a telephone link so i could say dial and then i could just put my phone number just like i did with my email address and now especially on a mobile phone if this was a mobile website this would be very handy you could tap this and it should open up the dialer if i click this link now in chrome it wants to make a call it's asking me how to do it and pick an app to do it because i'm here on my laptop but on a mobile device this would probably open up the dialer right away now let's look at one more type of attribute here so i'm just going to put one more list item inside that one more anchor tag with the href attribute and we're going to link directly to google so we need an absolute reference this would be https colon slash slash www.google.com and we can put the slash if we want to as well and this is an absolute reference but the attribute oh and i haven't really put in any text let's go ahead and just put google uh because we're not really adding any extra context to this so the attribute that we need to consider that we haven't used yet is target and what i want to do is have this open in a new tab so i'm going to use quotes then you put underscore blank and save and now we have a link to google so let me maybe add a little context here i'll put open google and a new tab period save that and now we've got our link to google if we click this we opened up a new tab and i don't have internet right now i guess i need to check my connection internet's back up and running let's click this link again and there's google so we've opened it in a new tab and all is well so i'll go ahead and close that there's the one that didn't work and now we're back to our page now there's one more type of link i want to add before we finish today let's scroll down in our about.html and underneath our copyright line let's go ahead and press enter add a paragraph and inside here we'll add the link that we want to add so type a for anchor and now the href is just going to have a slash value what this does is link back to the root of our website and that is our index.html it's the page that loads by default remember i had said we don't even have to have the index.html up here in the address it's just the slash after the ip address and the port here on our local server and if we had a domain name like google.com well then the slash would essentially be the home it doesn't have anything else after the slash it loads a page by default so that's the same thing we're doing for our website so here we can just put back to home and save this and now we have a link that will take us back to our index page so let's click this link and we're back to our index.html but notice in the web address it doesn't even have the index.html up here it doesn't need that because it loads this page by default this is the first page of your website now that we've made all of these changes to our web page and we've actually added a second web page let's go to validator.w3.org and validate make sure that we don't have any errors in our index.html and our about.html we're going to choose validate by file upload and choose file and for me i'm going to have to go into my html tutorials folder click html course and i'm in the zero five lesson here so index.html open the file and check and document checking complete no errors or warnings to show now we want to do the same thing for the about.html and let's check that as well and once again document checking completed no errors or warnings to show if you have errors or warnings of course follow up on what it shows you here in the validator and i hope you've learned a lot about the different kinds of links you can create in your html files let's look at adding images to our web page until now we've only worked with text but html supports multimedia and images are a big part of that so what we want to do is go to visual studio code that i have here on the left and i have our project running here on the right and we're using live server for that so the live server has launched down here and you can click to close the server or open the server if you don't have the live server extensions search for that here in the extensions find live server and that should pull up by ritwick day and you just want to install that and it can launch your page for you okay going back to what we need we have clicked on the file explorer in visual studio code and we need to create a folder to hold our image files so i'll type img to name this folder and it is a common practice to keep your images for your web page or web pages in a separate folder as you organize your project now that we've got that i'm going to grab some images and paste those in so we can work with them you'll be able to download these images from the files and resources that i share in the description however at the end of this tutorial i'm also going to go over some resources where you can download your own images that are free for use so now inside this image folder i'm just going to right click and choose paste and paste these images in and let's look at what we've got i can click on the vacation image and i get this vacation image here and notice at the bottom we can see the size of the image it's 400 by 267 those are pixels we can look at this html logo that we're going to use it's 300 by 300 and we've got an image of the caribbean as well and it's 400 by 225 so i'm going to collapse this now and we're going to use those in our html code so now i'll click on the file explorer to hide the file tree and this all starts with the image tag so let's scroll down in our html to where we want to insert our first image in our page i'm going to put it right below the paragraph that says this is my first web page in the i'm ready to learn html section okay let's start by typing img and pressing tab and then visual studio code will help us with that imit abbreviation and it will automatically fill out the rest of the image element now notice the image element doesn't have a closing element like we see here with a heading or we see here with a paragraph sometimes you will see it with a slash like that at the end which means it's self closing html does not require that i should say html5 does not require that however if you are using this in the future in something like react it may require that so that's just something to be aware of right now i won't put that in because html5 does not require it and that's what we're focusing on okay notice the image element has a source attribute and an alt attribute automatically the source attribute tells html where to grab the image we want so we start by typing the folder name that we created and now we see the folder here image slash and i can click on that and then it provides us the names of the images that we have well we want the html logo that i saved so i'll just click on that and there is the full relative path to our image it's in the same project here and it's on our local server in this area so we don't need that absolute url that would grab it from somewhere else on the web so this is once again a relative path to our folder and then to the image then we have the alt attribute now the alt attribute has a couple of purposes one is to help assistive technology for those that may not be able to see the image we are putting on the page the assistive technology like a screen reader will read the description of the image so let's put html5 logo as the alt text but this also makes this alt text appear on the page if the image for some reason does not load so first of all let's just save our page and you'll see the logo now appear on the web page and suddenly our page got much more interesting it's awesome putting images into our web pages however let's go ahead and change the file name so that it doesn't find the image and let's see what happens on the page now we have a broken image icon but notice our alt text appears html5 logo so that is another purpose of the alt attribute i'll fix that so we get our logo back now there's other attributes that we can and probably should use with an image so one is title now we've seen the title attribute before remember the title text that we provide here in the title attribute is not accessible a screen reader will not read it so this can't be something that is very important that everybody should know this is text that can complement our image but it's not necessarily required the page is complete without it but we can add some complementary text here so i'll just put i am learning html5 it doesn't have to be i don't even need the period really it doesn't have to be identical to the alt text at all this should be complementary but now if we mouse over the image we'll see the title pop up that says i am learning html5 and that's complementary a couple of other attributes that way back in the 1990s these were required however for years these have not been required but now they're coming back and it's width and height so if we define a width here and we want to provide the same width of our image now i saved this image with a file name that tells me or reminds me exactly the width and the height and it's 300 pixels by 300 pixels so i'll just put 300 if we just provide the width html will remember or shift the image to match so the aspect ratio stays the same so if i switch this to 200 and save notice it also adjusted the height of the image however we want to provide both we want to provide the width and the height and let's provide exactly what they are and i'll tell you why this is making a comeback and why it is now recommended to provide the width and the height even though we can change this in the future with css so i'm saying we provide these but yes css may change and override these values so why do we provide them well it's a little complicated but it's called cumulative layout shift if you've ever gone to a web page and you were getting ready to click on something and then you saw the page shift around maybe a pop-up ad appeared or a banner ad and you clicked on something that you didn't intend to click because the button or the image that you wanted to click suddenly moved that is cumulative layout shift so we provide the width and the height now to tell the browser hey this is going to take up some space here and this is how much if we don't provide that the browser shifts everything once it figures out the size of the image now once again you can still change the size of the image make it responsive which would adapt to mobile devices and everything else with css so we really provide this information with the width and the height just to give the browser an idea of the size and the aspect ratio coming in so it just kind of prepares itself and that helps just a little bit it is now recommended by google developers that we do provide the width and the height in the image element with our first image added now let's scroll down and add a second image to our page and we'll scroll down to our vacation area place i'd like to visit let's change this to places i'd like to visit and they've got i've heard good things about the caribbean so this seems like a great place to put an image of a caribbean beach so once again we'll type our img abbreviation and press tab and then visual studio code helps us out by providing the image element with the source and alt attributes ready to go so for the source once again type the name of our folder press slash and now we get the names of the images we have ready i'm going to choose caribbean and then in the alt area i'm going to type caribbean beach and now let's save and see what we get on the page when we scroll down because we have to scroll down a little ways to see it and there is our caribbean beach image so now let's add a title attribute that's just a little different than our alt attribute just complementary text and this is i want to visit a caribbean beach and we'll save that now we're getting closer but remember we should apply the width and the height attributes as well so let's click on the file explorer because i didn't have the width and the height saved in the name of this jpeg file.jpg notice the other image we used was a.png there are different image file types and those have different extensions so now i'll click the explorer up here i'll go back open the image folder and i'm going to click on the caribbean image now when i do that in visual studio code it shows the image and at the bottom i can see it is 400 pixels by 225 the first number is the width so i'm going to close this now click file explorer to hide that so i have a little more room and now i can say width equals 400 and the height equals 225 and if we save everything should remain the same we've just provided these extra attributes now i've noticed that this wrapped a little strange here in visual studio code but know that the width and the height are still part of the image element that we started right here okay now that we've got that let's go ahead and remove the n from the jpeg so it will not find the image and make sure our alt text appears yes we've got a broken image icon but it says caribbean beach and that is our alt text so i'll fix that by putting the n back in the name spelling it correctly and the image shows up because now visual studio code can find the file for us okay we had to scroll down to see this image because our page is long enough that if we scroll to the top we don't see our vacation area anymore now this bottom of the page here you could call it a crease if it was a newspaper and a lot of the terminology kind of goes back to newspapers and magazines as we talk about layout and so this bottom part that defines the line that anything below that we do not see right now that's called the fold so anything after this area that we can now see is called below the fold so anything below the fold we have to scroll to see and now we scroll to see this image well there's one more attribute for this image that i want to talk about and it's the loading attribute and if we provide loading and we can set it equal to a value and there's two possible values the first one is eager but we never have to provide this this is the value by default so if we do not provide the loading attribute the loading attribute is always there and it's just set to eager we just don't see it but the one that we do need to provide is called lazy and what you want to do for performance for your web page is for any image that is below the fold that is one you do not currently see when the page loads you want to set the loading attribute to lazy and that means the browser will only load that image when it knows it is about to show it when we start to scroll now firefox the web browser firefox is much easier to demonstrate this in chrome wants to display the image much earlier so right now this image is close enough to the area that we see that it will still load this caribbean image automatically that we have here so i need to create some extra space and i can demonstrate this to you by using something called chrome dev tools that's available in the browser so let's do that now i'm going to scroll back up above places i'd like to visit to the hr area the horizontal rule that we have going across right here before the i am also planning a vacation and i'll type an abbreviation br for a line break and then i'll put the asterisk for times and i'm going to put 150 this imit abbreviation that visual studio code supports will insert 150 line breaks into our page there's no way i would want to type all of those individually but i can do it with this abbreviation so i'll click that and suddenly we have all of these line breaks if i save and we don't see this change but now there's a lot of space between the sections and that's what i need to demonstrate this so we've changed the code i'm going to click the maximize button here in chrome to bring the browser all the way out and now let's right click and choose inspect and you could also do this with keys and it would be control shift in the letter i all at once the control key the shift key in the letter i i'm just going to right click and choose inspect either way we'll open up the dev tools in chrome and now that we're getting the dev tools open it will automatically open to the elements tab and notice how if i hover over an area in the elements now it highlights those on the left in the browser so here i've hovered over my goals for the year and we can see that i can hover over the section that discusses html and it highlights that section what we want to do though is click the two greater than symbols here at the top and i'm going to choose the network tab once it shows the network tab you'll want your disable cache to have the check mark and that is because browsers know to save images after they've loaded them initially so they can reload them fast but that is called the cache where it stores the images that's c a c h e we want to disable that cache so we can demonstrate this also in this area right below the filters you see all fetch slash x h r j s c s s choose the image all we are interested in right now are the image files we don't want to see the rest of the files so once you've done all of that we're going to go ahead and reload the page so i'm going to click the reload icon up here in the browser and we've reloaded and notice down here we just see the html logo file that's all that has loaded right now and now as we scroll down as we get close to the caribbean image file we will see it load because it has the loading attribute set to lazy so only once we get close and i created a lot of space here so i'm scrolling down and fairly soon it should pop up there it is we don't see it on the page yet over here but it's getting close so chrome loaded it in preparation for us to see it but what that really helps is that it did not load the image right when we loaded our page so that made our page load faster it only loads these images when it thinks it's going to need them and that is lazy loading so now you can click the x here in the top right to close the dev tools then i'm going to click the maximize button again to get the browser back to the size we wanted it i'll drag it down here so we can see everything and then over in visual studio code i'm going to press ctrl z which is undo you could also go to the edit menu and choose undo but i'll do ctrl z and get rid of all those line breaks but again if you want to demonstrate that you can just type in br and then how many of those elements you want and visual studio code will recognize that so that is a demonstration of a lazy loading technique that helps your pages load faster imagine if you had a page that had a dozen or 20 or even 50 images you wouldn't want the page to continue loading until it loaded all of those images so lazy loading is a very good performance technique especially when you're dealing with lots of images that are below the fold now let's add a new element to our page and it's something we're going to wrap this image in so i'll put it underneath the paragraph that says i've heard good things about the Caribbean and i'm going to type the word figure and i'll press tab because figure is an element now i'll highlight the closing tag and press ctrl x to cut you can also get these options that i use with the keyboard shortcuts in the edit menu there's cut copy and paste so it's ctrl x to cut and now at the end of the image here i'm going to paste which is ctrl v and now i've got the opening and closing figure tags i'll highlight the image here and just tab it in as i'm used to seeing it so the image is inside the figure element now this by itself won't do much but it is saying we've got a figure with an image and we can add a caption and it tells the browser that the caption big caption element is related to the image which is better than just putting a paragraph underneath it the paragraph while we could visually see it's probably related to the image if it was right under the image it's not telling the browser or assistive technology that it is a caption for the image this spells it out for both the browser and assistive technology that yes what we put in here is directly related to this image but it doesn't have to be identical to the alt attribute of the image although it should kind of be a description of the image so i'll put Caribbean beach getaway here as our fig caption and now it does show up on the page and notice the image has been indented just a little bit and once again we can change all of the layout of the page and how everything looks with css in the future but this is just the uh default behavior when we apply a figure it's indented somewhat so we have an image and the caption now let's go ahead and add our last image as well and we want to put that underneath margarita island reserve Riviera Cancun an actual resort in the Mexican Riviera Cancun area so we'll scroll down here and underneath the address we want to add an image of at least the Cancun area because that's where we're thinking about going so image and we press the tab button and we get the source and alt attribute again so let's type img that's the name of our folder and slash and now we've got our vacation image and that looks good and now we can put in the alt tag the Cancun vacation for our vacation image and now in the title we can put something like it's five o'clock somewhere because that's kind of related to margaritaville and jimmy buffet and he's famous for that saying and it's five o'clock somewhere there's something worth noting about this phrase we've got single quotations here inside of our double quotations now that's what's possible if we had used single quotes out here this would not be possible but we can use single quotes inside of our double quotes so this does work now let's go ahead and save and if we look at the page right underneath the address for the resort we're thinking about we've got our Caribbean vacation image and if we mouse over we've got the title it's five o'clock somewhere that looks good but notice we don't have the space or the indentation that we get from the figure element so let's go ahead and put a figure element around this image as well so we'll type figure press tab once again i'm going to highlight the closing tag press control x underneath the image control v to paste it in and if i save i should get some auto formatting and so now i've got the image indented inside the figure and let's add a caption here as well remember it's the fig caption element so i'll press tab and now let's put a Caribbean vacation image so it's not quite the same as our alt attribute it's not the same as our title attribute but it's a nice description of this image okay we're not quite finished with our image it's easy to forget some of these attributes that we might not think about applying right away so one we know we need is the loading because this will absolutely be below the fold so let's set that to lazy as well and save and now let's click on the file explorer again in the top left and let's look at our vacation image and find the dimensions and we can see here at the bottom it's 400 pixels by 267 pixels so now we can close that out and click on the file explorer to hide that again and let's provide width and height so the width is equal to 400 and the height is equal to 267 so now we've provided all the correct attributes that we need for this image and everything looks good here on the page one more thing i want to add about figure figure is not just for images so let's scroll up here in vs code back to our html area and we do have our html logo right here underneath this is my first web page we'll scroll back up to this area here on the page as well and now we can add a figure underneath this image so i'll type the word figure again and now let's add a fig caption first the fig caption element needs to either be the first thing inside of a figure or the last thing it can be either or so here i'm going to type in example of html5 code and that will be our caption so let's save that much and we see that here but really we have no content inside of our figure yet so let's go ahead and add some content and i'll add a paragraph which is a block level element we've discussed that in the past block versus inline and now for the text of the paragraph i want to put that inside of an inline element that will not create a line break and it's a code element code this element code helps you actually display code if that's what you want to use you can use other elements inside of it though so if i want to display html code i can't simply put an h1 element because then it applies this element to the page we need to go back to what we learned about html entities to provide the less than sign which is an ampersand lt with a semicolon then i could type h1 and then ampersand gt with a semicolon for the greater than symbol and now i'll put hello world with an exclamation mark and then i'll do the less than html entity again and then a slash h1 and then the ampersand gt semicolon which is greater than and a semicolon and now if we look at the page we have got an example of some html code printed directly to our web page so this is another example of how to use a figure element it can contain other content such as a code sample and you can have a caption at the top just as easily as you can at the bottom of the figure okay our code for the lesson is complete but i do want to show you some image resources but before we can do that we need to validate our code with the validator once again so i'm going to grab this and make it just a little wider so the validator shows up better here remember we're at validator.w3.org we want to click validate by file upload click choose file make sure you're in the correct folder once this folder area opens up and i'm in the lesson six folder and then i'm going to choose the index file that we were working in and choose open and from there i can choose check and it should check the html it says document checking completed no errors or warnings to show that's what you want if you do get an error or warning it should tell you what line it's on in your code and you can refer to visual studio code find the line and fix the error that it is telling you about so once again validate your code before you finish before finishing this image lesson i wanted to share some resources that i use now there are many resources out there so these are just a few and i'm sure you can find others as well first there's this article that has 21 of the best placeholder image generators using placeholder images is very common practice when you're laying out a page and you're not sure the images you want to use yet what you can do is take a url like this from placeholder.com and put it in as the value of the source attribute in your html image tag and then it will generate a placeholder image until you find the image you want to put there some of these other image generators actually provide pictures like the second one on the list called phil murray provides random pictures of the actor bill murray but it works in the same way you put the url in for the source attribute value in your image tag and then you will get a picture of bill murray from this image generator okay the next several sites are just great places to download freely usable images as it says right here these are licensed for free use it's important to download and use images that you actually have the usage rights to so this is a good way to do that find them on unsplash.com is my favorite you can also go to pexels.com as you see here very similar site you can also go to gratisography.com and this site has unique and kind of funny pictures so that's kind of neat too and you never know what you'll see on these the next one is pixabay.com very much like the previous ones i showed you from there i want to suggest some free image software it's called irfan view i've used this for years it's just really lightweight software easy to use and you can load in an image and resize it and that's what i usually use it for you can also crop images with it i'll pull it over here as i have an instance of irfan view open already you can see i've got in this large picture of the caribbean beach but you can go to the edit menu and you can see different options that are here such as the crop and of course we'd have to select an area to do it but in the image menu there is a resize resample and here you can see you've got the dimensions of the image but i can resize this it's a huge image right now at 5,464 pixels wide i'll take it to say 400 pixels and it stays in sync so it keeps the aspect ratio and now we're at 225 for the height so you see the current size and then the new size i'll click okay and it brings it down to a much smaller nicer size easy to save as well as a new name and a great little software to use from there i also recommend canva.com now disclosure here there is a paid subscription to use this site however i believe they have a free account that you can at least get some of the features or try it out so canva.com is good after you've got your images and even after you have resized your images to the smaller size that you would probably use on your web page it's also a good idea to drag and drop them into tinypng.com i believe this also comes up if you type in tinyjpg.com but it will compress the images and they will still look good but they get a smaller file size so they load to that web page faster which is always important so all of these resources are great and i will put links to all of them 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 the 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 sub topics and then beneath that you could have h3 headers if there was a sub topic of a sub topic 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 control 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 control 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 what 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-label and then we can set it equal to something that clearly says what it is like primary navigation and now we have labeled our nav 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 control 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 that's 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 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 oftentimes 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 detail 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 8 am 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 the 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 8am and we also have a duration of three 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 0800 on a 24 hour clock and now let's put the closing time element after the 8am here and notice if i save this right now and show this it does not change what 8am 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 control 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 writing 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 in span 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 aside 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 seven 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 let's add a table to our web page tables structure tabular data that is data that's made up of rows and columns we often see this with schedules statistics in sports and many different types of data flight schedules for example and what we don't want to use tables for are an entire page layout back in the 90s and early 2000s it was very common to use a table to structure your entire html page so you may see some old code that does that but we do not want to do that we want to stick with semantic html and in the future you'll learn css and we'll design our page layouts with semantic html and css not tables okay tables do really need a little bit of css to look kind of accurate however we can start creating a table without css so let's do that now i'm going to scroll down in our html file and we want to get to this section that says my daily schedule the subsection and then we describe the daily schedule a little bit and we even have the aside here that says guess the number of hours i code per day so we want to put some of this in a chart or a table if we will not really a chart i guess so here we go with a line break and underneath this break we'll put a table element inside the table element i want to scroll up just a little bit so we can see this better inside the table element i'm going to type a tr element which stands for table row and inside the table row we put our data cells and those use td elements which stands for table data okay the first thing i'm going to do now is start a time element which is going to have a date time attribute we'll set that equal to 8 am and inside this we'll put 8 am notice i've pressed alt z already which has my code wrapping down to the next line if it would extend further so if your code is extending outside of the window here in visual studio code just press alt z and it will wrap to the next line i'll put a hyphen here and then another time element with a date time attribute i'm going to set that equal to 11 am and i'll put 11 am here so now we have 8 am to 11 am in our first data cell and then i'll put the activity in the next data cell and here we'll put right code now i'm going to highlight this full row and then press shift alt in the down arrow and it will copy that down so i've created another row quickly so we can just edit some of the information here so now i'll start at 11 am and then i'll switch the next one to 12 pm and so there's our one hour for lunch so here we can put eat lunch now let's do this one more time or i'll highlight the row and then press shift alt in the down arrow and now we'll have our afternoon time here so this is a 24 hour clock that we need to be aware of as well so we'll start at 12 pm and now this will be 17 and this would be 5 pm over here so now from 12 pm to 5 pm we can put in another activity and i'll just say study for other courses and we'll save now let's scroll down over here in our html and look at the table we have applied no css so we can see the columns with the times on the left and the activities on the right but it is a little hard to make out that this is a table so i want to add just a little bit of css to help our page out i'm going to click on the css file that we've linked to our project scroll down to the bottom and just paste in just a little bit of css for now this will be available in the files and once i save that you quickly see how it applies to the table this looks much more like a table 8 am to 11 am write code and we can see clearly each time block and each activity i'm going to go back to the html file but i also want to expand the browser to highlight something that happens here in the code i'm going to right click on the table and click inspect this will open dev tools and it should be showing the elements now if we highlight the table over here in the elements tab in dev tools you can see it's highlighted on the page notice all the orange to the right that is margin that is not table so the table doesn't expand to the width of the page it only expands based on the content inside the table that is different from some other elements like the paragraph element notice how it expands for the full width of the page or the ordered list element that we have here it expands for the full width of the page the same with the aside element so it's worth noting that the table is different from a lot of other elements that automatically take up the full width of the page the table element only expands to contain the content that is within the table okay i'm going to close dev tools resize chrome once again so we can see our code here on the left and what we aren't missing from a table are headers for our columns we clearly have a time column and an activity column so let's add that by adding a row at the top of the table we'll start with the t element again tr element and then inside instead of td for table data we have th elements for table header so we'll have time and then we'll also have activity and now if we save that notice that the time and activity are formatted just a little differently and i did not do anything different for these headings in the css what we have is a centered heading and it is in bold and that is the default styling that is applied to table headings now what if we had some data that needed to take up two columns in our table so in other words one cell would span the width of both columns we can do that so let's add a row at the bottom and inside the row we'll put one data cell i'm going to put free time inside here for data but there is an attribute called call span and we can set this equal to two and this will take up the width of both columns okay now i'm going to remove this call span and let's put a data cell before free time here and here we'll say inside of this data cell let's put all other times but for the attribute on this cell let's put a row span which also exists and we'll have this take up two rows so now let's put another row underneath and in this row we'll only have one data cell and here we can put sleep now if we save you can see our all other times is taking up two rows and now we have free time and sleep on the right now our previous lesson covered html semantics which definitely helps structure a page and tell the browser what the page is about and it also helps assistive technology like screen readers navigate a page for those that do not use a mouse for example to navigate the page so let's scroll up and start adding some semantics to our tables because that is also possible underneath the table the first element we want to add is a caption so we add the caption and we can say what the table is about and that would help someone navigating with the screen reader decide if they really want to navigate the rest of the table or just skip over it and clearly we can also do that visually so let's just put in my daily schedule like the same title we have for the subsection above in the h3 and as soon as i save that you can see now the caption spans both columns already and is centered and we didn't have to add a column span for that to happen that automatically happens with the caption after that we can clearly define sections of a table much like we do sections of a page so let's start out with the header and this is the t head which stands for table head now i'm going to go ahead and highlight the closing tag press control x to cut and add it underneath the end of the row and we can save and here you see the full table head clearly defined it doesn't change the appearance at all but it adds semantics to our table likewise there is a t body element for the table body so i'm going to once again highlight the closing tag press control x to cut scroll all the way down to the end of our table the last row but before the closing tag of the table and paste the t body tag so now we've got a head and body section for our table we can also add a t foot section so now inside of the footer i'm going to put another row and inside the row i'll put a data cell and i'm going to give this a column span equal to two well i didn't get the data cell started there we go now we go call span equal to two and inside of here i'm just going to put a statement but you could put something in the footer that say totals up all of the columns if you had a ledger that was tracking account numbers or expenses or say you had a sports stats or something like that or anything else that would need totaled up that would be a good place to put it is inside the footer i'm just going to put a statement about our schedule i'm going to scroll up before i add the statement but here i'm just going to put and that's what i do every day comma five days a week period just eat sleep code and recharge and i'll save and now we can see our footer is spanning both columns and we've clearly defined the semantics for our table now with a header a body and a footer now another question you might think of is what if the row needs a header as well it needs some definitions so if we can have a heading for our column what if we need another kind of official title for each row as well well we can do that as well so let's scroll up here to the top and in our header we'll need to put an empty square or an empty cell and we can do that we'll just add another th and inside of here we need to put ampersand nbsp with a semicolon this is an html entity if you remember when we covered html entities in a past lesson and that just puts a little small space inside of the cell now that we've added that we can add headings to each of the other rows so we'll have a th here for the first row and i'm going to put morning and then in the next row we'll add another th and i'm going to put break and in the next row th and i'm going to put afternoon next row th and this is evening and in the final row well i guess not the final row that would be the footer but this would be the final row with a row heading and i'm going to put night so if we save this we can really see how our table has changed but notice we didn't change the call span yet for the footer so we've got an empty square here as well here's the empty square we defined but we didn't plan on this so we better change our call span for the footer to three because we now have three columns and if we save that looks much more like it and you can see when we added the row span and we came down to this final row and we only added a first and a third column we didn't have to specify that this was the first and this was the third it automatically knew that because the second column in the row above is the one that had the row span of two now our page is looking pretty good over here as far as the table goes but we need to add just a little bit more for semantics and we need to go back and start at the header to do that so i'll scroll back up and here we are in the t head area of the table and for each heading that we have on the page each th except this one that has a space in it we need to provide a scope and that says how it relates to the table so this would be scope equals to call which stands for column and i'm just going to copy that because we need to add that to the next one and so time and activity both apply to the columns so as you might guess when we get down to the next part in the body where we get to the row headings i can paste this in but i need to change column to row and i'll copy this and we need to apply this to each one of the row headings so now at break and then we had afternoon evening and finally night and if we save that once again the semantics don't change the look on the page but we have really helped assistive technology navigate our table now this is the easier way to do that with scope however that you may see that accomplished in another way and that is providing an id for each header so if we had an id and set that equal to time and then we had an id let's say in this row or this row up here with morning and we set it equal to morning then in the td we would have to give the headers attribute and specify both so we would say time and morning i find it much easier to just provide the scope instead of ids and then having to add a headers attribute to each data cell as well so we'll just leave it at that i'll go ahead and remove these examples that gave the ids and we'll stick with scope up above here so there we go i just wanted to quickly discuss that that there is another way to do it now that we've completed adding the semantics to our page and we're finished with our table let's validate our code i'm going to go to validator.w3.org i'm going to drag the page over just a little bit click file upload and now when you click choose file make sure you're grabbing the correct file that you're in the correct folder i'm in the o8 lesson here it's the folder that i want and i choose the index html and click check and document checking completed no errors or warnings to show if you have any errors it should show down here and tell you which line they're on and give you some information about correcting those so far the html we have created has resulted in one-way communication but in this lesson we're going to add a form to our html page which will allow users to send information back to us and that makes our html interactive i've got visual studio code open here on the left with the starter code for the lesson and on the right we're displaying that starter code in the chrome browser and i'm using the live server extension to do that live server also immediately updates the browser with any changes we make in the code adding a form to a web page allows us to gather information from our users and more specifically it allows our users to send us information if they choose to this is exemplified throughout the web with contact forms so let's add one to our page notice i'm near the top of the page around line 13 where the body element starts and if we come down just a little ways we find our nav element on line 17 now here i'm going to highlight the last list item in our unordered list that has planning a vacation and i'm going to press shift alt and the down arrow to just make a copy of that below here i'm going to add another anchor and remember these are for links within the same page i'm just going to change vacation to contact in our new link and i'll highlight the planning a vacation and change that to contact me so now we have made a link that should show up here by our learning html and planning a vacation so i'm going to press ctrl s to save and there is our new link and now we'll want to scroll in visual studio code all the way to the bottom and maybe i can just grab the bar here and go a little faster because after our last article that has the places we do not want to visit on vacation and we can see that in the browser as well if i scroll that down it may take just a second to get there but here we are places i want to avoid we want to add our contact form underneath this but above the footer as well so underneath this last article but before the main element closing tag so i'm on line 170 right now going to add another hr a horizontal rule divider and from there we can start with our article element i'm going to scroll up just a little to get this closer to the center of the page or a little higher and then we're going to go ahead and add that id to the article element and here we'll need this to match what we put in the anchor link above so it needs to say contact from there let's go ahead and add our header for the heading hierarchy and this should be an h2 as it's a new article area of our page so it matches the other article areas and here i'll put contact me for the title now let's put a paragraph with a little description underneath and so in the paragraph i'll just put i'd really like to hear from you there we go and now we have a title and we have a bit of a description and now we're ready to add our form to the article so let's start out by typing form and pressing tab notice an action attribute is automatically added to the form tag and what we want to put here is where we're sending the information usually this would be to our own server but for this tutorial and just to demonstrate what a form does we're going to send it to a website that will display the information that we have sent with the form so let's type https colon slash slash http bin b-i-n dot org and then slash get now that last part slash get refers to the method we're going to use and that's the next attribute that we need to add to our form so method equals get likewise method is often post as well there can be other values and we'll see the difference because we will try both of those out before we're finished now the contents of forms are mostly labels and inputs and every input should have a label so let's start with a label element and notice it instantly has a for attribute that for attribute value should match the id value of the input so here we're going to put first name because that's what we expect and then for the label this is the part that we'll show on the page we also want to put first name and then i'll put a colon after that let's go ahead and create an input and you can also type a colon after the input and type text to get a text input and then press tab and notice we automatically have the type for the input filled out as text and now we have a name attribute and an id attribute and these you really want to match so i'm going to put first name and i forgot to put camel case here for the label but i like to use that on these so let's go first name and by camel case that means the second word has a capital so first name with a capital n and then for the name value we'll also put first name that matches and let's do the same with the id now remember the id is the one that absolutely needs to match the value of the four in the label this name attribute though is how it is identified at the server level so when we send this information onto the server the information that is in this input will be labeled with the value that we put in the name attribute so let's go ahead and save this much and see what we get on our page we can scroll down and look at our form it's very basic right now but you can see the title contact me and the paragraph i'd really like to hear from you and then we have our first name label and our input where the user can type information in this text input but there are a few more attributes that we can add so let's add one called a placeholder now this lets us display text but it's not the same as the value which would actually be what the user enters so this could just be an example i'll type the name jane and save and now we see jane in the text input but it will not be sent with the form if we click in that input and then start to type jane disappears and now we have a value an actual value entered but as soon as i delete the last letter jane will reappear so placeholder is just exactly that it is holding the place of whatever value will be put in so oftentimes there is example data in there just to show the user what is expected we can also add another attribute called autocomplete and autocomplete doesn't expect a yes or no or true or false like others often do with attributes as far as that goes this is expecting an on or off so we're going to turn the autocomplete on and that means it will remember other inputs that have been entered into this field and suggest those so if we were to submit the form and then fill it out again later it might suggest what we previously put in so that's a preference thing if you want to have autocomplete on or off then we can put required and this will require this field to have information from the user before the form can be submitted now notice i said autocomplete didn't use true or false or yes or no required does but we don't really have to set it equal to true like this we can just say required because if we put required there it equals true and then if we don't have required there it's obviously false and the last attribute we'll give this input is autofocus now only one element in the form or on the page can actually have autofocus because it can't focus on more than one at once this will put the focus in that input when the page loads so i'm going to save and then if we reload the page we should see the flashing cursor here there's focus in there immediately when the page loads so we can start typing instantly when the page loads in that field now i'm going to leave the autofocus here to have it in the source code for you for the lesson however with the contact us page being at the bottom of the page it may not be where you'd really want to have autofocus if you were creating a form okay and that completes our first label and input combination for our form now i'm going to highlight both of these and press shift alt and the down arrow so i can copy this down and i'm going to change first name i'll press control d to highlight every instance of first name which we have three and then arrow to the front of it and then go three letters in and just switch it to last name so we can change all of those at once again that's control d and it will let you select more than one at a time for each time you press control d okay so now we have last name we need to change here that didn't change this instance of it because we had a space between it so it was not the same as the others and we don't want to placeholder jane for last name so we'll just put dough and then autocomplete on i guess we did it for the other one that's okay but remember only one element or one input can have autofocus on a page so we need to remove that now let's go ahead and save and you can see our form has both inputs and labels it doesn't look too great though does it they're just all running along one line and then wrapping to the next when it runs out of room and with that problem it may be better to wrap our label and input in a block element that creates that line break so let's use a paragraph that once again better than using a div a paragraph has just a little more meaning than an empty div although almost the same in this instance and you will see some use divs here instead of paragraphs so we've got a paragraph there now let's wrap the label and input for the last name in another paragraph and save and now let's look at our form it has a little more space here this looks a little bit better than before okay let's keep adding to our form i'm going to scroll up again we'll get the last name towards the top of the page i'll highlight the paragraph and everything inside of it and shift alt and the down arrow once again and now we'll change last name to password so ctrl d to select every instance of last name again and i'm going to type password so now we've got a four attribute in the label and then the name and the id our password so let's change our last name here to a password value for label and type text also needs to be changed to password so this is a different type of input than we used for first name and last name for placeholder i'm going to put your secret and autocomplete is not supported on a password input so we can remove that but we do want to go ahead and require a password so now let's save and we see our new input down here that says password and that's your secret for a placeholder but now when i start to type into this input notice it has little dots instead of the text and actually let me see if i can just enlarge this a little bit so we can see these better there we go so we see little dots here inside of our input and that is what a password field does so it doesn't let the user see what is being typed in okay let's scroll up again and i will highlight the last paragraph with the label and input shift alt and the down arrow to copy and now we're going to change this one to something different let's say this is a phone number so i'll once again select well i just wanted the three but it's going to change five now because we had password in there so many times so we can change the label to have a capital p this is not a type phone though that doesn't exist however type tell does which is short for telephone so we'll leave the four attribute on the label the name attribute and the id attribute values all to phone all lower case for placeholder let's give an example here and i'm going to put 555-555-5555 and if we wanted to leave it required we could but we can add another attribute here too and i'm going to press enter just to come down a line for this it is the pattern attribute now the pattern attribute supports regular expression patterns and that's almost like learning another programming language if you're not familiar i'll at least show you this one that will give a pattern for a phone number like we have shown in the placeholder so we're saying zero to nine so this must only be numerical digits and then we'll use a curly brace and put the number three so it should be three numerical digits then we'll put the dash and now i'm going to put the same pattern again because we had three more and another dash and then finally it's going to be the same pattern again because we want all numbers and only numbers but this last one should be four and so that is a regular expression pattern that would match what you see here for the example now why else would we put the type tell instead of type text or type number well type number has a little different display and it actually provides arrows that would have you click up and down we don't want that but type tell also on mobile devices should bring up a numeric keypad on the screen instead of an alpha numeric essentially with letters it should just bring up what you would say dial for a phone number and now that i'm thinking about that the hyphen might not be available on that numeric pad so let's just make it simpler and go with all numbers here and remove those hyphens from our pattern too so it can still match so let's save this and now i'll go ahead and copy this down but we'll look at a example of a number input so we can definitely see the difference right now we see the phone input and it's input type tell and really we don't see anything any different here besides that because it still allows you to type a hyphen or an underscore or anything else you want in this input but we're just expecting numbers and it will have to match this pattern to allow the form to be submitted so the pattern does enforce what should be entered into that input and now let's go ahead and highlight phone i'll press control d again and i'm going to change this value to decade and we've changed the for attribute the name attribute and the id attribute but the label here that we want the user to see is going to be favorite decade now let's change the input type to number let's go ahead and just remove all of these attributes placeholder pattern and required and now let's add a minimum so we'll set the min to 1950 this is where the range will start let's set the max to 2020 and then there is an attribute called step and that means the interval in between essentially how many years in this case will we be switching between values and so we'll just move decade by decade which is 10 years and then the starting value so what we want to display and we'll start with 1980 so let's save this and now we see our favorite decade input here at the bottom and when i mouse over notice a couple of arrows appear let me enlarge this one more time oh i enlarged the code instead here we go let's enlarge the page one more time scroll up and look at this form i'll shrink the code there we go and so when i mouse over we see 1980 displayed but we get these arrows so we can arrow down to 1970 all the way to 1950 then i can't go any further likewise i can go up to 2020 and can't go any higher so our step interval is working and our min and max are also working and it's displaying numbers and now we're going to look at a very different kind of input so i'll just start over and i won't copy everything down but i will start with a paragraph element again inside the paragraph element we will have a label and it has a for value i'll put for coffee because we'll ask what the user's favorite coffee is so we'll say favorite coffee with a colon and now underneath that instead of an input element we're going to add what is called a select element now notice it still has a name and id so we'll name or we'll assign the values coffee to both of these as well the id here still needs to match the four for the label and we'll still have the same name for the input as it's received at the server as well now notice we do have a closing select element and so with that closing select element notice that's already different than the input that does not have a closing tag for the element but inside of select we need to put options so let's give our first option element here and it has a value and we'll set this to regular coffee but now that's not what the user sees the user is going to see what we put between the opening option and closing option tags so here i'm just going to put regular coffee with caps instead of all lowercase and now for the next option let's put iced coffee and do the same thing as far as what the user sees there we go i need to scroll up just a little more and let's look at our next option let's say this is a latte i hope i spelled that right and let's give another option let's call this cappuccino cappuccino c a p p u c c i n o there we go that's a little one i don't think about every day whoa i scrolled because i clicked just a little too far to the right sorry about that scrolling back down to our cappuccino there it is i scrolled way up by mistake get to the end of that line press enter add one more option here maybe two option let's put a cortado and what else could we put oh yes what i like to drink which is an americano so we've got several coffee drinks now in our list and maybe we should put other others always good there because there could be something we didn't think of so let's just put an other selection too and save and now if we look at our form over here we can see the favorite coffee is here with the select menu and we have to click on the arrow and then all of our options shown we can choose like i would choose americano we could choose other any one of these options and the top one is what is showing but we could decide to show a different one if we set it as selected so in the options let's say we want to display latte by default we would put selected here in the option and if we save now it displays latte by default so you can choose which one displays instead of just the top one our code's looking a little messy here as things started to wrap lines so let me just expand visual studio code for a little bit and you can see how this looks much more organized when the lines are not wrapping now there's another element we can put in here to help organize our selections so let's do that and it's called an option group and that is an opt group so once i tab over it gives us the closing tag too i'm going to highlight and control x to cut and out of the coffees that we're going to have because this first group will be coffees it's just the first two options so let's close this here it will reformat as soon as i save but we also need to put a label attribute which is different than a label element so this label attribute on the option group let's put coffees with a capital C because you will find out the user will see this value so now let's save this and we're not going to look back at the web page yet because we need to put another opt group here for the other coffees so now that we have that i'll select the closing tag and i'm going to put it after americano other doesn't belong to a group and that's okay too but let's give another label here for this group and this will be espresso drinks and save now i'll resize visual studio code and we can look we still have our latte selected as the default choice but now if we expand this you can see coffees is in bold we can't choose coffees i can't choose espresso drinks but i can choose regular coffee iced coffee latte cappuccino cortado americano or other but our list is better organized because we put in those option groups we can make a couple of other changes too so let's go back and just look at the code again and these other changes are actually attributes that we'll add back to this parent select element so one is multiple and that means we will be able to select more than one choice so we could select iced coffee and americanos and then we want to put a size value and this size says how many from the list will display on the page at once so if we save that you'll see what i mean by size now notice we have five values automatically displaying on the page and notice latte is already selected because we told it to select latte but we could also hold down the control button and click regular coffee and now we have two selected at once and i just noticed my typo in the label where i only have one e in coffee so i better fix that put the other e in at the end of the word and save okay i'm going to expand visual studio code once again now this looks nice on our page and it allows us to select more than one coffee and that's great but i want to show another input that we could use for this same type of data so right now starting on line 199 i'm going to highlight everything down to 214 now from the edit menu i believe there is yes toggle a blocked comment and i do this with shift alt and the letter a so i'm going to select all this once again this paragraph and press shift alt and the letter a and when i do that notice it comments everything out so i've kept the code if we want to go back to that but this is an html comment that we have previously gone over in the past lesson and it just comments the code out for now so i'm going to paste in another way that we could use this same information and present it to the user so here's the paste and let me go ahead and return there so we have the paragraph on a separate line but notice we have a label it's for coffee it says favorite coffee now we don't have a select we have an input type and it's a text type and then it has a list attribute and it says the list is the coffee dash list then notice we have a data list element and that id matches the list attribute of the input coffee dash list then i've got some values here that are much like the values that we saw in our select menu so this is just another example now let's save this and go back and look at our page and see what we've got it looks like a text input now when i mouse over notice the arrow and if i click the arrow there's our choices that we're getting from the data list but what is nice about this if i just click in there they pop up and i can start typing and then it just narrows it down it filters the list to what i started typing so that's a different type of input that can handle very similar data presentation so okay what i'm going to do now is highlight that data list leave it in the code for you but comment it out again i pressed shift alt and the letter a to do that and i can reverse this comment by doing the same thing so again line 199 all the way down to 214 shift alt and the letter a and now it is uncommented and so we've got our original list back with the select and i'll save that and you can see that now on our page over here on the right okay i'm going to expand visual studio code again and now so far we have got fairly good semantics for our form because we are applying a label with the proper for attribute for every type of input that we have and that's good but when a form gets large sometimes it's good to organize it into different sections sections that say what each part of the form is about so underneath our form element the opening tag here i'm going to type a new tag called field set and now i'm going to go ahead and copy that closing tag for the field set and come all the way down to just above our closing of the form as well because this will be a section where we've asked about the different information such as the name and your favorite coffee and so on and now inside of this field set we can specify one more element and this is called legend it's a lot like a caption and this is just saying what we're requesting in this section of the form and i'll put personal info here and then we can save now let's go back and look at our form again and you can see it's surrounded this section of the form because we're going to add more to it yet so we just sectioned off part of our form essentially it's got a square around it and personal info the legend is part of that frame of this section of the form and clearly this does give some more semantic meaning actually conveys meaning in our structure as we define part of the form and what it's about okay let's continue to add to our form now because there's some other types of inputs we want to cover so let's scroll all the way down by our field set and now after the field set we'll put in a break and then we can add a new field set so inside this field set we can add another legend element and we're going to say what is your favorite food so this section of the form is all about choosing a favorite food we'll start with a paragraph inside this paragraph let's have an input before the label this time and this is going to be type radio radio inputs are a little different but let's give it a name attribute and this will be for food and now the id attribute is going to be different than the name this time so we're going to say tacos this is going to actually be more like what the value of the input is and we'll assign that value attribute and here we'll say tacos as well so now that we've done that let's go ahead and put the label underneath and there we can have the four which it should still match the id which is tacos and then what do we want to show in the label well of course tacos with a capital t okay now that we've done that we've created one radio button so we need to do a couple more so we have other food choices i know tacos is the proper choice but we should have a couple of other choices here so i'm going to just do shift alt in the down arrow twice we've copied those down we're going to leave the name attribute food on all of these and that's because you should only be able to select one of these so when we select one the other choice should not be selected and that's what we achieve by giving them all the same name for the input but as far as tacos for the id and the value we can change that to pizza and we of course should change pizza here oh and i should have changed the four here to pizza as well so there should be three now this last one let's go ahead and select all three tacos change it to other and then here we'll say other as well now i should note that if we had an id of other we didn't with our option up here that was separate that had just the value of other as far as the option and the name and the id was coffee so we're good but you don't want to double up you want to make sure you have individual or unique ids for each input in your form okay now that we've added our new field set with the choices for our favorite foods let's take a look at that back on our page so if we scroll up we've got what is your favorite food and since they're all in paragraphs which are their own block elements they're each on their own line inside of our field set so we can choose tacos but then because they all have the same name food if i choose pizza tacos is no longer selected and it's only pizza so you want to make sure out of the radio buttons they all have the same value for the name attribute okay let's scroll down a little more and let's add another field set and we'll look at another type of input inside this field set we'll have a legend as well and here we're going to say do you have pets with a question mark and now for our inputs they're very similar to radio buttons but not quite the same so i'll start out with a paragraph input and the type is not text it is check box and then once again there will be a name and we'll set this equal to pets and the id is going to be equal to dog and then the value is equal to dog so you can see the pattern is much like when we were adding radio buttons let me expand visual studio code so this will be a little easier and now we'll go ahead and add a label after that and the label value will be for dog and what we will display on the page will be dog as well so very similar i'll highlight this we'll copy this down three times so now we'll continue to have the value pets for each one of these inputs but the next pet will switch from dog to cat and we'll put cat here on display as well and then maybe we want a fish we'll switch this to fish and then finally we could think about doing an other as well but remember we can't have an id that says other here too we would be doubling up on that so that could be a problem let's say and select all three and say other pet and from there we could say other because we just need this to be different the id specifically needs to be different than any other id on the page or in the form now let's save this and look at the page and there will be a difference between the radio buttons because when we ask do you have pets and we have a checkbox maybe we have a dog and a fish and we can select more than one at once a radio button won't let us do that but a checkbox will so maybe we have a dog and a frog so we choose other you can select as many of these or as few of these as you want to okay let's expand visual studio code again and we're down to our last input type so we've covered quite a few today already let's add one more field set and inside of here another legend as well and let's put it send me a note so inside of this field set we're only going to have one input but it's definitely different than the others this one is going to have a label and in the for area we'll just put message and here we'll put your message and now underneath the label let's go ahead and add a line break just to give it a little space and then we'll add our input which is a text area this should have a name and an id and you can also see it's automatically given columns and rows so for the name value we'll put message likewise that should be the same for the id since it needs to match our four and for the columns and the rows let's just leave it to the defaults here that visual studio code gave us it's 30 columns that would be how wide it is and rows 10 rows would be how deep it is so now inside the text area here we could put a value already this would be the value or where the user would type but i don't really want to do that i want to leave it blank but we can add some other attributes so for those attributes or attribute i should say let's add a placeholder and inside of this placeholder we can go ahead and put type your message here and then we'll just leave this blank but if you were to put it here it would be like a text input setting the value attribute but you don't really do that for a text area you would just go ahead and type whatever you wanted to right there and it would be the value in the text area so let's save this and now let's look back at our form again if we scroll down we can see an area where we're ready to type a message hey this is my message there we go so that you commonly see on a contact us form you might have a area for the email for a different message and so on but this would be where you would typically type a paragraph and i just mentioned email that is another type of input actually besides text and passwords so you could say it would be a type email it looks like a text input but it looks for the at symbol to make sure it's inside of the input as well so i did not cover all inputs today but we covered many of them and now we have a full form but we're definitely missing something yet we have no way to submit our form after we fill it out so we need to add submit button or buttons at the end let's start out with one so after that final field set we'll put in another line break and then let's put in a button element now a button element should have a type we'll set that equal to submit note you might also see a form that has a type and here we should put submit there we go so you might see an input with a type submit and that can also create a button the main difference here is that it only takes a text value and that's what will show up on the button inside of a button element you could actually put more things than just a text value inside of the button element so that that is a big difference i like to use the button elements overall because once again it's a little more semantic here we're saying it's a button and then we can just set the type to a submit button so here inside of the button i'm going to type submit and that's what will show up on the button so let's go ahead and save and now if i scroll down we can see our submit button here that is ready there's another type of button though too and let's add it to our form and let's go back and put a type set this equal to reset so if we wanted to reset our form and clear out all of the values it's fairly handy to have a reset button every time i save it's going back up but there we go submit and reset and submit when you submit a page it checks the validation immediately so notice when i clicked that submit button it said i needed to fill this value out because it's required and we didn't put a value in there so i'll do that again it instantly takes us up here and says please fill out this field so we've got more than one required let me put dave in the first name go back and click submit again notice it takes me to last name and says please fill out this field so it's going to do that for every required field until they're all filled out so we could put in anything in the password field and i don't think we required anything else let's take a look though maybe we did nope phone number is required so one two three four five six seven eight nine and let's leave it at that and it says please match the requested format it knows we haven't matched yet so i need one more number that should be good now if i submit it's submitted now let's go ahead and look at this what are we getting from HTTP bin and boy that is bright but i'm going to make this larger we see it's labeled as args which means arguments what we're sent with the form we didn't have everything filled out yet but it did send our default value for coffee and decade as well we didn't have a message but it did at least show that it was an empty message and it shows what else we filled out including the password notice that doesn't mean it's encrypted it just didn't show it to us as we entered it so we have to consider that if we're sending any sensitive information too but overall that is what we got so we could fill out the rest of the form and see how all that looks let's resize the browser again boy that is bright when we look at that information but notice when we went back the information is in all of these other fields but it's not in the password field we would have to re-enter that every time and that's just part of being with the password field so for favorite coffee let's choose a couple here i'm biased i want to choose americano because that's my favorite tacos is the correct answer here do i have pets let's go with dog and other because well i've got two dogs really and then we've got your message so i'll just put hey this is uh a message there we go let's submit again it's going to be bright i know but okay nice it fits on here the rest of this down below is headers and just information about how it was submitted with the browser so that's server information but this is what we're looking at notice now coffee gave us both values we got the latte and the americano we got decade first name oh and the server sorted this in order of fields so food comes after first name before last name there's tacos last name and a message and so on so we got everything we expected to right there let's add one more button to our form and this one will allow us to do something that we haven't done before and that is override what we are setting in the actual original form action and method so this will also be type submit and you can have more than one submit button perform and now this instead of just having an action attribute will have a form action attribute and here we can provide a different address to send the information to when we press this button so i'm going to use a very similar address it will be to the same website https colon slash slash let's go ahead and expand visual studio code so we have some more room here there we go http bin dot org slash post so we're going to use the post method instead of the get method and now for the next attribute instead of just method method this is form method and we'll set this equal to post and so on the button itself instead of submit i'm going to put post and we can save and now this will allow us to submit the same information with a post instead of a submit now notice all the information is cleared out because we successfully submitted before so i need to enter in at least the required information again and i believe that was the first four fields 79 put a one there we should be good and now let's go ahead and just press post and see what we get so we send it post now to the same website and you can see from the form not just args as they were processing with the git request however this is of course just for this server it could be processed differently on a different server but we have our labels and we have the information from the form what's important to note is that it says the origin where it was sent from and different things here and it says the url at the very bottom where it was sent to and that is what we specified so now let's look at the same thing if we are to send this information and i need to put information back inside of the password i guess it didn't clear out because it was submitted before i incorrectly said that it cleared out because we made a change and saved the html again so it reloaded here with live server but if we scroll to the bottom now and just submit and this is remember is a git request not a post request now of course this htt bin shows this as args up here instead of under the form heading but once again we get all of our information but what i want to show you is when i scroll to the bottom look at the url now all of our information is shown inside the url and that's what happens with a git request so you never want to send sensitive information with a git request because if we looked up here at this url we would see all of the information inside of it matter of fact i'll expand this it will be bright again but there is all of our information in the url and that's what happens when you send a git request okay headed back to our form resize so now you have added a full contact form to your html page and this is maybe a larger form than you would often add but overall we've covered quite a few inputs but remember to follow the mdn links in the description because there are even more inputs that i didn't have time to cover okay we've reached the end and it's time to validate our page let me expand chrome here and we've got validate by file upload we're going to choose a file and i'm going to be in my lesson nine and choose the index you choose the index.html you've been working on and then we'll click check just to see if we have any errors or if everything validates so we've got document checking completed no errors or warnings to show that's what we want if you do have errors it will highlight those welcome to your html project for beginners you'll be using everything you've learned about html5 to build a website for the little taco shop let's begin the html project let's get started by looking at the little taco shop website so we've got a basic website here that we created with html it has a nav menu at the top and an image here in the header and then we've got a description that says about lts which is an abbreviation for little taco shop and we can see that linked in the nav so instantly we know that is an anchor link and when we click it it takes us directly to that part of the page has some information about lts and it even has some emphasis on text here where it says love of tacos we can see some taco emojis and there is a link in the directions to emojipedia where you can get emojis and just paste them in with your text emojis do work in html there's a taco trivia section and you'll have to go back in the lessons and remember how we showed something in the html and then we're able to click the arrow and it shows more information this is all done with html not css css very minimal css is applied and available in the style.css file inside the css folder if we scroll back up we can see there's also a link to our menu and if we click that it takes us to the part of the page that has the menu and here the menu is a table so you'll have to go back over your knowledge of html tables and how to create this table once again minimal css is already available and it will apply to the table as you create it of course there's also a back to the top link and we've got some copyright information with an html entity for the copyright sign at the bottom if we click back to the top we're back at the top and we need to look at the store hours page and once we click that it navigates to another html page so we've got index.html and now the second page is hours.html it also has a navigation menu at the top as you can see it's an unordered list and you'll need to remember how to create that and now notice this is different now we have a link to the home instead of the hours page so it's not just the same navigation it adapts to what page of course and you'll have to create that for each page we've got another image and once again the image has a caption and then we've got the hours this looks like a list but you'll need to remember what type of list creates a list that looks like this where it says we're open seven days a week which is a description such as a paragraph but then this part starting with sunday and going through the hours is all a list we've got back to the top again and we've got the same information in the footer so let's click back to the top and we have our menu now let's go to the contact us page and on the contact us page you can see there's a link now back to the store hours and also links to home and the different parts of the home page now that's something to consider too that we're not just linking to another page but we're linking to a section of that home page then there is the image little taco shop tacos for the caption and we've got the contact form and you can go back over the forms tutorial to learn how to create this form and you can submit this form just like we did in the forms tutorial we aren't creating the back end that will process the form but you can set it up to submit to the site we used in the forms tutorial that will just show the information submitted and then there is an our location section and if you remember the html element to use for an address this is what you want to put inside of that and look the link to the phone number and if you're on a mobile device this of course is a false or fake number but this should actually work as a phone number if you create the correct link and we've got back to the top again and that pretty much covers the site but just to reference let's go ahead and click the about lts which will not only take us to the home page but to the specific part of the page so you also want to be able to link to that specific part from another page not just on the page itself such as when we clicked about when we were on the home page and it took us directly there so you can also do that from other pages now as we look at the starter files for this project not only is there a readme.md file that has the directions and these directions are in a markdown file that's what.md is and this is making it very easy to read on github where you look at the resources and so you can also just read them in here like this but the other beginner files are already here so you've already got a fav icon that you would link to in the head of each page you've already got some css inside of the css folder and you can link to this style.css in the head of every page as well you've got all three images one for each page here and you've got some examples and these examples are important because you'll want to go back and reference that you don't necessarily have to always go back and pause the video you can just click on the image and i have made full screen captures of the entire page so you don't have to scroll you could zoom in a little if you want to but you have these to reference so here's the contact page when it shows up there we go and there's an hours capture as well so you've got one for home one for hours and one for contact and you can reference these visually to help you create these pages it looks like it just takes a little bit to show up inside of visual studio code of course you could open these image files with some other software if you want to as well or directly in the browser and just keep different tabs open to view each image file if you want to that would also work so there you go you've got to create three html pages here in the root of your tutorial folder and then reference these other files and you've got the examples to look at and you've got the favicon file already as well so if we go back to the directions let me see if i left anything out you've got your files all named index hours and contact we talked about that minimal css available inside of the styles file styles.css all images are provided and if you need taco emojis here's a link to that as well and the favicon is included so that's everything good luck with the challenge and then of course after this you want to pause the video and complete it to the best of your ability and then all walk through and create these pages with you for the solution afterwards so don't do that now pause the video and actually attempt it on your own that's the best way to get better at something try this out for yourself before you allow me to walk you through it okay let's get started building our project i'll close this readme.md and i'll close any image file that we had open before matter of fact i'll collapse the examples and we're just going to create the three html files that we need first we need index.html and then we also need contact.html and if i remember right we need hours.html okay with our three empty files created let's go ahead and start on the first one which is index.html we know every document starts with doc type and if i press tab it adds the html from there we know we need the html i need lowercase or i prefer lowercase and then we need the attribute lang and that equals english is what i'll put of course you could put something different there if you want to we instantly get the closing html tag if you don't of course add that as well from there let's create the head section so here's the head element i've got the closing head element and this will contain several meta elements the first one has the character set attribute and we specify utf dash eight after that i have another meta and this is going to be name equals author and of course this should be your name i'll put my name here so dave gray after that meta name equals description and this is where we describe the page so once again we have a content attribute and i'm going to put the official website for the and i need to press alt z to wrap the code here little oops i didn't get a space little taco shop and i should really put a capital t there as well because it's the official name okay so we've got the little taco shop and of course that's what our title will be for the page as well so we want the little need to spell this correctly the little taco shop in the title as well after the title let's add a link and here we're going to say rel which is related it's an icon and the href and now let's put in that fav icon that we have and after that we'll say this is type equals image slash x dash icon and now let's add one more link tag and how it's related to the page is it's a style sheet and now the href will point to that css style sheet so we need there it is css and then we want style dot css and after that we can close our link tag and we're finished with the head so i'm going to press control s to save now i could copy this much and paste it into the other two pages and just make a few changes but i'm going to do just a few more things before i do that so just underneath the head we'll start our body element and then in the body element we'll start with a header element inside the header element we're going to have an h1 and we'll say welcome to the little still not typing that right there we go the little taco shop and that is our h1 heading for the page remember every page should only have one h1 header i'll scroll up now for some more room and now we'll start our nav element this is where our navigation menu will be we get that closing element inside the nav element we're going to have an unordered list and then each list item will have a different link so here we'll start out with well let me put a line in between there we go let's start out with our anchor tag and the href is going to equal hashtag about so this is going to link to an about section on this page so i'll say about right there and then after that let's go ahead and put an abbreviation element inside of our link and here we can give a title to this abbreviation and this will be the little i spelled it right that time taco shop and then we'll close that out and since we're abbreviating we'll put lts so our link says about lts and now we can just copy this link item down so highlight the full li and then i press control alt and the down arrow it should be the same for you on windows it may be a little different on a mac or linux now the next link is much easier here so we'll just say about and it's hashtag menu i want all lowercase again so no abbreviation for the menu so it's just about menu or i'll put our menu i think that's what's actually on the page and then from there we can copy this down once again a little easier for the next link and let's copy it one more time there we go three hour menus let's change this second menu that's the hashtag menu to our hours.html so we're linking directly to another page now and then we can put store hours and then for this last one we'll remove the hashtag menu and we'll put our contact.html and then we'll put contact us here instead of our menu now i'm going to scroll just a little bit more and while we're still in the header out of the nav but in the header i'm going to add a figure and then inside this figure we'll add our image so here's our image element and we'll give it a source equal to and then we want to specify our image folder and then let's pick our tacos and drink image and once we have that image we can add some alt text for that that actually says what it is so we'll put tacos and a drink remember alt text makes our images more accessible and then we have a title and we'll say we love tacos the title does not have to be the same as the alt text and then let's provide the width and i notice i saved the width and the height in the image name so the width is 400 and then the height equals 267 and we can close out our image tag but we're not quite finished with our figure yet let's go ahead and add a fig caption element and inside this we'll give a description once again tacos and a drink as our caption for the image okay now we've completed the header so let's once again scroll up for some more room and then in between the header and the main element let's put a horizontal rule and after that let's put a main element where the body of our page will be and right now let's leave a comment saying our content will go here and then after that we'll have another hr and then we'll have a footer element and now we need to put something in the footer as well if you remember from the example each footer had a paragraph that said copyright and now we need to use an html entity for the copyright symbol and that is ampersand copy with a semicolon and then we'll just say the little taco shop and now we can save this and now we're really ready to copy all of this code and put it into the other pages as well and we'll just need to make a few changes and then when we add actual content to each of the pages that's where it will really differ so i'm going to press ctrl a to highlight everything and then ctrl c to copy everything go to the contact page and press ctrl v to paste that in ctrl s to save go to the hours page and do the same ctrl v to paste it all in and ctrl s to save okay while we're on the hours page let's make the changes here first i need to press alt z again in each one of these files to get the code to wrap in each one so now we can make our changes everything is the same as far as the author and the content but when we get to description we'll have a different description this will be store hours for the little taco shop and now that we've changed our description we can also change our title instead of the little taco shop here let's put lts hours since it's not the home page we'll just go ahead and abbreviate as we can assume the owner employees and even the townspeople in the little town for the little taco shop refer to the little taco shop as lts now let's scroll down into the body where we have our header and a little bit needs to change here too so it's not welcome to the little taco shop here we'll put the little taco shop and then hours after that and now our nav is going to change somewhat too so it's not just a link to about lts we need to go to another page and if you remember we can just go to the slash to go to the home page so here we need slash about to go to the about section of the little taco shop on the home page so we'll do the same for the menu and now where we have hours we can just eliminate this because we're going to put in a home link instead so i'm going to press ctrl x to cut it out then just backspace out that extra line here scroll to the very top and paste in the one that i just cut out and now we're going to link to just that slash that i was talking about and that will link to the home page so let's change the store hours to home and i'll save that much now let's scroll down a little bit further and we need to change out our image as well so now we're not going to use the tacos and a drink image we wouldn't want that on more than one page so now i want image slash and we'll choose tacos tray now notice it's also 400 by 267 so we don't need to change that but let's change what it says here for the alt text and we'll say a tray of tasty tacos and then we can add a tray of tasty tacos for the fig caption as well i should have just highlighted that copy and paste again control c over the fig caption and control v and we could leave we love tacos for the title here as well but let's put we love trays of tacos that's some nice title text as well and remember the title shows when you put your mouse over the image and if we scroll down we don't really need to change anything because the footer stays the same between all the pages so we're finished with the immediate changes to the hours html now let's go make those same types of changes to the contact dot html i need to scroll back up to the top first and press alt z to get the code to wrap now we need to change the description again so let's change this to contact information for the little taco shop and let's change the title for the page as well and here we'll put contact us and then let's put a dash and put lts just because we want the lts in the title for everything that's not the home page and we leave everything else the same so now we can scroll up and this is the contact us page so let's highlight this h1 change this part to contact us and now for the about once again we could actually go over to the hours and now let's copy this nav and we'll just have to change a little bit less that way so copy the nav and now we'll highlight the nav that we have in here and paste in the new one from the hours page so now we have the same home link we have the same about link we have the same menu link and we only need to change contact to hours so this will link to hours and then we just change this contact us to store hours and let's save that much okay scrolling down to the figure we need to change out our image again this one's just a little different so now we've already had tacos and a drink and the tacos tray this is tacos close up and notice the size is a little different 400 by 260 so we've got 400 here we need to change this to 260 instead of 267 okay now our alt of course will be a little different as well this will be little taco shop tacos and now for the title let's put tacos ready to eat and then we can put little taco shop tacos here too so i'll once again highlight that alt text and put the same text in here for the caption that we're showing on the page and if we scroll down we can see our footer remains the same here too so let's save the page and we're ready to begin working on content for each of the pages okay i'm going back to the index html and i'm going to click go live or i could right click and choose open with live server because we're using the live server extension to view our web page and we can go ahead and start looking at our page it doesn't have a lot on it but it has enough to get started here we've got our header section and we've got the menu with the different links so i'm going back to the code i'm going to resize visual studio code and press ctrl b to hide the file tree so i have more room to see the code and we're ready to add content to the page inside of the main element i'll delete that and we'll start with an article element i'm going to give this an id equal to about so our about anchor tag works our link works now i'll put an h2 and inside the h2 i'm going to put about and then we need that abbreviation with the title value again of the little taco shop and now we'll put lts there we go and that completes the header so now let's put some content we'll have a paragraph here and i'm going to take that same abbreviation and start the paragraph with that so lts was founded in and now remember we can use a time element to give some meaning to the dates and times we put on our page so i'm going to put a time element here with a date time equal to 2022 so the little taco shop is a fairly new location get a period at the end of that sentence and we can put our shop was built on or it was built from there we go a love of tacos and then we'll put a period there we'll say we hope our shop adds a unique and interesting place to our little town now let's add just a little more flavor to this paragraph so we can put a strong element and then we'll put love of tacos inside that so it has some emphasis and now we also want to add some taco emojis right after that so let's go to a new window and i'm going to type in emoji pedia.org and there you can search for emojis i'm searching for taco and once i find taco i'm going to click that and it allows me to copy that emoji so after i say a love of tacos i'll put a space in control v control v control v just paste it in three tacos so i'm going to close out emoji pedia we no longer need that but let's save this and see what we get on our page so now if we look at this we've got about lts and there's the abbreviation and when we mouse over we get little taco shop and now we've got our paragraph for the about information now i'm going to scroll up just a little more but right after the paragraph i'm going to use another semantic element called aside if you remember that one and for the aside i'm going to put an h3 header so we're following that header hierarchy put taco trivia so for taco trivia we're going to have a question that only shows the answer when you click on it and for that we need to start out with a details element and then inside the details element we're going to use a summary element so inside the summary is where we ask the question and we can say when did tacos first appear in the united states and now the nice thing is this question will show but you'll have to click an arrow to see the answer that is contained within and that's within just the rest of the details here and it's a paragraph now i'm going to copy and paste this paragraph in and put it right here and notice i added another time element here with 1905 and we can save that much and we can see our taco trivia down here at the bottom and when we click we see the rest of this but there's just a little more i would like to add and it actually has one element in there that was not covered in prior lessons but remember there is a wealth of information and many different elements that still remain uncovered i guess they're not used as often but you can look them up on the mozilla developer network so i'm going to put in a citation and there is an element in there called site so right after this i'll paste in the citation and here you can see i put the source let me expand visual studio code that's getting a little cramped you can see i put the source and then i put a site element c i t e and inside that site element i put the link to the source so that is right there and that's smithsonian magazine so now if i save i'll resize once again to come back and look at our taco trivia and when i show the information you can see the citation is put in italics by default with that site element okay let's resize visual studio code again to get a little more room and scroll up as well after that aside we have really completed our first article so let's put a horizontal rule in here which also indicates a topic change at least somewhat in the main area and put another article now this article i didn't add the id but it needs the id because the id equals menu and this is where we will put the little taco shop menu we'll start with an h2 again to follow the header hierarchy for our page and we'll put our menu for that and then we'll start our table element inside the table element the first thing we're going to add just immediately if i could start is a caption there we go and we'll just put our tacos for the caption after that we need a t head inside the t head will be a table row and the table row is going to have our columns and these are our heading columns so the first one so the first one is tacos after tacos we're going to have a second th and this th is going to have well let me go ahead and type th again there we go this th is going to have a scope and let's set this scope equal to column because it's for the column and then we need our abbreviation element once again so let's type abbr and then we'll put the title equal to quantity and now we can put in the abbreviation for quantity that we want to use which is commonly qty and then we'll add another th and it will also have a scope let's set this equal to column as well and this will be the price column okay going to scroll up as you might have realized when we learned about tables tables take up a lot more space as you create them in your code so we've completed the head and we need more room for the body of the table let's add a new row and inside this row we're going to add another heading but this will have a different scope so now that we're back there we'll go scope equals row and now that we're ready to put in the value let's call this crunchy but i did forget an attribute this also needs a row span so this will have a row span equal to three okay after we've created the scope and the row span with crunchy we can't forget the values of the other columns so now we need one for the quantity and for the next one which was price we need a dollar 50 so there's our first row and now we can create more rows but what i really want to do is just take these last three and you shift alt in the down arrow and then add an opening tr here i wanted to add a closing tr as well but we don't need that because this crunchy is taking up three rows so we don't want to add that row down here we just need the other two rows so let's turn this one into two dollar or two quantity of two and two dollars and fifty cents now i'll just highlight this row and take it down one more time and we'll have a quantity of three and we'll put three dollars and twenty five cents so now we've got the feel of this where we've got the first one with the title and it's taking up three rows and then we've got the quantity and the price so what i want to do for the next one is to just highlight all of these and press shift alt in the down arrow and once again just make changes so this is going to be soft instead of crunchy and now we've still got a quantity of one but is the price the same and no it's not soft tacos are a little more expensive so two dollars and then for two soft tacos it's 350 and for three soft tacos it is 450 now let's scroll up some more we've finished with the body but we need to add the footer to the table and that's the t foot element and now inside the t foot we're going to have a table row and then we'll have a data cell table data and it's going to have a call span attribute so it's going to span all of the columns so that's three and then inside of the table data we'll put chips and then and amp is for the ampersand that is another html entity and then we put salsa two dollars and now we've completed our table but underneath the table in this last article let's go ahead and put a line break and after the break let's put a paragraph and let's go ahead and add our back to top link so now we'll have an a with an href we'll set this equal to the hashtag which should just reload the page take us back to the top and we can save so now let's resize visual studio code and see if we have all of our content yes we've got the crunchy that took three rows and the soft that took three rows there's the table footer everything looks like we planned it and our back to top link is here it takes us back to the top as well our taco trivia everything is good about the home page so now let's work on the store hours page it is a fairly short page and there you can see it displayed to the right and we'll pull up the code here on the left okay let's scroll down and we've just got a little bit of content to add in the main area here of the body inside the main element so we'll start out with a paragraph and inside this paragraph we'll just say we are open seven days a week with an exclamation mark after that we need to add a data list so it starts out with a dl element inside the dl element we'll have a dt and this is where we'll put our sunday dash thursday so sunday through thursday and then underneath that we'll have a dd element and that's where we'll put our 11 am dash 9 pm so now we can just copy this down because there's only one more those like it and we can just change the days out so now this will be friday saturday and then the hours are different as well it's 11 am to 11 pm and we can save that now we also need to add a back to the top link as well so here's our paragraph and then we can say a with href once again equal to the hashtag and back to top and save once again and now we can see all of this here on the right our back to top really isn't needed because it's so short but we're just consistent between each page and that's fine so now let's go over to the menu page or not the menu i'm sorry we want to go to the contact us page that's where we are the menu is on the home page i don't know about you but i'm starting to get hungry when i look at those so let's finish up this project so we can go get some tacos i'm going to scroll up and once again we're going to change out the comment inside of the main element and put in our content we'll start with an h2 following the header hierarchy remember we already have contact us up here in the header i believe if we scroll up there there's the h1 so we want an h2 here and this h2 is going to say our contact form okay now we need to go ahead and create this form so we'll start with the form element and let's go ahead and give it an action oh there we go form tab over and it gives us the action there we go and we'll send this to that same website we used in the forms tutorial that's http bin.org slash get so we're going to use a get method when we submit it and we'll at least be able to see the information on that website so as i said we use the get method so let's go ahead and apply that attribute as well method equals get after that i'm going to put some space here in the form and we need a field set element now we can put our form inside the field set element and then we'll have a legend element and here we'll say send us a message and then we can start in with the description of our form so we have a paragraph and then we have a label and then it has a four and this will be name and so then we need to put name inside the label as we label the input and now we need that input so here's the input let's give it a type there we go text there it is text now we put in the name which is name and the id which is going to be name as well and now i want a placeholder element here also and this placeholder is going to say your name giving the user a clue as to what to put in and let's put in required as we want the username to be required before they can submit the form scroll just a little more for some more room i'm going to highlight this paragraph now and once again shift alt in the down arrow and now i've already got my label and input and i just need to change some of these things so this will be email and we'll change name here to email as well and now this will be an email input and then for the name and id i'm going to press control d for each of those remaining name words and then i can change them all at once to email okay i'm going to save this much and we see the beginning of our form over here but we still need the area to put in the message so i think i want to scroll some more for that and then return once again one more paragraph inside this paragraph let's have a label and now the four here is going to be message and now inside the label we'll also put well we'll put your message here that's fine and then we need a text area which is a little bit different than a text input this is going to have the name of message and it should have the id of message as well columns 30 and rows 10 that's fine that is the default and then placeholder also so let's put a placeholder let's set that equal to type your message here and then the actual message of course goes inside the text area so we'll save that and now we should see a place they can put their message oh but we can see it looks a little different this doesn't look quite right let's put a break after that label and then it should put the label up on top of that message box now let's scroll a little bit more and after the field set but important enough before the form has ended we need to put a button and then inside of this button let's give it an attribute which is type equals submit and then let's go ahead and put send for the button text i'm going to copy this down control alt in the down arrow and now this type will be reset so we have a second button and we can put reset here as well so now let's save and we should see our buttons that will send or reset the form and as i look at everything i've noticed something we put our form inside the main element but i wanted to wrap that inside of a semantic tag as well not just the main element but i wanted to put it inside of a section element so let's go ahead and put a section element there and we will copy that or cut that actually with control x and scroll all the way down to where the form ends and put the closing section there now let's save that it doesn't make the page look any different but it holds up the html semantics better and the main reason we need it is because the form is not the only content of the page so we have another section here and this section has an h2 of its own and here we can put our location which goes nicely with a contact us page as well so now we've got the h2 there and we need an address element because now we can put our location inside of this address element so it's 555 taco temptation lane and then it's at sweet t line break and then kansas city missouri and then 555 55 dash 55 55 completely fictitious zip code after that we'll put in a line break and another line break and then let's put in a phone number which is also fictitious but we want an actual link that will work to make your phone or whatever mobile device dial the phone number and we can do that with the tell abbreviation and then we need a plus and then 555 555 55 55 there we go and then we can put the link so it's 555 dash 555 dash 555 and now we've completed the address section so if we save that and scroll up a little bit there is the location information and with that i believe we have completed our website in the three pages so i hope this tutorial has helped and more than that i hope you were able to complete much of it on your own before watching the tutorial let's expand chrome and look at our overall site so if we go to the home page here it is here's everything we added here's the back to the top link that works too we can go to the menu that's great we should be able to go to the about lts yep that works good too mouse over an image and we get our title text all of that's as expected store hours everything looks like it should here as well and then the contact us page everything's looking good here let's go ahead and try the contact us information so then we say dave at dave dot dave whatever and then dave in the message that's fine send and yes it goes to the http binn dot org and we see the information from the form and that's a great site to test out forms on so everything is looking as it should i'm ready to go get some tacos congratulations on completing your html project