hello world today we're gonna learn HTML in under one hour HTML or hypertext markup language is the skeleton of the web it gives meaning to your web pages and allows you to create structure and Define headers navigations sections paragraphs links images and a bunch more with the help of elements tags and attributes HTML is the first step in your journey to becoming a web developer you need to know it before moving on to CSS and JavaScript no in any kind of work you're supposed to use the best tools for the job and the best tool for us developers is a code editor like Visual Studio code AKA vs code open up your browser and head over to visual studio code's website just type A vs code on Google and it should be the first one that pops up download visual studio code for Windows or Mac OS if you are on a Mac I already have it installed so I won't cover the installation process however when installing vs code make sure you select all the checkboxes inside the additional tasks tab the open with code is especially useful let's talk about setting up a project find a place in your computer where you want your HTML files to be in in my case and for the purposes of this course I created a folder inside my desktop called sling.html but you can call it whatever you want open your folder right click anywhere and select open with code opening vs code for the first time may feel overwhelming at first but don't worry the more you use it the more familiar it will become the first thing we should do is install some useful extensions on the left side panel find the extensions tab on the search input type live server and install it globally we will go over what this does later next up type prettier and again install it globally prettier will make sure our code is properly formatted to start coding in HTML we need to create an HTML file make sure you are on the Explorer tab click on new file and call it index.html you just created a new HTML file with the HTML extension let's add our first HTML line inside every HTML file there is a required Preamble found at the top of all documents the doc type although this looks intimidating it's really not literally all this does is tells the browser we are using the latest version of HTML so to make sure the relevant specification is followed just remember that this is required on each HTML file you ever create and that it needs to be added at the top of your document before everything else let's start with an empty document and one by one add the necessary elements that make the anatomy of an HTML file first we need our doctype which again is required inside every HTML file at the top of the document to tell the browser which version of HTML to render second you have the HTML element this one is very simple all your HTML code goes inside of it you will be writing HTML code inside the HTML element it is often referred to as the root element nothing comes after it and all HTML code must be added inside of it to make things even simpler the HTML element only takes two elements as children The Head and the body element we will learn what each of these do in the next lesson these five lines are the very basic but necessary anatomy of any HTML document every HTML document you will ever look at will always have these inside of them doctype HTML element head element and the body element nested inside the HTML element we find the head and the body let's look at the body element first because it's the easiest to understand all your content goes in the body element everything you see when visiting a website or the headers the images the paragraphs and all the content those all go inside the body content goes in the body it's where most of your HTML coding will be done in a future lesson we will start adding content and those will be written inside the body inside the head element we'll go some very specific elements all of which provide machine readable information or in other words metadata about our document this explanation may be difficult to understand so let's look at an example the title element is one element from a handful that belong inside the head element s inside the head provide metadata information about our website and in this case we are providing a title as metadata this information is not content it is invisible but browsers will take this information and put it to good use and such a good use is easy to see with our title element because we can actually see what the browser is doing with our title let's go and open our live server at the bottom right live server by the way is the extension we installed in the beginning of the course to use it just save your work and click on it at the bottom right this opens a browser tab we can see that the browser gave a title to our tab the same one we provided in our title element the title element does more than just give a title to browser tabs but for now this example was a good representation of how a browser uses metadata let's talk about elements what are they elements are HTML components they are what you use when you want to define or render things on the page if you want to add a paragraph for example you would use the P element this is the P element the element is the entire line from start to finish those are tags the left one is the opening tag and the right one is the closing tag in between each tag is the content all of this together is the element in the wild people often use the words tags and elements interchangeably as if they were the same but by definition it is important to understand that the element refers to the entire line and that tags refer to the individual tag regardless of whether it has a closing tag or even content inside of it you can Nest elements inside elements currently our title element is inside our head element and our head element is inside the HTML element same thing with our P element it's nested inside the body element and the body is nested inside the HTML element I'm going to show you a new element and nested inside our P element the M element adds emphasis to text we can place the M element where we want to add emphasis nesting elements inside other elements is something you do all the time in HTML some elements don't have content inside of them and don't require a closing tag in those cases where we have an element with no content and no closing tag we refer to them as self-closing an example of this is the horizontal rule tag or simply referred to as the HR tag the HR tag is a self-closing tag that adds a horizontal line in the body there are two ways of writing a self-closing tag it can be done like this with a slash or can be written like this without the Slash now for which one you should use that's personal preference but from my experience the self-closing tag written like this with the slash is more popular and potentially more readable another example of a self-closing tag is dbr tag this tag adds a line break to a body of text let's add a line break inside our paragraph attributes are used to alter the behavior of elements this is the anchor element often referred to as the a tag the Ecker element is used to create one of the most important behavior on the web the hyperlink to Pages files emails and external websites the a tag alone without attributes doesn't do anything other than display the text we gave it inside the content area but with the help of one attribute we can give our anchor element all the hyperlink power it needs let's add that attribute it's called the href attribute we will go more in depth into the anchor element and the href attribute later in the course but for now inside our href attribute we can add the URL to any website this will create a hyperlink to that website and clicking the link in the live server will send us to the URL we provided save your work open your live server and click on your new hyperlink you should now be on the Google Website without providing the href attribute to our anchor element our anchor is completely useless and only displays text on the screen there are plenty of attributes in the HTML language some of them are even required to make an element function correctly like in our anchor element example one important thing to note here is that attributes won't just work with any element we put them in for example the href attribute won't work and a paragraph tag href actually only goes in four different elements and one of them being the anchor element this was just an introduction to attributes as we learn more about HTML in future lessons we will gradually get familiar with the different attributes and where they are required in your HTML file there will be a series of empty characters such as spaces tabs and line breaks those are white spaces consider the following code what if I add a bunch of spaces tabs and line breaks will this break our HTML the answer is no our HTML won't break HTML largely ignores all white spaces but this is unreadable and should be avoided keep your code clean luckily though we have tools to clean up our code we installed one at the very beginning of the course called prettier save your file and prettier will automatically remove all the useless white spaces and clean everything up one thing to notice though is inside our paragraph content despite having many spaces in between hello and World HTML still added a space instead of menu That's because in HTML white spaces in between words will render only one space block elements versus inline elements what is this let me just show you I'm going to delete everything in the body and add three paragraph elements save and take a look at your live server exactly as expected we have three hello worlds on their own line now let's try this let's add links to the Google home page remember the anchor tag we briefly went over two lessons ago I'm going to add three anchor elements similar to how we did with the paragraph elements save and take a look at your live server they're all on the same line why was our hello world paragraphs on separate lines and our links all on the same line this is block elements versus inline elements block elements are elements that cover the entire available width of the page or container thus rendering the next element under it we can actually see this when opening the browser's developer tools on Chrome you can click on F12 to open the dev tools another way to open the developer tools on Chrome is by clicking on more tools at the top right of your browser click on the inspect icon and hover over your paragraph element you can see your P element covers the entire width while your links don't the paragraph element is a block level element the anchor element is an inline element you can Nest your links inside a paragraph element to make them Block Level save your work and now your link should be on separate lines so far we've been using the paragraph element to add text on the page The Heading elements are used for titles there are six heading elements the H1 H2 H3 H4 H5 and H6 save and check out your live server why does html provide us with six headings and why do they have different sizes heading elements are ordered by importance with the H1 being the most important when you look at a newspaper you notice that the titles have large font sizes larger than paragraphs and within all the titles on a page you can notice a hierarchy happening where some titles are larger than others those are called headings the H1 represents the largest heading on a page which in turn also represents the most important one when reading a newspaper you are unintentionally reading the largest titles first and as a result the typography is guiding Uriah to where the designers of the newspaper want you to look at first this hierarchy also exists in websites and developers pick the appropriate heading element for the appropriate title based on its hierarchical importance here's an example from my website slaying the dragon can you figure out which heading is using the H1 this become the web developer you were always destined to be is the H1 this title is what I intended for visitors visiting my website to look at first as a general rule all sections should have a heading but we will go more in depth about semantics in a future lesson within a body of text you will often find words or sentences of importance the most common technique used to display importance in text is making that text bold you can see this everywhere in blog posts newspapers books and just about any other place where text is to be found we've already seen how to add emphasis with the m element but there is another element very similar the strong element the strong element indicates that its contents are of strong importance browsers will render the contents inside the strong element in bold use the strong element when you have some text that needs that important or urgent feeling here are some great examples HTML comments are exactly what they sound like they're used to insert a comment or note in your code these comments are going to be ignored by the browser and won't be displayed in the body comments are typically used to explain your code or to comment out some code here's how to add comments in HTML this weird looking tag is a comment anything inside it will be ignored by the browser let's try leaving a note about our code you can also use comments to comment out code like this we commented out our H1 element and now the browser will just ignore it this is pretty cool but that doesn't mean that you should litter your code with a bunch of comments actually too many comments as an eyesore and is counterproductive especially because comments are meant to add readability and if there's too many comments then you lose readability also HTML is a pretty straightforward language and the HTML syntax is already extremely readable so in most cases leaving comments to explain code is not necessary comments are much more common in JavaScript and even there developers use them sparingly because developers always strive to have readable code in the first place when you use comments try to make them short and concise and make sure they add valuable information vs code by the way has a shortcut for adding comments press Ctrl slash on your keyboard and vs code will add a comment for you unordered lists or UL tag is an HTML element that renders a bulleted list to create one we add the UL element like this and inside the element we add list elements we can add as many list elements as we need the UL tag is defining that this list is going to be unordered and then inside it we add our list items this is the Syntax for creating lists in HTML let's open our live server and see how the browser renders this as you can see the UL element created a bulleted list for us a popular use case for lists is a grocery list we can add our items in our list elements the UL tag alone without the LI elements nested inside it doesn't accomplish much of anything we set the UL tag to specify that this will be unordered and then we add the list elements inside it resulting in an unordered list ordered lists or ol tag is an HTML element that renders a numbered list this is very similar to our UL element but renders a numbered list instead of a bulleted list creating an ordered list is the same as creating an unordered list but we open the element with ol instead of UL this also needs list elements inside it open Live server and see the results we can see that unlike our unordered list this added numbers to our list like the UL tag the ol tag alone without the list elements inside it doesn't do much of anything we set the ol tag to specify that this will be ordered and then we add the list elements inside it resulting in an ordered numbered list you can actually Nest any type of list inside the other so for example let's add an ordered list inside our unordered list save and check out the results we now have an unordered list with some ordering inside it lists are something you will be using quite often as a developer lists are even used in places where you might not expect like for example inside a navigation menu the navigation on this thing the dragon website looks like this obviously I used a CSS to make it look the way it does but under the hood this navigation was structured with a UL element hyperlinks are the most powerful feature of HTML they are what makes the web a web and are what allows us to link to other websites hyperlinks are a connection from one web resource to another to create a hyperlink the HTML language provides us with the anchor element a link is created when wrapping content inside the anchor element and providing a hypertext reference or href attribute that contains the web address let's create a link to Google we open the a element we add content in between the eight tags and we add the href attribute with the address linked to the Google Website I'm going to save and take a look at the live server we should be able to hover over our link and click it this will send us to the Google Website within the same browser tab although we specifically wrote where our anchor element was sending us and the contents of our anchor element sometimes adding supporting information is useful when the text we provide is a little vague we can do this with a title attribute the title attribute provides us with a way to add additional information to our links you can see the effects of the title attribute when hovering and holding your hover over your link this anchor element creates a link sending users to the Google home page when clicking the link the Google home page opens on the same browser tab this is the default behavior and it's perfectly fine but what if you don't want it to open on the same Tab and would rather the link be opened on another browser tab you can do this with the target attribute Target underscore blank changes the default behavior and now when clicking on our link Google opens on a separate tab when using Target underscore blank it's a good practice to also include the following attribute and value Rel no opener and no referrer are there for security reasons though security reasons are beyond the scope of this course whenever using Target underscore blank also include the Rel no opener no referrer although since 2021 major browsers are now automatically use the behavior of Rel no opener nullifying this issue this security concern is only relevant when you're linking to a malicious website so A good rule to follow would be when linking to external websites only a link to websites you know are safe and trusted web pages can get extremely long we can use hyperlinks to create a menu that users can use to scroll the page down to the desired section off screen I added a bunch of filler paragraphs to make a super long page this is what our page looks like each section is separated by a heading element and each section contains a bunch of text to create this menu I'm going to use an unordered list this unordered list will be comprised of five list elements with one anchor element nested inside of each I'm going to leave the href attributes empty for now inside the content of each anchor element I'm going to add the name of the section so Section 1 Section 2 Section 3 section 4 and section 5. we can save and see what this looks like now we need to learn about a new attribute called the ID attribute the ID attribute is a global attribute meaning it can be used with almost any element the ID attribute is also a selector attribute its purpose is to identify the element it's assigned to so we can select it when we need it I'm going to assign the ID attribute on each heading we have because each heading represents the start of a section the value of each ID needs to be unique and must not contain any white spaces so no spaces or tabs just text on our first H1 I add the ID attribute and give it the value of section 1. no spaces or tabs just section 1. on our second H1 I add the ID attribute and give it the value of section 2. third H1 add the ID attribute and give it the value of section 3. fourth ID attribute section 4. fifth ID attribute and section 5. now back to our unordered list of hyperlinks we left all the href attributes blank inside the href we can select the ID we need to do this we add a hash and the value we gave to the ID attribute so for the first section we gave its ID the value of section 1. so here inside the href we say hash section one for the second href hash section 2 for the third hash section three fourth hash section four and for the fifth hash section five the hash means we are selecting IDs without it this wouldn't work I'm going to save and test see if our menu sends us to the desired section it's working as expected creating pages in HTML is super easy all you need to do is create a new file name it and give it the HTML extension in this lesson we will create a page add the boilerplate code and then navigate to our page inside vs code click a new file and let's name it about.html now this is looking so empty it's Haram so I'm going to add the HTML boilerplate code the doctype on the first line you already know this the HTML element and both the head and the body element I'm going to give a title to our new page an H1 heading let's say about page and a p element just saying this is the about page inside the URL bar in our live server we can simply add slash about.html to navigate to our about page and boom there you have it we just created a new page it's that simple our about page is located in the root directory if your website has a bunch of pages this would clutter up your root directory to solve this you can place your pages inside their own folder create a new folder and call it whatever you want I'm going to call it pages and move my about.html file inside it inside our live server to navigate to our about page we add the name of the directory we just created and follow it up with the name of the HTML file so Pages slash about.html so far we've been navigating to our newly created Page by manually changing the URL on our live server but as you know this isn't how you normally navigate through pages and finished websites usually you have a navigation menu on the page with options for sending you to different pages let's create this navigation menu inside our home page to do this we're going to use an unordered list with one list item because you only have one page for now in our list element we add an anchor element now what do we put inside the href to navigate to the about page while we add the path to the about page but before we continue we need to figure out where we are and the file structure of our project we are coding in the index.html and the index.html is located in the root directory so in other words we're in the main folder in comparison our about page is in the Pages directory knowing where we are and where we're going is very very important the path to our about page is dot slash Pages slash about.html let's break this down the dot slash means from our current location then we add the name of the directory we're going to so in this case we're going to the Pages directory then we select the about.html file and this constitutes our path from our current location go into the pages folder and select the about.html file I'm going to save and use our menu to navigate to the about page excellent it works let's add the same menu but in the about page what do we put inside this href maybe you're thinking about doing something similar to how we did in our index.html something like dot slash and the folder name slash file name this won't work this path is trying to move down a level when instead what we need to do is move up one level into the root directory to do this we use two dots dot dot slash index dot HTML goes up one level or in other words it goes back one level and selects the index.html you use double dots to move up one level now this is what you would do to select any file located one level up but in this case we're trying to navigate to the home page adding away for returning to the home page is actually quite interesting because the index.html is different than other pages to return home I could use either of these two different methods the method we just learned about dot dot slash index.html or just a slash either one of these will return us to the home page index.html is special what's special about it is its name browsers and search engines are configured to look for the index.html file and once it finds it it's by default considered to be the home page the best practice to return to the home page would be to just use a slash so like this to add an image to the page we use the image tag the image tag is a self-closing tag with one required Source attribute before we start using it over on vs code I'm going to add a new folder to my root directory called public but you can call it whatever you want I'm going to put images in that folder I'm heading over to unsplash.com to find myself a stock picture I want to use this one looks fine I'm gonna download it save it inside my public folder and rename it to something simple like dog back on vs code in my index.html I'm going to add the image tag the image tag is a self-closing tag meaning that there is no text content or any content whatsoever the tag closes itself you can also choose to not even have a slash and it will still work the same like this but I personally prefer having the slash there both are fine though we need to add the required Source attribute and give it the path to our downloaded image save and open your live server the image is huge we will fix this in the next lesson there's one more attribute we should add it's not required but probably should be I use it all the time with the image tag and you should as well the alt attribute will display the description you provide for when the image happens to not load images can fail to load due to networking issues and this provides a safety net for when such issues happen you can set the width and the height of an image with the width and height attributes our image is way too large and is causing our page to scroll horizontally which is almost never the desired outcome I'm going to add the width attribute to the image tag and set it to 500. I'm also going to do the same for the height attribute save and look at your image now if you followed along but chose a rectangle image on unsplash then your image is probably distorted Now when using width and height you need to know the exact measurements you want for your image if you have a photo editing software like Photoshop you can open your image there resize it while keeping the proportions and take note of the pixel size and use those for the width and height attributes note that with CSS which is a styling language of the web that most people learn right after learning HTML it is much easier to proportionally resize images without ever leaving your code my image was perfectly Square so I know that the width and height need to be identical 500 each is a good size for our needs you can Nest an image inside an acre element to create an image hyperlink add an anchor element and give its href the URL to any website I'm going to give it the URL to the Google home page inside the actual element we add the image tag save and open your live server clicking on our image will send us to the Google home page to add a video we use the video element the video element also needs a source attribute The Source attribute serves the exact same function as in the image tag we add a video file in the public folder and give the source attribute the path to the video I'm heading over to pixels.com this time because they have stock videos whereas unsplash only has images imma pick a random one it doesn't really matter save it to my public folder and rename it to footage now we give the path as value to the source attribute save and you should see your video now in your live server last thing for this lesson I want to mention is how do we add information about our video if our video fails to load in our image tag we used an ALT attribute but with the video element it's different inside the contents of our video we add a p element and the text content we give to the P element is going to be the fallback text for when the video doesn't load our video is missing some attributes first of all what if we wanted a different size for our video we can modify the size of our video the same way we did with the image tag with a width and a height attribute what about controls our video lacks any buttons you would typically find when watching a video to add them we just need to add the controls attribute this attribute though is different from other attributes we've seen so far it's a Boolean attribute meaning it's a true or false attribute if present it will be true but if not present the video element has it set to false by default the video element also has other attributes to configure it like autoplay Loop muted and more but I don't want to overwhelm you this should be introduced into your HTML Arsenal in a need to know basis Oxford languages Define the word semantic as relating to meaning in language or logic most of the HTML elements and tags presented in this course were semantic elements with clear purpose and meaning you use the P element for paragraphs you use the UL element for unordered lists you use the ol element for ordered lists you use the H1 to H6 elements for titles and headings when using elements for their intended purposes you are using them semantically this is a good rule to follow there is nothing stopping you from using an H1 element to render a paragraph sure the browser has default styling for the H1 element but you can reset those with CSS and then use the H1 element the same way you would use the P element to render a paragraph but you shouldn't do this it is not semantic use HTML semantically use the correct element for the job but why why use the correct element or tag for the job if most elements can be used interchangeably do we follow the rules like sheep or is there actual good reason to be semantic writing semantic code is important for many many reasons and all programming and computer languages here's a few reasons to be semantic and HTML search engine and SEO optimization search engines like Google and Bing use something called Web crawlers that cross your website and try to make sense of it this is done for searchability if your HTML code is not semantic search engines won't be able to understand it and as a result your website will rank low on search engines accessibility people with visual impairments use the web with tools like screen readers to navigate websites but these screen readers are entirely dependent on your HTML being semantically written readability going over code is a challenge when the code is not semantic you'd be surprised at how difficult it is to come back to Old code you've written in a long time and try to understand it even if it's written semantically if not written semantically then forget about it the code won't be readable and if you thought reading your own code was difficult wait until you need to go over someone else's code better pray he wrote that code semantically cleanliness one way to have readable code is to leave comments but too many comments becomes a mess writing semantically self describes what lines of code do reducing the need for comments more semantic reduces the need for comments and makes your code substantially cleaner so far we've been learning about adding content to the page with HTML elements but we haven't looked at sectioning or grouping content together to create sections most websites have a header section A Hero image a main content section article sections aside sections footer sections and the list goes on the landing page we often find a header section for mostly navigational purposes and then a section underneath it for welcoming and informational purposes these two sections are separate groups of individual contents or elements that are near each other but how do we group content a very very popular way to group content together but unfortunately not semantic at all is by using the div element the div element groups content together it's a generic container non-semantic and has no effect on the content or layout the div element and all other sectioning elements I will be showing you are used to group content together they have no styling of their own and they don't affect the style of what's inside them well at least not by default styling containers like the div element is common in CSS for creating layouts but this is beyond the scope of this course some semantic alternatives to the div elements are the following the header element is the introductory content or information of a page or section most websites you visit have a header section at the very top of the page often displaying the title of the website maybe a logo and almost always a navigation the navigation element is used when grouping a list of links it often represents the menu of a page or section the main element is for the main content of the page everything except the header and footer usually goes inside the main element and there should only be one per page the article element is a self-contained independent and reusable group of content meant to exist independently of the page it's on the section element is used to group together nearby content it's often used to represent a standalone section of a page but lacks a bit of semantic meaning so a better use case for the section element is to be used inside the article element the article element can be used for Standalone sections of a page and then use the section element for nearby content inside the article the footer element is positioned at the bottom of the page representing the ending of the body it often contains contact information Social Links and some sort of navigation similar to a header menu these elements unlike the div element are semantic if you are creating a header you group content for your header inside the header element if you are creating a footer then you group content for your footer inside the footer element if you are creating a navigation then you group content for your navigation inside the navigation element and so on remember these sectioning elements won't affect the way your content looks adding them won't change the way your website looks but they provide something even more important they provide meaning to your code improves SEO helps people with visual impairments adds readability and also all the other benefits we talked about in the last lesson additionally these elements are also used for styling the layout of your page when used with the CSS language do not underestimate the importance of these elements forms are the main way visitors can communicate and interact with our website's back end whether you need a medium for customers to contact you a search input for text navigation or creating updating and deleting items in a list all of these require the use of forms to create a form we use the form element looking at our live server we see nothing changed that's because the form element is just a container where we can add form elements like the input element for example notice the input element is a self-closing tag when looking at our live server we see we have a text field and that's exactly what we want but the input element can actually be many different types of fields for example we can add a type attribute and change the default type which is text to something else with vs code inside the type attribute and with our cursor placed in between the double quotes we can click on control space to view the possible values a common one is checkbox save and view your live server to see what this looks like now we want our input to be a text field and it is so by default so we have the option of removing the type attribute or being specific and setting the type attribute to text I will leave the type attribute there and have it set to text now when we view our live server we see we have an input but this is not user friendly is it what's the purpose of this input we need to tell customers or visitors what to enter in this input to do this we can add a placeholder attribute to our input the placeholder attribute will insert some grade out text in the text field of our input we can use this to provide information to the user about the input we need to add a label to our form actually we should always add a label for each field we have in our forms whether it's a text field or check box adding labels is important and a best practice for user experience when adding a label we need to associate the label with the input it isn't enough to Simply add it above the input we need to programmatically set the label to the correct input there are two ways of doing this the first is to add the label element above its input give it a four attribute with a semantic value and also give the input element an ID attribute with the same value the form and ID attributes have the same value and are now Associated together the second method of doing this is by wrapping the input element inside the content of the label element with this method you don't need the extra attributes we had in the first method but this way of doing it is less common use the first method it's cleaner and is considered to be the best practice let's practice this by adding a last name field and a email field to our form we know a last name is going to be a text field we add an input with a type text attribute and give it a placeholder this input is missing a label so we add the label element it's going to say last name and we give the element the for attribute and set it to last name we also need to have an ID attribute on the input set to the same value as the four attribute we also need to have an ID attribute on the input set to the same value as the four attribute on the label element just above it lastly we need a field where we can add an email in our form since the code for this is almost identical to the code and the last name I'm just going to copy and paste it and then make a few adjustments on the label element this value needs to be email and the content area needs to be email the ID on the input needs to match the four attributes so email the type can be changed to email which by the way is one of the types and the placeholder can be changed to be enter email let's see what this looks like in our live server our form is looking like a contact form but we're missing a field contact forms usually have a place where users can type a lengthy message using an input of type text for a message wouldn't work because most messages are going to require line breaks for such cases where large chunks of text are expected we use the text area element treat the text area element the same way you treat the input element assign it a label and give it a placeholder if you want our text area is looking smaller we can use rows and calls attribute to give our text area more rows and columns now the last thing I'm going to do here is fix how the form is laid out I'm sure you've noticed that our form is looking weird it's all laid out horizontally this is because the label input and text area elements are all inline elements we've seen earlier in the course that inline elements are laid out next to each other instead of On Their Own Line we can fix this using an unordered list inside our form I'm just going to wrap everything in the form in the UL element and use list elements to wrap all the different fields save your work take a look at your live server and see how this already looks way better one important element we haven't covered yet is the button element you can find buttons all over the web and for good reason buttons are one of the most important interactive element HTML has the reason though this element is being presented so late in this course is because the button element is most often used in conjunction with JavaScript to create one simply add it anywhere in the body save and look at how this looks in your live server it doesn't look like much but that's okay when you learn about CSS you will be able to style buttons and any other element the way you want for now though this is what we're working with similar to the input element we can pass our button the type attribute there's only two options though button and submit button is the default type and behaves exactly as you would expect like a normal button the submit type is useful inside of form for submitting the form buttons inside of forms automatically have a type of submit by default most of the time you won't need to add the type attribute because the default value will often be the desired one you can always add a dough if you want to be specific let's add a button to our form last thing worth mentioning is that you can disable buttons with the disabled Boolean attribute just like this if you ever want there to be a button but have it disabled congratulations you've reached the final part of the course let's put everything we've learned so far into practice and build a simple recipe blog website now because this is an HTML course we won't be styling the website with CSS so it's going to look pretty Bare Bones but that's okay because now you'll be equipped with all the HTML knowledge you need to start learning CSS this is a demo of what we're building we have a home page a Blog Page and a contact page we also have a page for each blog post in this demo there's only three blog posts the hamburger recipe blog post the French toast recipe blog post and the pancake recipe blog post so in total we have six different pages all the pages have three sections a header section a main section and a footer section the images were taken on unsplash.com and I purposely picked square pictures to be able to easily resize them with only HTML we're going to build one page at a time starting off with the home page and we're also starting with a fresh project folder there's literally nothing in here so we have to add the index.html we add the boilerplate code to our empty document our demo has three sections the header the main and the footer so we add those the header section has two things going for it a heading and a menu the heading here is going to be an H1 and it's going to be the only H1 in the entire page because you should never have more than one H1 per page inside the H1 we say recipe website just like in our demo underneath the heading we have a menu so we need the semantic nav sectioning element to somatically Define this part as being a navigational menu inside the nav we use an unordered list with three list items inside each list item is going to be nested and accurate element to create hyperlinks to our different pages home blog and contact now we haven't created these Pages yet but we're going to be creating them in the root directory and we're also going to be naming them home blog and contact with this information we can fill out the href for each slash for the home page dot slash blog.html for the blog page and Dot slash contact.html for the contact page we're done with the header section our main section has a heading a paragraph a horizontal rule another heading and three different article sections representing recipe blog posts so let's start from the beginning with the heading this one is an H2 because we already have an H1 and we can see that it's slightly less large than the heading on the header section inside the H2 we type welcome to the recipe website just like in our demo now we add the paragraph Just underneath it learn how to cook a wide variety of amazing tasting food underneath the paragraph we see a horizontal line This is the HR tag underneath the horizontal line is the start of a group of content and this group of content can be considered to be self-contained independent and reusable meant to exist independently of the page at sauna meaning that this section popular blog posts could be copy and pasted anywhere in any other page because this section has no obligation or ties to the home page the popular blog post section is a reusable chunk of content that could fit in any page and therefore we use the article element here because that's exactly the use case for the article element because this is the beginning of a section we should add a heading that's why there's one in our demo the heading here is an H3 because we are following the chain of headings from H1 to H6 we use the H1 already and we can't have more than one H1 we have an H2 already but we're allowed to have more than one H2 so why do we go for the H3 here well first of all on our demo the font size seems smaller than our H2 heading so we know this must be an H3 but also this heading has less importance than the one before it thus H3 here is perfect inside the H3 goes popular blog posts underneath the H3 heading is again the start of another chunk of content do we use the article element here the answer is no the article element here does not apply because first of all we're already inside the article element secondly this chunk of content is not independent of its parent section this chunk of content is just nearby content so we use the section element if you're having trouble remembering or understanding these sectioning elements feel free to refer back to the lesson where we covered the semantic sectioning elements and then come back here to pick off where you left off so here we use the section element and inside the section element is where we add this chunk of nearby content we need an H4 heading an image element and a paragraph the H4 here is hamburger the paragraph is learn to cook a hamburger here and the here is a hyperlink so we wrap it in the anchor element the href to this anchor element is going to be dot slash blog slash hamburger.html because later on in the project I'm going to create a folder called blog and put inside it to all the blog posts for the image tag we need to go fetch them from unsplash.com first I'm going to create a folder called public any images I download will be saved in this folder so I'm heading over to unsplash.com and search for hamburger I'll change the orientation to square and pick a picture I like while I'm here I might as well find a picture for French toasts and a picture of a pancake all my pictures were saved in the public folder so inside the source attribute on the image tag I give the route of dot slash public slash hamburger.jpg I can now copy this entire section paste it two times and replace the heading image route and paragraph to match the demo website I'm also going to change the route on this hyperlink from hamburger.html the French toast.html and on this hyperlink from hamburger.html to pancakes.html now before we move on to the footer section there's a paragraph here that's inside the article section but outside the section element that we need to add view all the recipes on the blog page Blog Page should be a hyperlink so we wrap it inside an anchor element and give the href the route to the block page so dot slash blog.html we're now done with this section on our demo website there's a horizontal rule separating the main section and the footer section let's add that HR tag inside the main element but outside the article element now inside our footer we only have two elements an H4 heading and a paragraph inside the H4 heading we add recipes by slaying the dragon and inside the paragraph we say All Rights Reserved notice though that in our demo the text the text is italicized so we wrap the text here inside the M element finally I'm going to save my work open my live server and see if what I have is identical to My Demo everything looks the same so I'm going to say job well done when looking at the demo we can see that the blog page is actually super similar to the home page what we can do is just copy and paste the entire index.html and paste it inside our blog.html so the first thing we need to do is create the blog page inside the root directory we add blog.html then we copy everything inside the index.html and paste it inside the blog page first we need to change the title of the page to blog page on the header section the only change we need to do is change the text in the H1 from recipe website to blog page inside the main section we remove the H2 heading the P element the HR tag and the H3 heading we also remove the P element at the bottom of the main element everything else is identical save and see the result first we create the contact page in the root directory contact.html the contact page is pretty short it also shares the same header and footer as the blog page so we can go ahead and copy everything from the blog.html and paste it inside the contact.html file we change the title of the page from blog page to contact page we change the H1 from blog page to contact page we remove everything inside the main section and we keep the footer as is inside the main section we add two HR tags in between them we add our form element our form has three inputs one text area and one button the first input has an ID of first name a type of text and a placeholder of enter first name the second input has an ID of last name a type of text and a placeholder of enter last name the third input has an ID of email a type of email and a placeholder of enter email the text area has an ID of message a calls attribute of 30 and a rows attribute set to 10. each input and text area needs a label element assigned to them so above the first name input we add a label with a four attribute set to first name to match the ID of the input right underneath it above the last name input we add a label with a four attribute set to last name above the email input we add a label with a four attribute set to email and above the message text area we add a label with a four attribute set to message we also need a button by default buttons and forms have a type of submit outside forms the default type of buttons is a regular button we want our button to be of type submit but because we're adding this button inside a form we don't need to explicitly add the type attribute and set it to submit when saving our work and viewing how our form looks we see every form element being placed in line to fix this I'm going to wrap the elements in div elements now save and there you have it our contact page is complete we're almost done going back to the index.html on the article section I said that the route to our blog posts would be inside a Blog folder which is why in the href of these hyperlinks we have dot slash blog slash hamburger.html dot slash blog French toast.html and Dot slash blog slash pancakes.html we need to create this blog folder in our root directory and give it three HTML files hamburger.html frenchtoast.html and pancakes.html let's focus on the hamburger.html first and then use it as a template for the others I'm going to add the standard boilerplate code looking at our demo we see we have a header a main and a footer so we can add those right away the footer section is identical to the Footers on our other pages so we can grab the footer code from A Different Page and paste it here the header section has a one item menu so we need a nav element and inside it we add an anchor element that says go back home the href to go back to the home page is a simple slash lastly for our header section underneath the navigation we have an H1 heading that we need to add saying hamburger inside the main section we have two horizontal rules one at the top and one at the bottom so we add those and between the horizontal rules we have the start of a section we can wrap this section with the article element and wrap everything related to making a hamburger inside the section element so basically everything in this section except the last P element our section starts with a H4 heading an image of our hamburger the route to our image here is dot dot slash public slash hamburger.jpeg we use two dots to move back up to the root directory because we're currently Out Of Reach of the public folder being in the blog directory an odd attribute to describe the image tasting looking hamburger a width of 200 and a height of 200. under the image we have an other H4 heading this one saying ingredients after that we see the ingredients to make the Hamburger being listed in an unordered list so we add the UL element and give it seven list items cheese lettuce tomato bacon and sauce we have another H4 this one for instructions and we see the instructions are all numbered so we know this is going to be an ordered list we add the ol element and give it eight list elements cook Patty heat buns Place cheese place cooked Patty Place lettuce Place tomato place bacon and place sauce lastly under the closing section tag but still inside the article element we have a p element saying view all the recipes on the blog page Blog Page being a hyperlink so we wrap it with the anchor element and give the href the route to our blog page because we're in the blog folder and our blog page is in the root directory we add two dots to move up into the root directory dot dot slash blog dot HTML let's save and test our hamburger blog recipe page now for the two last recipe Pages the French toast and the pancake all we need to do is copy and use the code from our hamburger page for them because they are almost identical only replacing the headings and image routes you've reached the end of the course if you enjoyed the video remember to like the video and subscribe for more content thanks for watching